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 类中，我正在获取按钮的实例并绑定到单击事件，如下所示

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，而在下一个 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>