通用按钮模板

Question

我有以下按钮样式，其中包含十字形，用于TabItem上的关闭按钮

<Button Grid.Column="2" 
        Width="15" 
        Height="15" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Center" 
        DockPanel.Dock="Right" 
        AttachedCommand:CommandBehavior.Event="Click"
        AttachedCommand:CommandBehavior.Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.CloseWorkspaceCommand}">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Focusable" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid Background="{TemplateBinding Background}">
                            <Path x:Name="ButtonPath"
                                  Margin="3"
                                  HorizontalAlignment="Center"
                                  VerticalAlignment="Center"
                                  Data="M0,0 L1,1 M0,1 L1,0" 
                                  SnapsToDevicePixels="True"
                                  Stretch="Uniform"
                                  Stroke="{DynamicResource CloseButtonStroke}"
                                  StrokeEndLineCap="Flat"
                                  StrokeStartLineCap="Flat"
                                  StrokeThickness="2"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}}"
                                      Value="false" />
                                    <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}}"
                                      Value="false" />
                                </MultiDataTrigger.Conditions>
                                <MultiDataTrigger.Setters>
                                    <Setter Property="Visibility" Value="Hidden" />
                                </MultiDataTrigger.Setters>
                            </MultiDataTrigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Visibility" Value="Hidden" />
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background"
                          Value="{DynamicResource CloseButtonBackgroundHighlighted}" />
                                <Setter TargetName="ButtonPath" 
                                          Property="Stroke"
                          Value="{DynamicResource CloseButtonStrokeHighlighted}" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background"
                          Value="{DynamicResource CloseButtonBackgroundPressed}" />
                                <Setter TargetName="ButtonPath" 
                                          Property="Stroke"
                          Value="{DynamicResource CloseButtonStroke}" />
                                <Setter TargetName="ButtonPath" 
                                          Property="Margin"
                          Value="2.5,2.5,1.5,1.5" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Button.Style>
</Button>

这会产生

我想添加一个CheckButton样式，以显示关闭按钮旁边的引脚，如VS2012。我可以做到这一点没问题，但我想将CheckBox放在上面的同一个按钮模板中，这样当鼠标悬停在该区域时我会突出显示。问题是上面的按钮包含绘制'X'的Path。

我是否可以将按钮样式设置为通用，以便我可以包含“X”Path或CheckBox，而无需复制所有触发器内容？

感谢您的时间。

Answer 1

我会通过创建我的按钮类（如下面的ToolBarButton）并具有依赖项属性ButtonType来实现此目的。我将在ToolBarButton上设置ButtonType。

    public enum ButtonType
    {
        Close =0,
        Pin
    }
    public class ToolBarButton : Button
    {
        public ButtonType ButtonType
        {
            get { return (ButtonType)this.GetValue(ButtonTypeProperty); }
            set { this.SetValue(ButtonTypeProperty, value); }
        }
        public static readonly DependencyProperty ButtonTypeProperty = DependencyProperty.Register(
          "ButtonType", typeof(ButtonType), typeof(ToolBarButton), new PropertyMetadata(ButtonType.Close));
    }

xaml中的

：

<local:ToolBarButton ButtonType="Pin"/>

然后我将在样式中添加触发器以检查buttontype并应用包含复选框的controltemplate

               <Style.Triggers>
                    <Trigger Property="ButtonType" Value="Pin">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate>
                                    <CheckBox/>
                                </ControlTemplate>

                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>