如何设置剪辑的笔划？

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>