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中，我们使用高度；在下一个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>