Why does my button work only when I click on either the text inside or the picture?

<ControlTemplate TargetType="{x:Type Button}" x:Key="FlatButton"> ........ <Button Template="{StaticResource FlatButton}" Margin="0,0,0,448" BorderThickness="1" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}"> <StackPanel Orientation="Horizontal" Margin="0"> <Image Source="icon/add-new-document.png" Width="30" Margin="20,0,0,0" /> <TextBlock Text="Создать новый документ" Foreground="White" VerticalAlignment="Center" Margin="16,0,0,0" FontSize="14" FontWeight="Bold"/> <StackPanel.Style> <Style TargetType="StackPanel"> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="#FF002354" /> </Trigger> </Style.Triggers> </Style> </StackPanel.Style> </StackPanel> </Button>

And yet, is it possible to stuff all this in style, so that for each button you don’t write the same thing?

UPD 1

No way: (does not want to be installed ...

 <ControlTemplate TargetType="{x:Type Button}" x:Key="FlatButton"> <Setter Property="Background" Value="Transparent"/> <ContentPresenter/> </ControlTemplate>

UPD 2

 <Button Template="{StaticResource FlatButton}" Margin="0,0,0,448" BorderThickness="1"> <StackPanel Orientation="Horizontal" Margin="0" Background="Transparent"> <Image Source="icon/add-new-document.png" Width="30" Margin="20,0,0,0" /> <TextBlock Text="Создать новый документ" Foreground="White" VerticalAlignment="Center" Margin="16,0,0,0" FontSize="14" FontWeight="Bold"/> <StackPanel.Style> <Style TargetType="StackPanel"> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="#FF002354" /> </Trigger> </Style.Triggers> </Style> </StackPanel.Style> </StackPanel> </Button>

enter image description here

enter image description here

  • Try StackPanel to Background="Transparent" . - VladD
  • And Template it is quite possible to push in style. - VladD
  • @VladD if I set the Background, the trigger will not work: ( - alex-rudenkiy
  • Okay, got it. Then set the background in the same style: <Setter Property="Background" Value="Transparent"/> . The trigger is triggered, just the background directly installed is stronger than the background from the style. - VladD
  • @VladD vsmysle? The background should be with color # FF002354 - alex-rudenkiy

1 answer 1

In short, what I wanted and did, was not without crutches. Here is the working code:

  <Button Template="{StaticResource FlatButton}" BorderThickness="1" Click="Button_Click_1" Height="61" VerticalAlignment="Top" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" > <Grid> <TextBlock Text="Создать документ" Foreground="White" VerticalAlignment="Center" Margin="0,22,25,23" FontSize="14" FontWeight="Bold" HorizontalAlignment="Right"/> <Image Source="icon/add-new-document.png" Width="30" Margin="24,15,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" /> <Rectangle Fill="#00000000" HorizontalAlignment="Left" Height="61" VerticalAlignment="Top" Width="196"/> <Grid.Style> <Style TargetType="Grid"> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="#FF23FF" /> </Trigger> </Style.Triggers> </Style> </Grid.Style> </Grid> </Button>