WPF按钮触发图标更改

Question

Hi firstly thanks for any help in pointing me to the right direction. I have an application in WPF that is starting to cause me issues. I'm OK with the The basics but now I'm getting deeper into it its getting more complicated and I'm not sure if it's my lack of knoledge or a limitation of XAML.

My application has RadioButtons, and I'm using a style on this to return them as ToggleButtons using BasedOn property.

All this is fine, included in this style is styling information and trigger events for OnClick and mouse over which override the default actions.

The issue I'm having is that i want to be able to swap out the content (Icon image) when the radio button IsChecked.

To do this I cant have the image hard-coded in the style and i don't want to have to put all of this style information for OnClick, MouseOver etc in each button.

I have tried adding a further style into the RadioButton itself and basing that on the style I'm currently using but the code for that is not updating the Content(Icon Image). The only example I can find is a control template, if I set a border inside the template OnChecked it will show the border but I'm not sure I'm using the correct property to change the radio Button content.

The parent style with all the triggers looks like this

<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>

And my button with my added style currently looks like this

<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>

I have seen one or two examples using Events, but so far i have managed to avoid writting anything in my code behind and containing all of it to my ViewModel so if there is a way of doing this in the XAMl it would be perfect.

Sorry if i have explained this poorly, and thanks again for any help.

Answer 1

first of all, even if you base your style on the toggle button style you have to manage IsChecked state of the RadioButton in your view model. If you manage that, it is good. Secondly if you brake the control template in your base style, the further brake attempt is redundant, because you just brake the previous one that broke the origin. So in case if you want to give a new content look to your control try to re-template the ContentTemplate in the control style. In your case you changed the original template, thus you won't have the check mark area the only content will be displayed. Concerning the examples: 1. Here is RadioButton changing its inner bullet (check mark area), add your own brushes as you wish:

    <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>

2. Here are the brushes for the style above:

     <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" /> 

3. Here is the radio button style which is changing its content only by the IsChecked style (like in your example with small changes described above):

     <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> 

4. And here is the combo that can manage IsChecked state by itself (but you can't combain the combo and RadioButton in the way you did):

     <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> 

5. A SpecialButtonStyle to make the toggle button to be radial:

    <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> 

6. View model code:

   private bool _isBrightnessAndContrastEnabled;

    public bool IsBrightnessAndContrastEnabled { get { return _isBrightnessAndContrastEnabled; } set { _isBrightnessAndContrastEnabled = !IsBrightnessAndContrastEnabled; OnPropertyChanged(); } } 

7. Important!!! You have to put all defined styles in the resources area of the xaml code in your control.

8. How its looks like . I'll be glad to help if you will have problems with the code. Regards