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

您需要将内容放在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>

WPF中的响应式菜单按钮

1 个答案: