Question

I've created quite a complex button, but I've now realized that it should've been a Toggle Button (due to needing the checked state). Is it possible to simply change something in the code to make this happen?

I'd rather not have to start from scratch on a new toggle button

    <ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Style x:Key="HolonBaseButton" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="383*"/>
                        <ColumnDefinition Width="5"/>
                    </Grid.ColumnDefinitions>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="Background">
                                        <EasingColorKeyFrame KeyTime="0" Value="{StaticResource MouseOver}"/>
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed"/>
                            <VisualState x:Name="Disabled"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Path x:Name="Background" Data="M0.5,0.5 L383.5,0.5 399.5,16.499999 399.5,59.5 0.5,59.5 z" Stretch="Fill" Grid.ColumnSpan="1">
                        <Path.Fill>
                            <SolidColorBrush Color="{DynamicResource HolonBaseBackground}"/>
                        </Path.Fill>
                        <Path.Stroke>
                            <SolidColorBrush Color="{DynamicResource HolonBaseStroke}"/>
                        </Path.Stroke>
                    </Path>
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Hidden" Margin="182.188,22.02,165.188,22.02"/>
                    <ToggleButton x:Name="btnMark" Content="ToggleButton" HorizontalAlignment="Right" Margin="0" Style="{DynamicResource MarkToggleButton}" VerticalAlignment="Top" Grid.Column="0"/>
                    <TextBlock x:Name="TimeCreated" HorizontalAlignment="Right" Height="Auto" Margin="0,3.7,20.794,0" TextWrapping="Wrap" Text="9 mins ago" VerticalAlignment="Top" Width="Auto" FontFamily="{DynamicResource SystemText}" FontSize="10" TextAlignment="Right">
                        <TextBlock.Foreground>
                            <SolidColorBrush Color="{DynamicResource DisabledControlsText}"/>
                        </TextBlock.Foreground>
                    </TextBlock>
                    <Rectangle x:Name="Selector" Grid.Column="1" HorizontalAlignment="Stretch" Height="Auto" Margin="0" VerticalAlignment="Stretch" Stroke="{x:Null}" Visibility="Hidden">
                        <Rectangle.Fill>
                            <SolidColorBrush Color="{DynamicResource Selector}"/>
                        </Rectangle.Fill>
                    </Rectangle>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsFocused" Value="True"/>
                    <Trigger Property="IsDefaulted" Value="True"/>
                    <Trigger Property="IsMouseOver" Value="True"/>
                    <Trigger Property="IsPressed" Value="True"/>
                    <Trigger Property="IsEnabled" Value="False"/>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="MarkToggleButton" TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Grid Width="17" Height="17">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="background">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="background">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="On">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unchecked"/>
                            <VisualState x:Name="Indeterminate"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Path x:Name="background" Data="M0.5,0.5 L38.308,0.5 38.308,38.308 z" Stretch="Fill" Opacity="0" Width="17" Height="17">
                        <Path.Fill>
                            <SolidColorBrush Color="{DynamicResource MarkMouseover}"/>
                        </Path.Fill>
                        <Path.Stroke>
                            <SolidColorBrush Color="#FF9C5E00"/>
                        </Path.Stroke>
                    </Path>
                    <Path x:Name="On" Data="M0.5,0.5 L38.308,0.5 38.308,38.308 z" Stretch="Fill" Opacity="0" Visibility="Visible" Width="17" Height="17">
                        <Path.Stroke>
                            <SolidColorBrush Color="{DynamicResource MarkMouseover}"/>
                        </Path.Stroke>
                        <Path.Fill>
                            <SolidColorBrush Color="{DynamicResource Mark}"/>
                        </Path.Fill>
                    </Path>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Width" Value="17"/>
    <Setter Property="Height" Value="17"/>
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="MinWidth" Value="17"/>
    <Setter Property="MinHeight" Value="17"/>
</Style>
<!-- Resource dictionary entries should be defined here. -->

Was it helpful?

Solution

You don't have to start from scratch especially with it being a Button -> ToggleButton where they are almost identical in base functionality.

So by just doing a find and replace Button to ToggleButton you'd be almost done. As you mentioned ToggleButton does not like:

<Trigger Property="IsDefaulted" Value="True"/>

so you need to switch that to

<Trigger Property="Button.IsDefaulted" Value="True"/>

however if you look at that xaml, it's an empty Trigger definition which is pointless. So in your Style you could just get rid of the following bit:

<ControlTemplate.Triggers>
  <Trigger Property="IsFocused" Value="True"/>
  <Trigger Property="IsDefaulted" Value="True"/>
  <Trigger Property="IsMouseOver" Value="True"/>
  <Trigger Property="IsPressed" Value="True"/>
  <Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>

Am not going to start explaining what makes this an empty Trigger, As I mentioned you should pick up a book on "Basic WPF and Blend" to get to grip with how to do stuff in blend and what blend actually does for you in the background.

As for TypeDefinition:

It just means what's the type of control, that Style / ControlTemplate is intended for.

In the following lines:

<Style x:Key="HolonBaseButton" TargetType="{x:Type Button}">

<ControlTemplate TargetType="{x:Type Button}">

the TargetType="{x:Type Button}" says that the Style in first line and ControlTemplate in second are intended to be used for a Button so if you try to use it for a ToggleButton, you'd get an error. It's pretty verbose, so to switch it you just switch Button with ToggleBUtton which the find and replace would do fine.

So your converted Style:

<Style x:Key="HolonBaseButton" TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="383*"/>
                        <ColumnDefinition Width="5"/>
                    </Grid.ColumnDefinitions>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="Background">
                                        <EasingColorKeyFrame KeyTime="0" Value="{StaticResource MouseOver}"/>
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed"/>
                            <VisualState x:Name="Disabled"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Path x:Name="Background" Data="M0.5,0.5 L383.5,0.5 399.5,16.499999 399.5,59.5 0.5,59.5 z" Stretch="Fill" Grid.ColumnSpan="1">
                        <Path.Fill>
                            <SolidColorBrush Color="{DynamicResource HolonBaseBackground}"/>
                        </Path.Fill>
                        <Path.Stroke>
                            <SolidColorBrush Color="{DynamicResource HolonBaseStroke}"/>
                        </Path.Stroke>
                    </Path>
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Hidden" Margin="182.188,22.02,165.188,22.02"/>
                    <ToggleButton x:Name="btnMark" Content="ToggleButton" HorizontalAlignment="Right" Margin="0" Style="{DynamicResource MarkToggleButton}" VerticalAlignment="Top" Grid.Column="0"/>
                    <TextBlock x:Name="TimeCreated" HorizontalAlignment="Right" Height="Auto" Margin="0,3.7,20.794,0" TextWrapping="Wrap" Text="9 mins ago" VerticalAlignment="Top" Width="Auto" FontFamily="{DynamicResource SystemText}" FontSize="10" TextAlignment="Right">
                        <TextBlock.Foreground>
                            <SolidColorBrush Color="{DynamicResource DisabledControlsText}"/>
                        </TextBlock.Foreground>
                    </TextBlock>
                    <Rectangle x:Name="Selector" Grid.Column="1" HorizontalAlignment="Stretch" Height="Auto" Margin="0" VerticalAlignment="Stretch" Stroke="{x:Null}" Visibility="Hidden">
                        <Rectangle.Fill>
                            <SolidColorBrush Color="{DynamicResource Selector}"/>
                        </Rectangle.Fill>
                    </Rectangle>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top