Wie erstellt / erstellt abgerundete Ecke Schaltflächen in WPF?

Brauche ich zum erstellen einer abgerundeten Ecken glänzend Schaltfläche in WPF. Kann jemand bitte erklären Sie mir, welche Schritte sind erforderlich?

Kommentar zu dem Problem
Die Grundlagen für die abgerundeten Ecken werden mithilfe der Border-oder Rechteck-Klasse und der Eigenschaft "Radius" Kommentarautor: Kieren Johnstone
@KierenJohnstone sicher, aber der Button-Klasse nicht diese Eigenschaften haben. Also, wie tun Sie es für eine Taste? Kommentarautor: BrainSlugs83

InformationsquelleAutor der Frage Romil N | 2011-07-19

  1. 51

    Erstellen Sie Ihre eigenen ControlTemplate für die Schaltfläche. werfen Sie einen Blick auf die Probe

    erstellt eine Formatvorlage namens RoundCorner und innen, die ich geändert habe lieber meine eigene neue Control-Vorlage mit Rahmen (CornerRadius=8) für die Runde Ecke und einige hintergrund-und anderen trigger-Effekt. Wenn Sie haben oder wissen von Expression Blend kann sehr einfach durchgeführt werden.

    <Style x:Key="RoundCorner" TargetType="{x:Type Button}">
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid x:Name="grid">
                    <Border x:Name="border" CornerRadius="8" BorderBrush="Black" BorderThickness="2">
                        <Border.Background>
                            <RadialGradientBrush GradientOrigin="0.496,1.052">
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform CenterX="0.5" CenterY="0.5" 
                                                        ScaleX="1.5" ScaleY="1.5"/>
                                        <TranslateTransform X="0.02" Y="0.3"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                                <GradientStop Offset="1" Color="#00000000"/>
                                <GradientStop Offset="0.3" Color="#FFFFFFFF"/>
                            </RadialGradientBrush>
                        </Border.Background>
                        <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                          TextElement.FontWeight="Bold">
                        </ContentPresenter>
                    </Border>

                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" TargetName="border">
                            <Setter.Value>
                                <RadialGradientBrush GradientOrigin="0.496,1.052">
                                    <RadialGradientBrush.RelativeTransform>
                                        <TransformGroup>
                                            <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>
                                            <TranslateTransform X="0.02" Y="0.3"/>
                                        </TransformGroup>
                                    </RadialGradientBrush.RelativeTransform>
                                    <GradientStop Color="#00000000" Offset="1"/>
                                    <GradientStop Color="#FF303030" Offset="0.3"/>
                                </RadialGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="BorderBrush" TargetName="border" Value="#FF33962B"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Opacity" TargetName="grid" Value="0.25"/>
                    </Trigger>

                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

    Mit

    <Button Style="{DynamicResource RoundCorner}" Height="25" VerticalAlignment="Top" Content="Show" Width="100" Margin="5" />

    InformationsquelleAutor der Antwort Kishore Kumar

  2. 18

    Dies ist mehr eine minimale Kontrolle Vorlage einen button mit abgerundeten Ecken, jedoch sind Sie nicht schweben, oder klicken Sie auf visuelle Effekte. Aber Sie können fügen Sie diese in die Steuerung als Vorlage benötigt. Ich war mit einem dunklen hintergrund, daher der weiße hintergrund.

    <Style x:Key="RoundedButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border CornerRadius="15" Background="White" BorderThickness="1" Padding="2">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

    Verwendet habe ich das control-template aus den folgenden blog-post als Ausgangspunkt:
    http://shihac-sharp.blogspot.com.au/2012/05/button-with-rounded-corners-in-wpf.html

    InformationsquelleAutor der Antwort Brian Hinchey

  3. 5

    Können Sie versuchen, diese...........

     <Border BorderBrush="Black" Name="MyBorder"  
            Height="78" 
            Background="Red" 
            Width="74" 
            CornerRadius="3">
        <Button Width="{Binding MyBorder.Width}" 
                Height="{Binding MyBorder.Height}" 
                Content="Hi" Background="Red"/>
    </Border>

    InformationsquelleAutor der Antwort Shakir Ahmed

  4. 1

    Als alternative, können Sie code so etwas wie dieses:

        <Border 
        x:Name="borderBtnAdd"
        BorderThickness="1" 
            BorderBrush="DarkGray" 
            CornerRadius="360" 
            Height="30" 
            Margin="0,10,10,0" 
            VerticalAlignment="Top" HorizontalAlignment="Right" Width="30">
        <Image x:Name="btnAdd"  Width="{Binding borderBtnAdd.Width}" Height="{Binding borderBtnAdd.Height}" Source="Recursos/Images/ic_add_circle_outline_black_24dp_2x.png"/>
    </Border>

    Den "Knopf" wird in etwa so Aussehen:

    Wie erstellt /erstellt abgerundete Ecke Schaltflächen in WPF?

    Konnten Sie andere Inhalte, anstatt das Bild.

    InformationsquelleAutor der Antwort Giovanny Farto M.

  5. 0

    in Ihrer app.xaml fügen Sie diese Teil Stil :

       <Application.Resources>
     <Style TargetType="FrameworkElement" x:Key="VisibleAnimation">
  <Setter Property="Visibility" Value="Collapsed"/>
  <Setter Property="Opacity" Value="10"/>
  <Setter Property="Height" Value="700"></Setter>
  <Style.Triggers>
    <Trigger Property="Visibility" Value="Visible">
      <Trigger.EnterActions>
    <BeginStoryboard>
      <Storyboard>
        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                         From="0.0" To="1.0" Duration="0:0:0.5"/>
       </Storyboard>
     </BeginStoryboard>
   </Trigger.EnterActions>
   </Trigger>
 </Style.Triggers>
