0

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>

0

1 Answer 1

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" />
3
  • Edited but it donot work combined the part where you said that same as your code.Second thing that the image attached expands on whole button is there any way that we can let it star at left?Thanks Feb 20, 2011 at 22:18
  • @Afnan: Ok, was trying to figure out if I missed something in my answer. But it's working for you now? Feb 20, 2011 at 22:23
  • @Afnan: I see the problem, will figure it out and update my answer Feb 20, 2011 at 22:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.