There is a “standard” style for close / minimize / maximize buttons:

<Style TargetType="{x:Type Button}" x:Key="WindowControlButton"> <Setter Property="Foreground" Value="{StaticResource ForegroundGreyDarkBrush}" /> <Setter Property="Margin" Value="8 0" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="Red" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>

Also I tried to set the trigger not through the template:

  <Style TargetType="{x:Type Button}" x:Key="WindowControlButton"> <Setter Property="WindowChrome.IsHitTestVisibleInChrome" Value="True" /> <Setter Property="Foreground" Value="{StaticResource ForegroundGreyDarkBrush}" /> <Setter Property="Margin" Value="8 0" /> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="Red" /> </Trigger> </Style.Triggers> </Style>

And there is a separate style for the "minimize" button, which is inherited from the aforementioned "standard" style, the content for which is set using the Path:

  <Style TargetType="{x:Type Button}" x:Key="WindowMinimizeButton" BasedOn="{StaticResource WindowControlButton}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Grid MaxHeight="9" MaxWidth="9"> <Path RenderOptions.EdgeMode="Aliased" Stroke="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type Button}}}" StrokeThickness="1" Stretch="None" Data="M0,8 H8 M0,7 H8 M0,6 H8" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>

Question: why the trigger does not work when you hover on the button? The background should change to red, as I understand it, this is somehow related to the Path, since if the text of the button itself is set via Content, then everything works, thanks)

  • Well, you have redefined the template, there are no triggers in the new template, what for? - VladD
  • Initially, the trigger was not set via the template, but it still did not work. <Style.Triggers> <Trigger Property = "IsMouseOver" Value = "True"> <Setter Property = "Background" Value = "Red" /> </ Trigger > </Style.Triggers> - SWR
  • One more bug: you have redefined the template, but do not use the value of the Background parameter. It is clear that after this, changing the Background does not change the display, because it is completely determined by the template. - VladD
  • Well, I initially set the trigger with <Style.Triggers>, and still did not work, in theory, this should be inherited into a new style - SWR
  • Did you specify the inheritance of styles? If not, it will not be inherited. - VladD

1 answer 1

Carried Path to the button itself:

 <Button Style="{StaticResource WindowControlButton}"> <Grid MaxHeight="9" MaxWidth="9"> <Path RenderOptions.EdgeMode="Aliased" Stroke="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type Button}}}" StrokeThickness="1" Stretch="None" Data="M0,8 H8 M0,7 H8 M0,6 H8" /> </Grid> </Button>

WindowControlButton style itself:

 <Style TargetType="{x:Type Button}" x:Key="WindowControlButton"> <Setter Property="WindowChrome.IsHitTestVisibleInChrome" Value="True" /> <Setter Property="Foreground" Value="{StaticResource ForegroundGreyDarkBrush}" /> <Setter Property="Background" Value="Transparent" /> <Setter Property="Padding" Value="12 0" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}"> <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="{StaticResource BackgroundGreyLightBrush}" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>