Erstellen Sie Runde Knopf mit Einfassung IN UWP Windows 10 C#

Ich bin versuchen, um eine Runde Taste, mit einem Weißen Rand und einen Transparenten Hintergrund (als die alte AppBarButtons in Windows 8.1) im UWP Windows 10.

Ich gefunden habe mehrere Beispiele wie diese:

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=required

Aber das problem mit der Grenze.
Wenn ich die BorderBrush-auf eine bestimmte Farbe, es stellt sich heraus, ist die Grenze für die Schaltfläche "Rechteck".

Gibt es eine Möglichkeit, kann ich eine Runde Grenze für eine Taste?

Abstimmen können Sie für die out-of-the-box-Unterstützung für abgerundete Tasten hier: UserVoice: Hinzufügen CornerRadius-Eigenschaft auf Button
Scheint so, als ob es verfügbar ist, im Jahre 1809 Okt 2018 bauen
wenn Sie die 1809 kit installiert, können Sie es verwenden, in früheren zielgerichtete Versionen durch die Nutzung dieser als drop-in-replacement-Eigenschaft für ein Button: Windows10version1809:CornerRadius="90,90,90,90"

InformationsquelleAutor yalematta | 2016-05-15

button c#win-universal-app xaml

Gibt es nur wenige Möglichkeiten, dies zu erreichen, indem Sie einen Stil kann wie folgt Aussehen - entfernen BorderBrush von ContentPresenter und fügen Sie eine Ellipse mit Pinsel. Beispiel in 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>

Habe ich auch einige änderungen gemacht in VisualStates, so dass es nicht seltsam Aussehen einmal geklickt/deaktiviert.

Dies wirft ein xaml-Ausnahme: "Nicht beheben können, TargetName BorderCircle"
Es sollte <Ellipse Name="BorderCircle" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2"/>
Recht, habe ich irgendwie verloren Sie diese während des Kopierens. Danke.

InformationsquelleAutor Romasz

Sind Sie auf der Suche nach so etwas?

<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>

Die einzige con ist dabei, dass die Größe des Kreises unterscheidet, wenn die Zahl weniger als zwei Ziffern...
Sie können die Schaltfläche größer

InformationsquelleAutor Justin Lam

3

Ich weiß nicht, ob der OP ist immer noch daran interessiert, abgerundete Schaltflächen Ecke, aber der Vollständigkeit halber denke ich, kann es hilfreich sein, für andere Benutzer darauf hinweisen, wie der user peterincumbria sagte, dass es für den neuesten build von Windows 10 (1809) es ist eine neue Eigenschaft in der Klasse Control: CornerRadius. So, jetzt der folgende code ist genug:
```
<Button Content="DEMO"
        Background="Transparent"                    
        BorderThickness="1.0"
        BorderBrush="White"
        CornerRadius="10"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"/>
```
Setzen diese innerhalb einer Grid und wir haben eine abgerundete Ecke-button in der Mitte des Page.

InformationsquelleAutor Xam

Version 1809 und später (auch wenn Sie eine Ausrichtung auf eine frühere version wie ich weiter unten) kann man auch dies ein Beispiel für eine Runde Taste:

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

und voila!

Erstellen Sie Runde Knopf mit Einfassung IN UWP Windows 10 C#

Stellen Sie sicher, fügen Sie diese oben in deinem XAML mit den anderen xmlns Zeug.

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

InformationsquelleAutor kayleeFrye_onDeck

Den Ansatz, den ich gerade verwendet wurde, war zu einfach hinzufügen, CornerRadius, um die "RootGrid" Gitter in der Schaltfläche-Vorlage.

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

InformationsquelleAutor Oliver9523

Anderen Probe

<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>

Ergebnis

Erstellen Sie Runde Knopf mit Einfassung IN UWP Windows 10 C#

Oder Erstellen Sie vollständig anpassbare cornerradius

//Erstellen einer Vorlage kontrollieren xaml-design

<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>

//Template 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)));

}

//Register-oder merge-Wörterbuch aus /Themes/Generic.xaml

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

InformationsquelleAutor Minute V

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.