Question

我想将按钮剪切为自定义形状，我可以使用以下XAML。剪辑区域没有边框。如果我想要一个厚度为2的红色边框怎么办？要设置的属性是什么？

<Button Content="Button" Height="79" Margin="22,10,17,10" Clip="M50.500008,20.499998 L70.090286,42.699997 L56.81945,57.5 L131.38889,56.574997 L141.5,39.462498 L122.54167,23.737497 z"/>

Answer 1

您可以编辑按钮样式的副本，并在按钮的新样式内进行剪裁和边框，这样您甚至可以在用户与其交互时自定义按钮的不同状态。

这样的事情：

        <UserControl
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
            x:Class="ASD_Answer001.MainPage" d:DesignWidth="513" d:DesignHeight="298">
            <UserControl.Resources>
                <Style x:Key="ArrowButton" TargetType="Button">
                    <Setter Property="Background" Value="#FF1F3B53"/>
                    <Setter Property="Foreground" Value="#FF000000"/>
                    <Setter Property="Padding" Value="3"/>
                    <Setter Property="BorderThickness" Value="1"/>
                    <Setter Property="BorderBrush">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FFA3AEB9" Offset="0"/>
                                <GradientStop Color="#FF8399A9" Offset="0.375"/>
                                <GradientStop Color="#FF718597" Offset="0.375"/>
                                <GradientStop Color="#FF617584" Offset="1"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                                <Grid>
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualStateGroup.Transitions>
                                                <VisualTransition GeneratedDuration="0:0:0.2">
                                                    <VisualTransition.GeneratedEasingFunction>
                                                        <CircleEase EasingMode="EaseOut"/>
                                                    </VisualTransition.GeneratedEasingFunction>
                                                </VisualTransition>
                                            </VisualStateGroup.Transitions>
                                            <VisualState x:Name="Normal"/>
                                            <VisualState x:Name="MouseOver">
                                                <Storyboard>
                                                    <ColorAnimation Duration="0" To="#FF6DB7DA" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="path" d:IsOptimized="True"/>
                                                    <ColorAnimation Duration="0" To="#F99FD7EF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="path" d:IsOptimized="True"/>
                                                    <ColorAnimation Duration="0" To="#E5A5C1CE" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="path" d:IsOptimized="True"/>
                                                    <ColorAnimation Duration="0" To="#C6FFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="path" d:IsOptimized="True"/>
                                                    <DoubleAnimation Duration="0" To="0.322" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="path" d:IsOptimized="True"/>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Pressed">
                                                <Storyboard>
                                                    <ColorAnimation Duration="0" To="#FFF9FEB0" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="path" d:IsOptimized="True"/>
                                                    <ColorAnimation Duration="0" To="#F9FEFFEB" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="path" d:IsOptimized="True"/>
                                                    <ColorAnimation Duration="0" To="#E5D9E16C" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="path" d:IsOptimized="True"/>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Disabled">
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
                                                    <ColorAnimation Duration="0" To="#FFFEFEFE" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="path" d:IsOptimized="True"/>
                                                    <ColorAnimation Duration="0" To="#F9FFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="path" d:IsOptimized="True"/>
                                                    <ColorAnimation Duration="0" To="#E5E1E1E1" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="path" d:IsOptimized="True"/>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                        <VisualStateGroup x:Name="FocusStates">
                                            <VisualStateGroup.Transitions>
                                                <VisualTransition GeneratedDuration="0:0:0.2">
                                                    <VisualTransition.GeneratedEasingFunction>
                                                        <CircleEase EasingMode="EaseOut"/>
                                                    </VisualTransition.GeneratedEasingFunction>
                                                </VisualTransition>
                                            </VisualStateGroup.Transitions>
                                            <VisualState x:Name="Focused">
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
                                                    <DoubleAnimation Duration="0" To="4" Storyboard.TargetProperty="(Shape.StrokeThickness)" Storyboard.TargetName="path" d:IsOptimized="True"/>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Unfocused"/>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Path x:Name="path" Data="M30,26.5 L358,24.5 L589.64996,219.49998 L394,404.5 L30,414.5 L178.28333,226.3421 z" Margin="8,8,11,8" Stretch="Fill" UseLayoutRounding="False" Stroke="Black" StrokeThickness="2" d:LayoutOverrides="VerticalAlignment">
                                        <Path.Fill>
                                            <LinearGradientBrush EndPoint="0.699999988079071,1" StartPoint="0.699999988079071,0">
                                                <GradientStop Color="#FFB0E5FE" Offset="0"/>
                                                <GradientStop Color="#F9EBF9FF" Offset="0.375"/>
                                                <GradientStop Color="#E56CBCE1" Offset="0.625"/>
                                                <GradientStop Color="#C6FFFFFF" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Path.Fill>
                                    </Path>
                                    <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                    <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="3" RadiusX="3"/>
                                    <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FF6DBDD1" StrokeThickness="1"/>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </UserControl.Resources>

            <Grid x:Name="LayoutRoot" Background="White">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.318*"/>
                    <ColumnDefinition Width="0.329*"/>
                    <ColumnDefinition Width="0.353*"/>
                </Grid.ColumnDefinitions>
                <Button Style="{StaticResource ArrowButton}" Height="75" Content="Button 1" Padding="15,1,3,3" VerticalAlignment="Top" Width="138"/>
                <Button Style="{StaticResource ArrowButton}" Height="75" Content="Button 2" Padding="15,1,3,3" VerticalAlignment="Top" Grid.Column="1" Width="138"/>
                <Button Style="{StaticResource ArrowButton}" Height="75" Content="Button 3" Padding="15,1,3,3" VerticalAlignment="Top" Grid.Column="2" Width="138"/>
            </Grid>
        </UserControl>

如何为Clip设置笔划？

1 个答案: