xamarin UWP自定义圆角按钮

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

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

   前端代码：

 1 <UserControl
 2     x:Class="Test.UWP.ExtendControls.UWPButton"
 3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5     xmlns:local="using:Mixin.UWP.ExtendControls"
 6     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 7     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8     mc:Ignorable="d">
 9     <Grid Background="{x:Null}">
10         <Grid Grid.Row="0">
11             <StackPanel Name="stack_Panel">
12                 <Button Click="btnDailog_Click" Background="{x:Null}" HorizontalAlignment="Stretch" Style="{StaticResource UWPDialogBtnStyle}">
13                     <Button.Content>
14                         <Grid >
15                             <Grid Grid.Row="0" >
16                                 <Rectangle Fill="White" RadiusX="6" RadiusY="6"></Rectangle>
17                                 <StackPanel HorizontalAlignment="Center" Margin="8,4,8,4">
18                                     <TextBlock x:Name="btnText" >我是自定义按钮</TextBlock>
19                                 </StackPanel>
20                             </Grid>
21                         </Grid>
22                     </Button.Content>
23                 </Button>
24                 
25             </StackPanel>
26             
27         </Grid>
28     </Grid>
29     
30 </UserControl>
UWPButton.xaml

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

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

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

 1 <Style x:Key="UWPDialogBtnStyle" TargetType="Button">
 2         <Setter Property="Background" Value="White"/>
 3         <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
 4         <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}"/>
 5         <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
 6         <Setter Property="Padding" Value="0,0,0,0"/>
 7         <Setter Property="HorizontalAlignment" Value="Left"/>
 8         <Setter Property="VerticalAlignment" Value="Center"/>
 9         <Setter Property="HorizontalContentAlignment" Value="Stretch" />
10         <Setter Property="VerticalContentAlignment" Value="Stretch" />
11         <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
12         <Setter Property="FontWeight" Value="Normal"/>
13         <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
14         <Setter Property="UseSystemFocusVisuals" Value="True"/>
15         <Setter Property="Template">
16             <Setter.Value>
17                 <ControlTemplate TargetType="Button">
18                     <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
19                         <VisualStateManager.VisualStateGroups>
20                             <VisualStateGroup x:Name="CommonStates">
21                                 <VisualState x:Name="Normal">
22                                     <Storyboard>
23                                         <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
24                                     </Storyboard>
25                                 </VisualState>
26                                 <VisualState x:Name="PointerOver">
27                                     <Storyboard>
28                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
29                                             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/>
30                                         </ObjectAnimationUsingKeyFrames>
31                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
32                                             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
33                                         </ObjectAnimationUsingKeyFrames>
34                                         <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
35                                     </Storyboard>
36                                 </VisualState>
37                                 <VisualState x:Name="Pressed">
38                                     <Storyboard>
39                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
40                                             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"/>
41                                         </ObjectAnimationUsingKeyFrames>
42                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
43                                             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}"/>
44                                         </ObjectAnimationUsingKeyFrames>
45                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
46                                             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
47                                         </ObjectAnimationUsingKeyFrames>
48                                         <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
49                                     </Storyboard>
50                                 </VisualState>
51                                 <VisualState x:Name="Disabled">
52                                     <Storyboard>
53                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
54                                             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
55                                         </ObjectAnimationUsingKeyFrames>
56                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
57                                             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>
58                                         </ObjectAnimationUsingKeyFrames>
59                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
60                                             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/>
61                                         </ObjectAnimationUsingKeyFrames>
62                                     </Storyboard>
63                                 </VisualState>
64                             </VisualStateGroup>
65                         </VisualStateManager.VisualStateGroups>
66                         <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}"/>
67                     </Grid>
68                 </ControlTemplate>
69             </Setter.Value>
70         </Setter>
71     </Style>
Style

   后端代码：

 1 namespace Test.UWP.ExtendControls
 2 {
 3     public sealed partial class UWPButton : UserControl
 4     {
 5         public UWPButton()
 6         {
 7             this.InitializeComponent();
 8         }
 9         public event RoutedEventHandler Click;
10         public string BtnText
11         {
12             get { return btnText.Text; }
13             set
14             {
15                 btnText.Text = value;
16             }
17         }
18 
19         private void btnDailog_Click(object sender, RoutedEventArgs e)
20         {
21             if (Click != null)
22                 Click(sender, e);
23         }
24     }
25 }
UWPButton.xaml.cs

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

posted @ 2016-09-22 15:20  醉梦ai天涯  阅读(810)  评论(0)  编辑  收藏  举报