如何在Expression Blend中将控件类型从按钮更改为togglebutton?

时间:2013-07-12 17:52:13

标签: wpf user-interface wpf-controls expression-blend blend

我创建了一个非常复杂的按钮,但我现在意识到它应该是一个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. -->

1 个答案:

答案 0 :(得分:1)

您不必从头开始,尤其是Button - &gt; ToggleButton它们的基本功能基本相同。

因此,只需执行查找并将Button替换为ToggleButton即可完成。正如您所提到的ToggleButton不喜欢:

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

所以你需要将其切换到

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

然而,如果你看看那个xaml,它是一个空的Trigger定义,这是没有意义的。所以在你的风格中你可以摆脱以下几点:

<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和混合”的书来掌握如何在混合物和混合物中做些什么实际上在后台为你做了。

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