Generic Button Template

Question

I have the following button style that has a cross in it and is used for a close button on a 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>

This produces

I want to add a CheckButton styled to show a pin next to the close button like VS2012. I can do this no problem, but I want to place the CheckBox inside the same button template above so I get highlighting when the mouse is over the area. The problem is the button above contains the Path that draws the 'X'.

Is there a was I can make the button style above generic so I can include either the 'X' Path or the CheckBox, without replicating all the trigger stuff?

Thanks for your time.

Answer 1

I would approach this by creating my button class like ToolBarButton below and have a dependency property ButtonType. I will set ButtonType on the ToolBarButton.

    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));
    }

in xaml:

<local:ToolBarButton ButtonType="Pin"/>

Then I will add the trigger in style to check for buttontype and apply the controltemplate containing checkbox

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

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