Хромоподобная кнопка закрытия - как правильно оформить крест?

Question

Я получил эти стили:

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

и этот код:

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

Это создает довольно аккуратную кнопку закрытия.Не совсем как у Chrome, но как-то похоже.Чего я не понимаю: как я могу позволить «Штриху пути» реагировать на зависание и триггеры нажатия кнопки?

Крест должен быть белым, если кнопка нажата или мышь зависланад кнопкой.Было бы здорово, если бы это можно было сделать в стиле ...

// Редактировать:

Чтобы прояснить ситуацию:

Как видите, «X» меняет цвет с серого в нормальном или неактивном состоянии на белый в состоянии зависания или щелчка (читай: мышь находится над кнопкой, а не над «X»).Я бы хотел сделать то же самое с моим элементом пути.

Answer 1

Вы можете добавить путь к предъявителю контента, а затем добавить ваши установщики по мере необходимости. Приведенный ниже Xaml меняет крест на белый при наведении курсора и на события клика в значительной степени в соответствии с вашими изображениями ...

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