xamarin UWP自定义圆角按钮

uwp自带的button本身不支持圆角属性，所以要通过自定义控件实现。

通过设置Button的Background=“{x:Null}”设置为Null使背景为空，再设置Button.Content中的内容，采用如下代码方式：

前端代码：

 <UserControl
     x:Class="Test.UWP.ExtendControls.UWPButton"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:Mixin.UWP.ExtendControls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
     <Grid Background="{x:Null}">
         <Grid Grid.Row="">
             <StackPanel Name="stack_Panel">
                 <Button Click="btnDailog_Click" Background="{x:Null}" HorizontalAlignment="Stretch" Style="{StaticResource UWPDialogBtnStyle}">
                     <Button.Content>
                         <Grid >
                             <Grid Grid.Row="" >
                                 <Rectangle Fill="White" RadiusX="" RadiusY=""></Rectangle>
                                 <StackPanel HorizontalAlignment="Center" Margin="8,4,8,4">
                                     <TextBlock x:Name="btnText" >我是自定义按钮</TextBlock>
                                 </StackPanel>
                             </Grid>
                         </Grid>
                     </Button.Content>
                 </Button>

             </StackPanel>

         </Grid>
     </Grid>

 </UserControl>

UWPButton.xaml

注意button.Content的内容不会填充满整个button的内容框，这需要使用到另一个新的属性

<Setter Property="HorizontalContentAlignment" Value="Stretch" />
   <Setter Property="VerticalContentAlignment" Value="Stretch" />

只使用HorizontalAlignment和VerticalAlignment设置为Stretch是无法实现填充满内容的。所以我们需要定义一个button的Style并添加上面的两个属性。代码如下：

 <Style x:Key="UWPDialogBtnStyle" TargetType="Button">
         <Setter Property="Background" Value="White"/>
         <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
         <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}"/>
         <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
         <Setter Property="Padding" Value="0,0,0,0"/>
         <Setter Property="HorizontalAlignment" Value="Left"/>
         <Setter Property="VerticalAlignment" Value="Center"/>
         <Setter Property="HorizontalContentAlignment" Value="Stretch" />
         <Setter Property="VerticalContentAlignment" Value="Stretch" />
         <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">
                     <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CommonStates">
                                 <VisualState x:Name="Normal">
                                     <Storyboard>
                                         <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                     </Storyboard>
                                 </VisualState>
                                 <VisualState x:Name="PointerOver">
                                     <Storyboard>
                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                             <DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/>
                                         </ObjectAnimationUsingKeyFrames>
                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                             <DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
                                         </ObjectAnimationUsingKeyFrames>
                                         <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                     </Storyboard>
                                 </VisualState>
                                 <VisualState x:Name="Pressed">
                                     <Storyboard>
                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
                                             <DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"/>
                                         </ObjectAnimationUsingKeyFrames>
                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                             <DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource SystemControlHighlightTransparentBrush}"/>
                                         </ObjectAnimationUsingKeyFrames>
                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                             <DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
                                         </ObjectAnimationUsingKeyFrames>
                                         <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
                                     </Storyboard>
                                 </VisualState>
                                 <VisualState x:Name="Disabled">
                                     <Storyboard>
                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
                                             <DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
                                         </ObjectAnimationUsingKeyFrames>
                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                             <DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>
                                         </ObjectAnimationUsingKeyFrames>
                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                             <DiscreteObjectKeyFrame KeyTime="" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/>
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                 </VisualState>
                             </VisualStateGroup>
                         </VisualStateManager.VisualStateGroups>
                         <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}"/>
                     </Grid>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>

Style

后端代码：

 namespace Test.UWP.ExtendControls
 {
     public sealed partial class UWPButton : UserControl
     {
         public UWPButton()
         {
             this.InitializeComponent();
         }
         public event RoutedEventHandler Click;
         public string BtnText
         {
             get { return btnText.Text; }
             set
             {
                 btnText.Text = value;
             }
         }

         private void btnDailog_Click(object sender, RoutedEventArgs e)
         {
             if (Click != null)
                 Click(sender, e);
         }
     }
 }

UWPButton.xaml.cs

在自定义控件中通过设置BtnText来更改内容的文字显示。并把Click事件通过事件委托出去使用。