响应式菜单按钮

本文关键字：按钮 菜单 响应 | 更新日期: 2023-09-27 18:16:26

我希望有人能帮助我，我对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事件被绑定到事件处理程序，事件处理程序上的断点永远不会被击中。有人有什么想法吗?

响应式菜单按钮

您需要将内容放在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，而在next Button中我们只使用了StrokeThickness。

对于使用style，您可以做以下更改:

<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>
相关文章：