Chrome-like close button - how to style the cross correctly?

Refresh

February 2019

Views

3.1k time

1

I got these styles:

<LinearGradientBrush x:Key="ClickGradient">
    <GradientStop Color="#FF5C2014"/>
    <GradientStop Color="#FFB0452C"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="HoverGradient">
    <GradientStop Color="#FF757474"/>
    <GradientStop Color="#FF918F8F"/>
</LinearGradientBrush>
<ControlTemplate x:Key="CloseButton" TargetType="{x:Type Button}">
    <Grid x:Name="MainGrid">
        <Rectangle
            x:Name="MainRectangle"
            Fill="#00000000"
            RadiusX="5"
            RadiusY="5"/>
            <ContentPresenter
                x:Name="Presenter"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                TextBlock.Foreground="#BB225588"/>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="MainRectangle" Property="Fill" Value="{StaticResource HoverGradient}"/>
            <Setter TargetName="MainRectangle" Property="Stroke" Value="Transparent"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter TargetName="MainRectangle" Property="Fill" Value="{StaticResource ClickGradient}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

and this code:

<Button Width="15" Height="15" Grid.Column="1" Template="{StaticResource CloseButton}" x:Name="ClsBtn">
  <Button.Content>
     <Path x:Name="Cross" Data="M0,0 L1,1 M0,1 L1,0" Stretch="Fill" Stroke="Black" StrokeThickness="2" Width="8" Height="8" />
  </Button.Content>
</Button>

This creates a pretty neat close button. Not exactly like Chrome's, but somehow similar. What I don't get is: How can I let the Stroke of the Path react to the hovering and click-triggers of the button?

The cross should be white if the button is clicked or the mouse is hovering over the button. It would be great if this could be accomplished in a style...

//Edit:

To clarify things:

comparison of tabs

As you can see, the "X" changes it color from gray in a normal or inactive state to white in a hovered or click state (read: The mouse is over the button, not over the "X"). I'd like to be able to do the same with my path-element.

1 answers

3

You can add the path to the content presenter and then add your setters as needed. The Xaml below changes the cross to white on the hover and click events pretty much in line with your images...

     <LinearGradientBrush x:Key="ClickGradient">
            <GradientStop Color="#FF5C2014"/>
            <GradientStop Color="#FFB0452C"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="HoverGradient">
            <GradientStop Color="#FF757474"/>
            <GradientStop Color="#FF918F8F"/>
        </LinearGradientBrush>
        <ControlTemplate x:Key="CloseButton" TargetType="{x:Type Button}">
            <Grid x:Name="MainGrid">
                <Rectangle 
        x:Name="MainRectangle" 
        Fill="#00000000" 
        RadiusX="5" 
        RadiusY="5"/>
                <ContentPresenter 
            x:Name="Presenter" 
            HorizontalAlignment="Center" 
            VerticalAlignment="Center" 
            TextBlock.Foreground="#BB225588"/>
                <Path x:Name="Cross" Data="M0,0 L1,1 M0,1 L1,0" Stretch="Fill" 
                          Stroke="Black" StrokeThickness="2" Width="8" Height="8" />
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="MainRectangle" Property="Fill" Value="{StaticResource HoverGradient}"/>
                    <Setter TargetName="MainRectangle" Property="Stroke" Value="Transparent"/>
                    <Setter TargetName="Cross" Property="Stroke" Value="White" />
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="MainRectangle" Property="Fill" Value="{StaticResource ClickGradient}"/>
                    <Setter TargetName="Cross" Property="Stroke" Value="White" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>