如何使在默认样式圆边按钮样式基地

Question

美好的一天，

我想知道我怎样才能使一个按钮，看起来像这样使用默认的样式从这篇文章：https://msdn.microsoft.com/en-us/library/windows/apps/mt299109.aspx

我发现，内容演示后添加此行的文章，但它非常圆润：

<Ellipse Name="BorderCircle" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2"/> 

谢谢，
NicoTing

Answer 1

这会给你按钮的圆边，你可以使用UWPCommunityToolkit进行阴影。

没有UWPCommunityToolkit

<Button Style="{StaticResource DefaultButtonStyle}" Content="Sign In" Background="#0086f1" Foreground="White" Height="35" Width="150"/> 

风格

<Style TargetType="Button" x:Name="DefaultButtonStyle" x:Key="DefaultButtonStyle"> 
    <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" /> 
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/> 
    <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" /> 
    <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="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <!--Changes--> 
       <Grid x:Name="RootGrid" Background="{TemplateBinding Background}" BorderBrush="#FFF9F7F7" CornerRadius="5"> 
        <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="ContentPresenter" 
               Storyboard.TargetProperty="BorderBrush"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <Storyboard>          
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
               Storyboard.TargetProperty="Background"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="BorderBrush"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
               Storyboard.TargetProperty="Background"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="BorderBrush"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 

        <!--Changes--> 
        <Grid x:Name="myGrid" VerticalAlignment="Stretch" 
         HorizontalAlignment="Stretch" CornerRadius="5"> 
         <ContentPresenter x:Name="ContentPresenter" 
             AutomationProperties.AccessibilityView="Raw" 
             BorderBrush="{TemplateBinding BorderBrush}" 
             BorderThickness="{TemplateBinding BorderThickness}" 
             ContentTemplate="{TemplateBinding ContentTemplate}" 
             ContentTransitions="{TemplateBinding ContentTransitions}" 
             Content="{TemplateBinding Content}" 
             HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
             Padding="{TemplateBinding Padding}" 
             VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
             CornerRadius="5" /> 
        </Grid> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

结果

随着UWPCommunityToolkit

的Xaml参考

xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls" 

XAML

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> 
    <controls:DropShadowPanel BlurRadius="8" 
           ShadowOpacity="0.7" 
           OffsetX="2" 
           OffsetY="2" 
           Color="Black" 
           VerticalAlignment="Center" 
           HorizontalAlignment="Center"> 
     <Button Style="{StaticResource DefaultButtonStyle}" Background="#0086f1" 
       Foreground="White" Content="Sign In" Height="35" Width="150"/> 
    </controls:DropShadowPanel> 
</StackPanel> 

结果

指令UWP社区工具包

1. vs2017

2. 敏SDK的Windows 10.0.14393.x

3. 添加NuGet包“Microsoft.Toolkit .Uwp.UI。控制”

4. 链接，开始使用link

5. Download快速浏览UWP工具示例应用程序，你可以用UWPCommunityToolkit或代码

Answer 2

使用Rectangle

<Grid x:Name="RootGrid"> <!-- Delete Background --> 
    .... 
    <Rectangle RadiusX="10" RadiusY="10" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/> 
    <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
</Grid>