wpf - How do I change the control type from a button to a togglebutton in Expression Blend?

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

Answer 1

您不必从头开始，尤其是当它是Button->ToggleButton时，它们的基本功能几乎相同。

因此，只需对您进行查找和替换Button即可。ToggleButton正如你提到ToggleButton的不喜欢：

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

所以你需要把它切换到

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

但是，如果您查看该 xaml，它是一个Trigger毫无意义的空定义。因此，在您的 Style 中，您可以摆脱以下内容：

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

我不会开始解释是什么让这变得空虚Trigger，正如我提到的，你应该拿起一本关于“基本 WPF 和 Blend”的书来掌握如何在 Blend 中做事以及 Blend 在后台实际为你做了什么。

至于TypeDefinition：

它只是意味着Style/ControlTemplate的目的是什么类型的控件。

在以下几行中：

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

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

theTargetType="{x:Type Button}"表示第一行和ControlTemplate第二行中的 Style 旨在用于 aButton所以如果你尝试将它用于 a ToggleButton，你会得到一个错误。它非常冗长，所以要切换它，您只需切换查找和Button替换ToggleBUtton就可以了。

所以你的转换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>