如何在 Expression Blend 中将控件类型从按钮更改为切换按钮？

Posted

技术标签:

【中文标题】如何在 Expression Blend 中将控件类型从按钮更改为切换按钮？【英文标题】：How do I change the control type from a button to a togglebutton in Expression Blend? 【发布时间】：2013-07-12 17:52:13 【问题描述】：

我创建了一个相当复杂的按钮，但我现在意识到它应该是一个切换按钮（由于需要选中状态）。是否可以简单地更改代码中的某些内容来实现这一点？

我宁愿不必在新的切换按钮上从头开始

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

【问题讨论】：

在 xaml 中搜索 Button 并替换为 ToggleButton？这将包括 xaml Style 定义中的查找替换，包括 Style 的 TypeDefinitions 以及可能的 ControlTemplate (TargetType="x:Type Button") 和使用区域 (&lt;Button&gt;)。 @viv hi viv，谢谢，我做到了，但我现在遇到了一个错误，突出显示了以下行： 那是哪一行？只需将您的代码发布到Button 会更快 抱歉，按回车键。谢谢，我这样做了，但是我现在遇到了一个错误，突出显示了以下行： 我删除了该行，看起来还可以。但这会有任何后果 【参考方案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">

TargetType="x:Type Button" 表示第一行中的样式和第二行中的ControlTemplate 旨在用于Button，因此如果您尝试将其用于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>

【讨论】：

我在上面复制并粘贴了您的代码，但发生的事情是按钮中有一个切换按钮，并且已更改为某种默认外观。我应该说，您可能没有看到还有另一个切换按钮。但无论如何，我只是做了查找和替换。我也将触发器保留在那里，但改变了你所说的，以防我将来需要它们并且它给了我错误。所以再次感谢 viv，它有效，你为我省去了很多悲伤 嗨 viv，你介意回答我关于重叠显示的新问题吗？我想不通

以上是关于如何在 Expression Blend 中将控件类型从按钮更改为切换按钮？的主要内容，如果未能解决你的问题，请参考以下文章

Expression Blend学习5控件

Expression Blend创建自定义按钮

Expression Blend学习四控件

Expression Blend实例中文教程 - 项目控件和用户交互控件快速入门

Expression Blend 2 中 Silverlight 控件的设计时渲染

Expression Blend实例中文教程 - 布局控件快速入门Grid