Adding triggers to Toggle Botton Style-> XML

Question

Hi I want to add Triggers to blend generated XML.I created Toggle button in blend now i want to add trigger properties to toggle the foreground when the button is checked (Blue ,white otherwise). Here goes my XML (pasted and using in VS 2010)

                    <Border x:Name="border" BorderBrush="Transparent" BorderThickness="1" CornerRadius="7,7,0,0">
                        <Border.Background>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FF024592"/>
                                <GradientStop Color="#FF003D8B" Offset="1"/>
                            </LinearGradientBrush>
                        </Border.Background>
                    </Border>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Tag}" Margin="5,5,0,5"/>
                        <ContentPresenter Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Foreground" Value="Blue"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

Added Trigger for Foreground. Also added an Image to the left of the Content Text binding to the Tag property of ToggleButton. You could also subclass ToggleButton and add a BitmapImage property or use an Attached Property if you don't want to use Tag

<Window.Resources>
<Style x:Key="MenuButtonStyle" TargetType="{x:Type ToggleButton}">
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Grid>
                        <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
                                        <EasingColorKeyFrame KeyTime="0" Value="#FF309BFF"/>
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
                                        <EasingColorKeyFrame KeyTime="0" Value="#FF0962B4"/>
                                    </ColorAnimationUsingKeyFrames>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
                                        <EasingColorKeyFrame KeyTime="0" Value="#FF093664"/>
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked">
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
                                        <EasingColorKeyFrame KeyTime="0" Value="WhiteSmoke"/>
                                    </ColorAnimationUsingKeyFrames>                                            
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
                                        <EasingColorKeyFrame KeyTime="0" Value="#FFE2E3E5"/>
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unchecked"/>
                            <VisualState x:Name="Indeterminate"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <Border x:Name="border" BorderBrush="Transparent" BorderThickness="1" CornerRadius="7,7,0,0">
                        <Border.Background>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FF024592"/>
                                <GradientStop Color="#FF003D8B" Offset="1"/>
                            </LinearGradientBrush>
                        </Border.Background>
                    </Border>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Tag}" Margin="5,5,0,5"/>
                        <ContentPresenter Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Foreground" Value="Blue"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Useable like(using this code in border will help other wise it would expand)

<ToggleButton Style="{StaticResource MenuButtonStyle}"
              Tag="C:\TestImage.png"
              Content="Test ToggleButton" />