отзывчивый стиль меню в WPF

Question

Я надеюсь, что кто-то может помочь, я довольно новичок в WPF и хочу создать кнопку, которая выглядит как кнопка меню в мобильных приложениях и на чувствительных веб-приложениях, которая представляет собой квадратную кнопку с тремя горизонтальными линий.

Я попытался создать кнопку с холстом и тремя строками, но это работает неправильно.

Может кто-нибудь предложить XAML, который мог бы достичь этого, пожалуйста?

EDIT

Я добавил код для моего приложения от ответа, XAML ниже

<Button x:Name="systemButton" IsTabStop="False" Style="{StaticResource LightWindowButtonStyle}" HorizontalAlignment="Left" VerticalAlignment="Top"> 
    <Button.Content> 
     <Grid Width="31" Height="23" Background="Transparent"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="*" /> 
       <RowDefinition Height="*" /> 
       <RowDefinition Height="*" /> 
      </Grid.RowDefinitions> 
      <Path Data="M8,8 L28,8" Fill="{TemplateBinding Foreground}" Height="4" StrokeThickness="4" Stretch="Fill" Stroke="{TemplateBinding Foreground}" VerticalAlignment="Center" /> 
      <Path Data="M8,8 L28,8" Fill="{TemplateBinding Foreground}" Height="4" StrokeThickness="4" Stretch="Fill" Stroke="{TemplateBinding Foreground}" VerticalAlignment="Center" Grid.Row="1" /> 
      <Path Data="M8,8 L28,8" Fill="{TemplateBinding Foreground}" Height="4" StrokeThickness="4" Stretch="Fill" Stroke="{TemplateBinding Foreground}" VerticalAlignment="Center" Grid.Row="2" /> 
     </Grid> 
    </Button.Content> 
</Button> 

В моем AeroWindow классе я получаю экземпляр кнопки и привязки к событие щелчка, как показано ниже

var systemButton = this.GetTemplateChild("systemButton") as Button; 
if (systemButton != null) 
{ 
    systemButton.Click += this.SystemButtonOnClick; 
} 

Но обработчик события никогда не срабатывает, когда я нажимаю кнопку т. Я проверил и systemButton не null, поэтому событие Click привязано к обработчику событий, точка останова на обработчике событий никогда не попадает. У кого-нибудь есть идеи?

Answer 1

Вам необходимо разместить свой контент в Button, и для этого вы применяете шаблон контента.

<Window.Resources> 


    <DataTemplate x:Key="DataTemplate1"> 
     <Grid Width="51" Height="42"> 
      <Grid.RowDefinitions> 
       <RowDefinition/> 
       <RowDefinition/> 
       <RowDefinition/> 
       <RowDefinition/> 
       <RowDefinition/> 
      </Grid.RowDefinitions> 
      <Path Data="M0,5 L51,5" Fill="#FF2DBE29" Height="3" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center"/> 
      <Path Data="M0,5 L51,5" Fill="#FF2DBE29" Height="3" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="1"/> 
      <Path Data="M0,5 L51,5" Fill="#FF2DBE29" Height="3" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="2"/> 
      <Path Data="M0,5 L51,5" Fill="#FF2DBE29" Height="3" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="3"/> 
      <Path Data="M0,5 L51,5" Fill="#FF2DBE29" Height="3" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="4"/> 
     </Grid> 
    </DataTemplate> 


</Window.Resources> 

<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}"> 
    <Button Content="" HorizontalAlignment="Left" Margin="112,88,0,0" VerticalAlignment="Top" Width="56" Height="48" 
    ContentTemplate="{DynamicResource DataTemplate1}"/> 
    <Button HorizontalAlignment="Right" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Margin="0,88,232,0" VerticalAlignment="Top" Width="67" Height="56"> 

     <Button.Content> 
      <Grid Width="51" Height="42"> 
      <Grid.RowDefinitions> 
       <RowDefinition/> 
       <RowDefinition/> 
       <RowDefinition/> 
       <RowDefinition/> 
       <RowDefinition/> 
      </Grid.RowDefinitions> 
      <Path Data="M0,5 L51,5" Fill="#FF2DBE29" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" StrokeThickness="5"/> 
      <Path Data="M0,5 L51,5" Fill="#FF2DBE29" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="1" StrokeThickness="5"/> 
      <Path Data="M0,5 L51,5" Fill="#FF2DBE29" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="2" StrokeThickness="5"/> 
      <Path Data="M0,5 L51,5" Fill="#FF2DBE29" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="3" StrokeThickness="5"/> 
      <Path Data="M0,5 L51,5" Fill="#FF2DBE29" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="4" StrokeThickness="5"/> 
     </Grid> 
     </Button.Content>   
     </Button> 

Я обновил свой ответ. В DataTemplate мы используем Height, а в следующей кнопке мы используем только StrokeThickness.

И для использования стиля вы можете сделать следующие изменения:

<Window.Resources> 

     <DataTemplate x:Key="DataTemplate1"> 
      <Grid Width="51" Height="42"> 
       <Grid.Resources> 
        <SolidColorBrush x:Key="PathFillBrush" Color="#FF2DBE29"/> 
       </Grid.Resources> 
       <Grid.RowDefinitions> 
        <RowDefinition/> 
        <RowDefinition/> 
        <RowDefinition/> 
        <RowDefinition/> 
        <RowDefinition/> 
       </Grid.RowDefinitions> 
       <Path Data="M0,5 L51,5" Fill="{DynamicResource PathFillBrush}" Height="3" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center"/> 
       <Path Data="M0,5 L51,5" Fill="{DynamicResource PathFillBrush}" Height="3" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="1"/> 
       <Path Data="M0,5 L51,5" Fill="{DynamicResource PathFillBrush}" Height="3" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="2"/> 
       <Path Data="M0,5 L51,5" Fill="{DynamicResource PathFillBrush}" Height="3" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="3"/> 
       <Path Data="M0,5 L51,5" Fill="{DynamicResource PathFillBrush}" Height="3" Stretch="Fill" Stroke="#FF2DC65A" VerticalAlignment="Center" Grid.Row="4"/> 
      </Grid> 
     </DataTemplate>   

     <Style TargetType="Button"> 
      <Setter Property="ContentTemplate" Value="{DynamicResource DataTemplate1}"/> 
     </Style> 

    </Window.Resources>