堆栈内存溢出
  繁体   English   中英

在UWP Windows 10 C中创建带边框的圆形按钮＃

[英]Create Round Button with Border IN UWP Windows 10 C#

 原文  2016-05-15 16:50:49  5   6    c#/ xaml/ button/ win-universal-app

问题描述

我试图在UWP Windows 10中创建一个带有白色边框和透明背景（如Windows 8.1中的旧AppBarButtons）的圆形按钮。

我找到了几个这样的样本：

https://comentsys.wordpress.com/2015/05/23/windows-10-universal-windows-platform-custom-button/

https://social.msdn.microsoft.com/Forums/sqlserver/en-US/cda7a526-5e99-4d4a-a73c-0be4ce77f961/uwpwindows10-how-to-make-button-with-round-edges?forum=wpdevelop&prof=需要

但问题在于边境问题。 当我将BorderBrush设置为某​​种颜色时，结果是边框是Button的“矩形”。

有没有办法为按钮创建圆形边框？

6 个解决方案

解决方案1
 13  2016-05-15 18:08:18

你在找这样的东西吗？ 

<StackPanel>
    <Button Background="Transparent">
        <StackPanel>
            <Border CornerRadius="10" 
                    Background="Transparent" 
                    BorderBrush="White" 
                    BorderThickness="3">
                <TextBlock Text="MyButton" 
                           Margin="10" 
                           Foreground="White"/>
            </Border>
        </StackPanel>
    </Button>
</StackPanel>

解决方案2
 9 已采纳  2016-05-15 18:20:29

有几种方法可以实现这一点，一种方法是使用样式可以看起来像这样 - 从ContentPresenter中删除BorderBrush并使用该画笔添加一个Ellipse 。 XAML中的示例： 

<Page.Resources>
    <Style x:Key="CircleButtonStyle" TargetType="Button">
        <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">
                    <Grid x:Name="RootGrid">
                       <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="Fill" Storyboard.TargetName="BorderCircle">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="BorderCircle">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="BorderCircle">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="BorderCircle">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter x:Name="ContentPresenter" VerticalAlignment="Center" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <Ellipse x:Name="BorderCircle" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button Content="text" Width="50" Height="50" BorderBrush="Blue" Style="{StaticResource CircleButtonStyle}"/>
</Grid>

我还在VisualStates中进行了一些更改，这样一旦点击/禁用它就不会有些奇怪。

解决方案3
 3  2019-03-08 18:31:50

我不知道OP是否仍然对圆角按钮感兴趣，但为了完整起见，我认为其他用户可能会有所帮助，正如用户peterincumbria所说，对于最新版本的Windows 10（1809） ） Control类中有一个新属性： CornerRadius 。 所以现在以下代码就足够了： 

<Button Content="DEMO"
        Background="Transparent"                    
        BorderThickness="1.0"
        BorderBrush="White"
        CornerRadius="10"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"/>

把它放在Grid ，我们在Page中间有一个圆角按钮。

解决方案4
 1  2019-07-26 21:48:51

对于版本1809及更高版本（即使你的目标是像我这样的早期版本），你可以这样做一个圆形按钮的例子： 

<Button
    Content="Stuff"
    Windows10version1809:CornerRadius="90,90,90,90"
    Height="64"
    Width="64">
</Button>

瞧！

在此输入图像描述

确保在XAML的顶部添加这个与其他xmlns东西。 

xmlns:Windows10version1809="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 7)"

解决方案5
 0  2018-06-18 04:19:29

另一个样本 

<Style x:Key="ProfileButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="{StaticResource AppBarHeaderBackground}"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="FontFamily" Value="Segoe UI"/>
        <Setter Property="Foreground" Value="{StaticResource SystemControlBackgroundAccentBrush}"></Setter>
        <Setter Property="FontSize" Value="9"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <StackPanel Orientation="Vertical">
                            <Grid  Margin="0,0,0,0" >
                                <Ellipse x:Name="ButtonShape" Height="40" Width="40" Fill="#FFFDFCFC" HorizontalAlignment="Center"
                                    Stroke="{StaticResource SystemControlBackgroundAccentBrush}" StrokeThickness="2" VerticalAlignment="Center"/>
                                <!--This glyph is the Contact (head and shoulders silhouette) glyph. -->
                                <TextBlock x:Name="Icon" Text="&#xE13D;" FontFamily="Segoe UI Symbol" FontSize="18" HorizontalAlignment="Center"
                                    VerticalAlignment="Center"/>
                            </Grid>
                            <TextBlock x:Name="ButtonContent" Text="{TemplateBinding Content}" HorizontalAlignment="Center"
                                FontFamily="Segoe UI" FontSize="12"/>
                        </StackPanel>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" To="{Binding Source={StaticResource SymbolThemeFontFamily}, Path=Color}" 
                                                        Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" 
                                                        Storyboard.TargetName="ButtonShape" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="ButtonPressed">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" To="#eeeeee" 
                                                        Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" 
                                                        Storyboard.TargetName="ButtonEllipse" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

结果

在此输入图像描述

或者创建完全可自定义的cornerradius

//创建模板控件xaml设计 

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.Library2.Controls">
<Style  TargetType="local:CustomRoundedButton">
    <Setter Property="CornerRadius" Value="10,10,10,10"></Setter>
    <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="local:CustomRoundedButton">
                <Grid x:Name="RootGrid" Background="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" CornerRadius="{TemplateBinding CornerRadius}">
                    <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="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <!--<Rectangle RadiusX="60" RadiusY="60" Fill="{TemplateBinding Background}" Margin="0,0,10,0" />-->
                    <Grid Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" ></Grid>
                    <ContentPresenter  CornerRadius="{TemplateBinding CornerRadius}" 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>

//模板control.cs 

public sealed class CustomRoundedButton : Button
{
    private Grid _rootGrid = null;
    public CustomRoundedButton()
    {
        this.DefaultStyleKey = typeof(CustomRoundedButton);
    }
    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        _rootGrid = GetTemplateChild("RootGrid") as Grid;
    }
    public CornerRadius CornerRadius
    {
        get { return (CornerRadius)GetValue(CornerRadiusProperty); }
        set { SetValue(CornerRadiusProperty, value); }
    }
    public static readonly DependencyProperty CornerRadiusProperty =
        DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(CustomRoundedButton), new PropertyMetadata(new CornerRadius(10,10,10,10)));

}

//从/Themes/Generic.xaml注册或合并字典 

<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="ms-appx:///UWP.Library2/Controls/CustomRoundedButton/CustomRoundedButton.xaml" />
      </ResourceDictionary.MergedDictionaries>

解决方案6
 0  2019-01-02 18:03:03

我刚刚使用的方法是简单地将CornerRadius添加到Button模板中的“RootGrid”网格。 

<Style TargetType="Button" x:Key="RoundedButton">
    ...
    <Grid x:Name="RootGrid" CornerRadius="10" Background="{TemplateBinding Background}"> 
    ...
</Style>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在 c# windows 10 UWP 中圆化 App 主窗口的角？ PointerCaptureLost C＃UWP Windows 10 Windows 10 UWP app C＃打印 单击按钮后定义图像源Windows 10 UWP，XAML C＃ UWP C＃Windows IoT创建约会 C# 如何使 UWP XAML 按钮在悬停时不显示边框 在Windows 10 C＃UWP通用Windows应用程序中获取UserName C# UWP - 在鼠标悬停期间保持按钮边框可见 在C＃UWP Windows 10 App中读取和写入Excel工作表 具有数据绑定的C＃Windows 10 UWP嵌套列表视图
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM