WPF按钮触发器图标更改

时间:2015-12-09 16:34:16

标签: c# wpf xaml eventtrigger mouseclick-event

嗨,首先感谢任何帮助,指出我正确的方向。我在WPF中有一个应用程序,它开始引起我的问​​题。我对基础知识很满意,但现在我越来越深入了解它变得越来越复杂,我不确定这是否是我缺乏知识或XAML的限制。

我的应用程序有RadioButtons,我正在使用它的样式将它们作为ToggleButtons使用BasedOn属性返回。

所有这一切都很好,包括在这个样式中的样式信息和触发事件的OnClick和鼠标覆盖默认操作。

我遇到的问题是我希望能够在单选按钮IsChecked时换出内容(图标图像)。

要做到这一点,我不能在样式中硬编码图像,我不想在每个按钮中放置OnClick,MouseOver等所有这些样式信息。

我尝试在RadioButton本身添加另一个样式,并将其基于我当前使用的样式,但代码不是更新内容(图标图像)。 我能找到的唯一例子是控件模板,如果我在模板OnChecked中设置一个边框,它将显示边框,但我不确定我是否使用正确的属性来更改单选按钮内容。

包含所有触发器的父样式如下所示

<Style x:Key="RadioBtnToolStyle"  BasedOn="{StaticResource {x:Type ToggleButton}}" TargetType="{x:Type RadioButton}">       
    <Setter Property="Background" Value="{x:Null}" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="Foreground" Value="{x:Null}" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="Margin" Value="3" />
    <Setter Property="BorderBrush" Value="{x:Null}" />          
    <Setter Property="RenderTransform">
        <Setter.Value>
            <ScaleTransform CenterX="30" CenterY="30" ScaleX="1" ScaleY="1" />
        </Setter.Value>
    </Setter>
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="Cursor" Value="Hand" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RadioButton">
                <Border Name="border" BorderThickness="0" BorderBrush="Black" Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Opacity" Value="0.8" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsPressed" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation From="1" To="0.8" RepeatBehavior="Forever" AutoReverse="True" Duration="00:00:00.6" Storyboard.TargetProperty="RenderTransform.ScaleX" />
                        <DoubleAnimation From="1" To="0.8" RepeatBehavior="Forever" AutoReverse="True" Duration="00:00:00.6" Storyboard.TargetProperty="RenderTransform.ScaleY" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation To="1" Duration="00:00:00.6" Storyboard.TargetProperty="RenderTransform.ScaleX" />
                        <DoubleAnimation To="1" Duration="00:00:00.6" Storyboard.TargetProperty="RenderTransform.ScaleY" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
        </Trigger>
    </Style.Triggers>
</Style>

我的添加样式的按钮目前看起来像这样

<RadioButton GroupName="Tools"  Grid.Row="0" Content="{StaticResource BrightnessContrast}" IsChecked="{Binding IsBrightnessAndContrastEnabled}">                   
                    <RadioButton.Style>                            
                        <Style TargetType="RadioButton" BasedOn="{StaticResource RadioBtnToolStyle}">
                            <Setter Property="OverridesDefaultStyle" Value="True" />
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="RadioButton">
                                        <ContentPresenter Content="{StaticResource BrightnessContrast}" HorizontalAlignment="Center" VerticalAlignment="Center" />         
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="IsChecked" Value="True">
                                                <Setter Property="Content" Value="{StaticResource InvertImageBtn}" />
                                            </Trigger>
                                            <Trigger Property="IsChecked" Value="False">
                                                <Setter Property="Content" Value="{StaticResource  LogoFooterBackgroundStyle}" />
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </RadioButton.Style>
                </RadioButton>

我已经看过一两个使用事件的例子,但到目前为止我已经设法避免在我的代码中写入任何内容并将其全部包含在我的ViewModel中,所以如果有一种方法在XAMl中执行此操作,那么它将是完美。

很抱歉,如果我解释得不好,再次感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

首先,即使您的样式基于切换按钮样式,您也必须在视图模型中管理RadioButton的IsChecked状态。如果你管理它,这很好。其次,如果您以基本样式制动控制模板,则进一步制动尝试是多余的,因为您只需制动前一个断开原点的制动器。因此,如果您想要向控件提供新内容,请尝试以控件样式重新模板化ContentTemplate。在您的情况下,您更改了原始模板,因此您将无法使用复选标记区域显示唯一的内容。关于这些例子:  1.这是RadioButton更改其内部子弹(复选标记区域),根据需要添加自己的画笔:

    <ImageBrush x:Key="CheckedBullet" ImageSource="MyResources/Koala.jpg"/>
    <ImageBrush x:Key="UnCheckedBullet" ImageSource="MyResources/Penguins.jpg"/>

    <Style x:Key="MyRadioButton" TargetType="{x:Type RadioButton}">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="FocusVisualStyle"    Value="{StaticResource RadioButtonFocusVisual}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RadioButton}">
                    <BulletDecorator Background="Transparent">
                        <BulletDecorator.Bullet>
                            <Grid Width="50" Height="50" >
                                <Ellipse x:Name="Border"  
            Fill="{StaticResource NormalBrush}"
            StrokeThickness="1"
            Stroke="{StaticResource NormalBorderBrush}" />
                                <Ellipse Margin="3" x:Name="CheckMark" IsHitTestVisible="False"/>
                            </Grid>
                        </BulletDecorator.Bullet>
                        <ContentPresenter 
        Margin="4,0,0,0"
        VerticalAlignment="Center"
        HorizontalAlignment="Left"
        RecognizesAccessKey="True"/>
                    </BulletDecorator>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="CheckMark" Property="Fill" Value="{StaticResource CheckedBullet}"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="False">
                            <Setter TargetName="CheckMark" Property="Fill" Value="{StaticResource UnCheckedBullet}"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="Border" Property="Fill" Value="{StaticResource DarkBrush}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="Border" Property="Fill" Value="{StaticResource PressedBrush}" />
                            <Setter TargetName="Border" Property="Stroke" Value="{StaticResource GlyphBrush}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter TargetName="Border" Property="Fill" Value="{StaticResource DisabledBackgroundBrush}" />
                            <Setter TargetName="Border" Property="Stroke" Value="#40000000" />
                            <Setter Property="Foreground" Value="#80000000"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 <!--xaml code that use the style MyRadioButton defined above-->
    <RadioButton HorizontalAlignment="Center" VerticalAlignment="Center"
                 IsChecked="{Binding IsBrightnessAndContrastEnabled, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
        <RadioButton.Style>
            <Style TargetType="RadioButton" BasedOn="{StaticResource MyRadioButton}">
                <Style.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Content" Value="Checked!!!" />
                    </Trigger>
                    <Trigger Property="IsChecked" Value="False">
                        <Setter Property="Content" Value="Check me!!!" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </RadioButton.Style>
    </RadioButton>
  1. 以下是上述风格的画笔:

        <Style x:Key="RadioButtonFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border>
                        <Rectangle 
        Margin="15,0,0,0"
        StrokeThickness="1"
        Stroke="#60000000"
        StrokeDashArray="1 2"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
    <!-- Fill Brushes -->
    
    <LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFF" Offset="0.0"/>
                <GradientStop Color="#CCC" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    
    <LinearGradientBrush x:Key="HorizontalNormalBrush" StartPoint="0,0" EndPoint="1,0">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFF" Offset="0.0"/>
                <GradientStop Color="#CCC" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    
    <LinearGradientBrush x:Key="LightBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFF" Offset="0.0"/>
                <GradientStop Color="#EEE" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    
    <LinearGradientBrush x:Key="HorizontalLightBrush" StartPoint="0,0" EndPoint="1,0">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFF" Offset="0.0"/>
                <GradientStop Color="#EEE" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    
    <LinearGradientBrush x:Key="DarkBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFF" Offset="0.0"/>
                <GradientStop Color="#AAA" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    
    <LinearGradientBrush x:Key="PressedBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#BBB" Offset="0.0"/>
                <GradientStop Color="#EEE" Offset="0.1"/>
                <GradientStop Color="#EEE" Offset="0.9"/>
                <GradientStop Color="#FFF" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    
    <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
    
    <SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />
    
    <SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />
    
    <SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD" />
    
    <!-- Border Brushes -->
    
    <LinearGradientBrush x:Key="NormalBorderBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#CCC" Offset="0.0"/>
                <GradientStop Color="#444" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    
    <LinearGradientBrush x:Key="HorizontalNormalBorderBrush" StartPoint="0,0" EndPoint="1,0">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#CCC" Offset="0.0"/>
                <GradientStop Color="#444" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    
    <LinearGradientBrush x:Key="DefaultedBorderBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#777" Offset="0.0"/>
                <GradientStop Color="#000" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    
    <LinearGradientBrush x:Key="PressedBorderBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#444" Offset="0.0"/>
                <GradientStop Color="#888" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    
    <!-- Miscellaneous Brushes -->
    <SolidColorBrush x:Key="GlyphBrush" Color="#FF00FF00" />
    
    <SolidColorBrush x:Key="LightColorBrush" Color="#DDD" />
    
  2. 以下是单选按钮样式,它仅通过IsChecked样式更改其内容(如上例所示的小更改示例):

        <ImageBrush x:Key="CheckedBullet" ImageSource="MyResources/Koala.jpg"/>
    <ImageBrush x:Key="UnCheckedBullet" ImageSource="MyResources/Penguins.jpg"/>
    <Style x:Key="RadioBtnToolStyle" TargetType="{x:Type RadioButton}">
        <Setter Property="Background" Value="#00FFFFFF" />
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="Foreground" Value="{x:Null}" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="Margin" Value="3" />
        <Setter Property="BorderBrush" Value="{x:Null}" />
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="RenderTransform">
            <Setter.Value>
                <ScaleTransform CenterX="30" CenterY="30" ScaleX="1" ScaleY="1" />
            </Setter.Value>
        </Setter>
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RadioButton">
                    <Border Name="border" BorderThickness="0" BorderBrush="Black" Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Opacity" Value="0.8" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsPressed" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation From="1" To="0.8" AutoReverse="False" Duration="00:00:00.6" Storyboard.TargetProperty="RenderTransform.ScaleX" />
                            <DoubleAnimation From="1" To="0.8" AutoReverse="False" Duration="00:00:00.6" Storyboard.TargetProperty="RenderTransform.ScaleY" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation To="1" Duration="00:00:00.6" Storyboard.TargetProperty="RenderTransform.ScaleX" />
                            <DoubleAnimation To="1" Duration="00:00:00.6" Storyboard.TargetProperty="RenderTransform.ScaleY" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
        </Style.Triggers>
    </Style>
        <!--code that use the style above-->
    <RadioButton GroupName="Tools"  Grid.Row="0" IsChecked="{Binding IsBrightnessAndContrastEnabled, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Right" VerticalAlignment="Bottom">
        <RadioButton.Style>
            <Style TargetType="RadioButton" BasedOn="{StaticResource RadioBtnToolStyle}">
                <Setter Property="Width" Value="50"></Setter>
                <Setter Property="Height" Value="50"></Setter>
                <Style.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Content" Value="{StaticResource InvertImageBtn}" />
                    </Trigger>
                    <Trigger Property="IsChecked" Value="False">
                        <Setter Property="Content" Value="{StaticResource  LogoFooterBackgroundStyle}" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </RadioButton.Style>
    </RadioButton>
    

  3. 以下是可以自行管理IsChecked状态的组合(但你不能以你的方式组合组合和RadioButton):

       <ToggleButton IsChecked="{Binding IsBrightnessAndContrastEnabled, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Left" VerticalAlignment="Top">
        <ToggleButton.Style>
            <Style TargetType="ToggleButton" BasedOn="{StaticResource SpecialButtonStyle}">
                <Setter Property="Width" Value="50"></Setter>
                <Setter Property="Height" Value="50"></Setter>
                <Style.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Content" Value="{StaticResource InvertImageBtn2}" />
                    </Trigger>
                    <Trigger Property="IsChecked" Value="False">
                        <Setter Property="Content" Value="{StaticResource  LogoFooterBackgroundStyle2}" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ToggleButton.Style>
    </ToggleButton>
    
  4. 使切换按钮成为径向的SpecialButtonStyle:

    <Image x:Key="InvertImageBtn2" Source="MyResources/Koala.jpg" />
    <Image x:Key="LogoFooterBackgroundStyle2" Source="MyResources/Penguins.jpg" />
    <Color x:Key="ButtonLowerPartKey">#FFD5E0EE</Color>
    <Color x:Key="ButtonUpperPartKey">#FFEAF1F8</Color>
    <Color x:Key="PressedColorButtonLowerPartKey">#FFF4C661</Color>
    <Color x:Key="PressedButtonUpperPartKey">#FFF4CC87</Color>
    <Color x:Key="HooveredButtonLowerPartKey">#FFFFD06D</Color>
    <Color x:Key="HooveredButtonUpperPartKey">#FFFFF0DF</Color>
    <Style x:Key="SpecialButtonStyle" TargetType="ToggleButton" BasedOn="{StaticResource {x:Type ToggleButton}}">
        <Setter Property="Padding" Value="5">
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Grid x:Name="Grid">
                        <Ellipse x:Name="ButtonControlBorder" Stroke="{TemplateBinding BorderBrush}" 
                             StrokeThickness="{TemplateBinding BorderThickness}" 
                             Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                            <Ellipse.Fill>
                                <LinearGradientBrush x:Name="BrushKey" MappingMode="RelativeToBoundingBox" SpreadMethod="Repeat" StartPoint="0.5,0" EndPoint="0.5,1">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Offset="0.5" Color="{StaticResource ButtonUpperPartKey}" />
                                        <GradientStop Offset="0.5" Color="{StaticResource ButtonUpperPartKey}" />
                                        <GradientStop Offset="0.5" Color="{StaticResource ButtonLowerPartKey}" />
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                        <Ellipse x:Name="Pressed" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Opacity="0">
                            <Ellipse.Fill>
                                <LinearGradientBrush x:Name="PressedBrushKey" MappingMode="RelativeToBoundingBox" SpreadMethod="Repeat" StartPoint="0.5,0" EndPoint="0.5,1">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Offset="0.5" Color="{StaticResource PressedButtonUpperPartKey}" />
                                        <GradientStop Offset="0.5" Color="{StaticResource PressedButtonUpperPartKey}" />
                                        <GradientStop Offset="0.5" Color="{StaticResource PressedColorButtonLowerPartKey}" />
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                        <Ellipse x:Name="InnerPressed" 
                            Width="{Binding ElementName=Pressed, Path=Width}" Height="{Binding ElementName=Pressed, Path=Height}" 
                            Stroke="DarkOrange" Opacity="0" StrokeThickness="1" SnapsToDevicePixels="True" Fill="Transparent"/>
                        <ContentPresenter Content="{TemplateBinding Button.Content}" HorizontalAlignment="Center" VerticalAlignment="Center">
                            <ContentPresenter.OpacityMask>
                                <VisualBrush Visual="{Binding ElementName=ButtonControlBorder}" />
                            </ContentPresenter.OpacityMask>
                        </ContentPresenter>
                        <Grid.Triggers>
                            <EventTrigger RoutedEvent="Mouse.MouseEnter">
                                <BeginStoryboard x:Name="MouseEnterStoryboard">
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="BrushKey" Storyboard.TargetProperty="GradientStops[0].Color" From="{StaticResource ButtonUpperPartKey}" To="{StaticResource HooveredButtonUpperPartKey}" Duration="0:0:0.3" AutoReverse="False" />
                                        <ColorAnimation Storyboard.TargetName="BrushKey" Storyboard.TargetProperty="GradientStops[2].Color" From="{StaticResource ButtonLowerPartKey}" To="{StaticResource HooveredButtonLowerPartKey}" Duration="0:0:0.3" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="Mouse.MouseLeave">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="BrushKey" Storyboard.TargetProperty="GradientStops[0].Color" From="{StaticResource HooveredButtonUpperPartKey}" To="{StaticResource ButtonUpperPartKey}" Duration="0:0:1" AutoReverse="False" />
                                        <ColorAnimation Storyboard.TargetName="BrushKey" Storyboard.TargetProperty="GradientStops[2].Color" From="{StaticResource HooveredButtonLowerPartKey}" To="{StaticResource ButtonLowerPartKey}" Duration="0:0:1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </Grid.Triggers>
                    </Grid>
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="MouseUpTimeLine">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Pressed" Storyboard.TargetProperty="Opacity">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="MouseDownTimeLine">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Pressed" Storyboard.TargetProperty="Opacity">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.05" Value="0.8" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="InnerPressedMouseUpTimeLine">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="InnerPressed" Storyboard.TargetProperty="Opacity">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="InnerPressedMouseDownTimeLine">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="InnerPressed" Storyboard.TargetProperty="Opacity">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.05" Value="1" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </ControlTemplate.Resources>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" SourceName="Grid" Value="True">
                            <Setter Property="Stroke" TargetName="ButtonControlBorder">
                                <Setter.Value>
                                    <SolidColorBrush Color="{StaticResource HooveredButtonLowerPartKey}">
                                    </SolidColorBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="ButtonBase.IsPressed" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource MouseDownTimeLine}" />
                                <BeginStoryboard Storyboard="{StaticResource InnerPressedMouseDownTimeLine}">
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource MouseUpTimeLine}" />
                                <BeginStoryboard Storyboard="{StaticResource InnerPressedMouseUpTimeLine}">
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
  5. 查看型号代码:

    private bool _isBrightnessAndContrastEnabled;

    public bool IsBrightnessAndContrastEnabled
    {
        get { return _isBrightnessAndContrastEnabled; }
        set
        {
            _isBrightnessAndContrastEnabled = !IsBrightnessAndContrastEnabled;
            OnPropertyChanged();
        }
    }
    
  6. 重要!!!您必须将所有已定义的样式放在控件中的xaml代码的资源区域中。

  7. 它的外观如何here。 如果你的代码有问题我会很乐意提供帮助。 此致