0

I want to style a button depending on a ViewModel property, which is not part of the button.

So I created the following

The Button XAML:

<Button Content="DisableButton" 
            Height="27" 
            HorizontalAlignment="Left" 
            Margin="95,197,0,0" 
            VerticalAlignment="Top" 
            Width="120" 
            Style="{DynamicResource ButtonOffline}"
            Click="ButtonDisableClick">
    </Button>

The style (the Trigger with Property does not work. also tried DataTrigger)

<Grid.Resources>
        <Style x:Key="ButtonOffline" TargetType="{x:Type Button}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsOnline}" Value="false">
                    <Setter Property="Background" Value="#FF808080"></Setter>
                    <Setter Property="BorderBrush" Value="Red"></Setter>
                    <Setter Property="BorderThickness" Value="5"></Setter>
                </DataTrigger>
                <DataTrigger Binding="{Binding IsOnline}" Value="true">
                    <Setter Property="Background" Value="#FF990000"></Setter>
                    <Setter Property="BorderBrush" Value="Blue"></Setter>
                    <Setter Property="BorderThickness" Value="2"></Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Grid.Resources>

The property

private bool isOnline;
        public bool IsOnline
        {
            get
            {
                return isOnline;
            }
            set
            {
                isOnline = value;
                NotifyPropertyChanged("IsOnline");
            }
        }

And my click handler

private void ButtonDisableClick(object sender, RoutedEventArgs e)
        {
            var isOnline = (this.DataContext as ComboBoxSampleViewModel).IsOnline;
            (this.DataContext as ComboBoxSampleViewModel).IsOnline = !isOnline;
        }

Now if I click the button, something like a storyboard begins and the buttons starts to change colors like an animation.

Whats wrong with the code?

Update Reproduced in a small sample which just has the button features posted here. Nothing (except the basic INotifyPropertyChanged implementation) else which is not posted here.

4

1 回答 1

1

您必须将Focusable属性设置为 false，这将停止按钮闪烁。

<Button Content="DisableButton" 
        Focusable="False"
        Height="27"             
        HorizontalAlignment="Left" 
        Margin="95,197,0,0" 
        VerticalAlignment="Top" 
        Width="120" 
        Style="{DynamicResource ButtonOffline}"
        Click="ButtonDisableClick">
    </Button>

发生这种情况是因为默认模板中必须有一些触发器正在更改背景属性。

第二种解决方案是创建自己的按钮模板。

<Grid.Resources>
    <Style x:Key="ButtonOffline" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid x:Name="Grid">
                        <Border CornerRadius="2" x:Name="Border" Background="{TemplateBinding Background}" 
                        BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 
                        Padding="{TemplateBinding Padding}"/>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                        Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                        RecognizesAccessKey="True"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsOnline}" Value="False">
                <Setter Property="Background" Value="#FF808080"></Setter>
                <Setter Property="BorderBrush" Value="Red"></Setter>
                <Setter Property="BorderThickness" Value="5"></Setter>
            </DataTrigger>
            <DataTrigger Binding="{Binding IsOnline}" Value="True">
                <Setter Property="Background" Value="#FF990000"></Setter>
                <Setter Property="BorderBrush" Value="Blue"></Setter>
                <Setter Property="BorderThickness" Value="2"></Setter>
            </DataTrigger>              
        </Style.Triggers>
    </Style>
</Grid.Resources>
于 2013-03-11T20:33:35.213 回答