具有多边形形状的 XAML UWP 按钮

Posted 2023-02-22

【中文标题】具有多边形形状的 XAML UWP 按钮

【英文标题】：XAML UWP Button with a polygonal shape

【发布时间】：2017-03-19 20:51:46

【问题描述】：

如何使 XAML 按钮看起来像下面的（形状）？

我的 XAML：

<Button Content="Helpful" Foreground="White" Background="Blue"/>

【问题讨论】：

编辑按钮样式模板并将顶部的形状添加到模板中作为Path 或创建整个形状，如果您想努力尝试，就像这样当您遇到更具体的问题时，这个问题目前非常广泛； <Path Data="M0,0 L45.2778,-0.124986 L50.2778,-6.67499 L54.7222,-0.124986 L100,0 L100,30 L0,30 z" Height="25" Width="100" Fill="#3E82C4" Stretch="Fill" Margin="0,-5,0,0"/>

谢谢@Chris！

【参考方案1】：

我使用Path而不是Polygon，样式如下：

    <Page.Resources>
    <Style x:Key="ButtonStyle1" TargetType="Button">
        <Setter Property="Background" Value="ThemeResource ButtonBackground" />
        <Setter Property="Foreground" Value="ThemeResource ButtonForeground" />
        <Setter Property="BorderBrush" Value="ThemeResource ButtonBorderBrush" />
        <Setter Property="BorderThickness" Value="ThemeResource ButtonBorderThemeThickness" />
        <Setter Property="Padding" Value="8,4,8,4" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="FontFamily" Value="ThemeResource ContentControlThemeFontFamily" />
        <Setter Property="FontWeight" Value="Normal" />
        <Setter Property="FontSize" Value="ThemeResource ControlContentThemeFontSize" />
        <Setter Property="UseSystemFocusVisuals" Value="True" />
        <Setter Property="FocusVisualMargin" Value="-3" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="RootGrid" Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Path" Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource ButtonBackgroundPointerOver" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource ButtonBorderBrushPointerOver" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource ButtonForegroundPointerOver" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Path" Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource ButtonBackgroundPressed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource ButtonBorderBrushPressed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource ButtonForegroundPressed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Path" Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource ButtonBackgroundDisabled" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource ButtonBorderBrushDisabled" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource ButtonForegroundDisabled" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Path
                            x:Name="Path"
                            Width="TemplateBinding Width"
                            Height="TemplateBinding Height"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Data="M0,0L17,0 20,-3 23,0 40,0 40,40 0,40z"
                            Fill="TemplateBinding Background"
                            Stretch="UniformToFill" />
                        <ContentPresenter
                            x:Name="ContentPresenter"
                            Padding="TemplateBinding Padding"
                            HorizontalContentAlignment="TemplateBinding HorizontalContentAlignment"
                            VerticalContentAlignment="TemplateBinding VerticalContentAlignment"
                            AutomationProperties.AccessibilityView="Raw"
                            BorderBrush="TemplateBinding BorderBrush"
                            BorderThickness="TemplateBinding BorderThickness"
                            Content="TemplateBinding Content"
                            ContentTemplate="TemplateBinding ContentTemplate"
                            ContentTransitions="TemplateBinding ContentTransitions" />

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<Grid Background="ThemeResource ApplicationPageBackgroundThemeBrush">
    <Button
        Width="120"
        Height="48"
        Background="Blue"
        BorderThickness="0"
        Content="OK"
        Foreground="White"
        Style="StaticResource ButtonStyle1" />
</Grid>