</Style>

    <Style TargetType="Button" x:Key="BTNCORNER">
        <Setter Property="Background" Value="White" />
        <Setter Property="TextBlock.TextAlignment" Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border CornerRadius="7,7,7,7" Background="White"    BorderBrush="#ccc" BorderThickness="1,1,1,1" >
                        <ContentPresenter x:Name="contentPresenter"   ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding  Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"  Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding  VerticalContentAlignment}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    </Application.Resources>


 then go to your button 

                    <Button x:Name="loginButton"  Style="{StaticResource BTNCORNER}"   Margin="50,20,20,20"  Click="loginButton_Click" FontSize="20" Width="93" Height="42"  />

    InformationsquelleAutor der Antwort Osama Ibrahim

  6. 0

    Sowie der beste Weg, um Runde Ecken schnell und mit standard-animation zu erstellen Sie eine Kopie der control-Vorlage mit Mischung.
    Sobald Sie eine Kopie des Eckenradius auf die Grid-tag und Sie sollten in der Lage sein, um Ihre Steuern mit voller animation Funktionalität und anwendbar auf jede Schaltfläche, Kontrolle. suchen Sie diesen code:

    <ControlTemplate x:Key="ButtonControlTemplate" TargetType="Button">        
    <Grid x:Name="RootGrid" Background="{TemplateBinding Background}"
          CornerRadius="8,8,8,8">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <Storyboard>
                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="PointerOver">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}" />
                        </ObjectAnimationUsingKeyFrames>
                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}" />
                        </ObjectAnimationUsingKeyFrames>
                        <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Disabled">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <!--<Border CornerRadius="8,8,8,8"
                        Background="#002060"
                        BorderBrush="Red"
                        BorderThickness="2">-->
            <ContentPresenter x:Name="ContentPresenter"
                              BorderBrush="{TemplateBinding BorderBrush}"
                              BorderThickness="{TemplateBinding BorderThickness}"
                              Content="{TemplateBinding Content}"
                              ContentTransitions="{TemplateBinding ContentTransitions}"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              Padding="{TemplateBinding Padding}"
                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                              AutomationProperties.AccessibilityView="Raw"/>
        <!--</Border>-->
    </Grid>        
</ControlTemplate>

    Ich bearbeitete auch die VisualState="PointerOver", die speziell auf Storyboard.TargetName="BorderBrush", weil seine ThemeResource bekommen, abgeschrägte Ecken, wenn PointerOver löst.

    Dann sollten Sie in der Lage sein, um es anzuwenden, zu Ihrer Kontrolle, im Stil wie diese:

    <Style TargetType="ContentControl" x:Key="ButtonLoginStyle"
       BasedOn="{StaticResource CommonLoginStyleMobile}">
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="Background" Value="#002060"/>
    <Setter Property="Template" Value="{StaticResource ButtonControlTemplate}"/>        
</Style>

    So können Sie Ihre Formatvorlagen auf eine beliebige Taste.

    InformationsquelleAutor der Antwort Enrique A. Pinelo Novelo

  7. -2
    <Button x:Name="btnBack" Grid.Row="2" Width="300"
                        Click="btnBack_Click">
                <Button.Template>
                    <ControlTemplate>
                        <Border CornerRadius="10" Background="#463190">
                            <TextBlock Text="Retry" Foreground="White" 
                                       HorizontalAlignment="Center"                                           
                                       Margin="0,5,0,0"
                                       Height="40"
                                       FontSize="20"></TextBlock>
                        </Border>
                    </ControlTemplate>
                </Button.Template>
            </Button>

    Dies ist in Ordnung für mich.

    InformationsquelleAutor der Antwort Dileep Kumar

Schreibe einen Kommentar