c# - 如何根据默认样式制作圆边按钮样式

Question

美好的一天，

我想知道如何使用本文中的默认样式使按钮看起来像这样:https://msdn.microsoft.com/en-us/library/windows/apps/mt299109.aspx

我发现文章在内容呈现器之后添加了这一行，但它非常圆润:

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

谢谢，
尼古丁

Answer 1

这将为您提供按钮的圆边，您可以使用 UWPCommunityToolkit for Shadow。

没有 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 Reference

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. Min SDK Windows 10.0.14393.x

3. Add nuget package "Microsoft.Toolkit.Uwp.UI.Controls"

4. Link for getting start link

5. Download UWP toolkit sample app for quick view what you can do with UWPCommunityToolkit or Codes