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>
注意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>
后端代码:
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 }
在自定义控件中通过设置BtnText来更改内容的文字显示。并把Click事件通过事件委托出去使用。