WPF中的響應式樣式菜單按鈕

Question

我希望有人可以提供幫助，我對WPF相當陌生，並且希望創建一個看起來像移動應用程序中的菜單按鈕和響應式Web應用程序的按鈕，這是一個三橫線。

我已經嘗試創建一個畫布和三條線的按鈕，但這不能正常工作。

任何人都可以提出可以實現這一目的的XAML嗎？

編輯

我從答案添加的代碼在我的應用程序，在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類我正在按鈕的實例，並結合click事件如下

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

但是當我點擊，但該事件處理程序永遠不會被解僱噸。我檢查過並且systemButton不是null因此Click事件被綁定到事件處理程序，事件處理程序的斷點永遠不會被打通。有人有主意嗎？

Answer 1

您需要將您的內容放入按鈕中，併爲此應用內容模板。

<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，而在下一個Button中，我們只使用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>