奇怪的按钮样式行为，像故事板一样改变颜色

本文关键字：一样 变颜色 改变 像故事 按钮 样式 | 更新日期: 2023-09-27 18:03:27

我想根据ViewModel属性为按钮设置样式，该属性不是按钮的一部分。

所以我创建了下面的

按钮XAML:

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

样式(带有属性的触发器)不起作用。也试过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>

属性

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

点击处理程序

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

现在如果我点击按钮，类似故事板的东西就开始了按钮开始像动画一样改变颜色。

代码有什么问题?

复制在一个小样本，只是有按钮功能张贴在这里。没有别的(除了基本的INotifyPropertyChanged实现)

奇怪的按钮样式行为，像故事板一样改变颜色

您必须将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>
相关文章：