Cómo crear/hacer esquinas redondeadas botones en WPF?

Necesito crear un esquina redondeada brillante botón en WPF. Puede alguien por favor me explique qué pasos son necesarios?

  • Los fundamentos para las esquinas redondeadas son el uso de la Frontera o el Rectángulo de la clase, y el Radio de la propiedad
  • seguro, pero el Botón de clase no tienen esas propiedades. Entonces, ¿cómo hacer un Botón?
InformationsquelleAutor xorpower | 2011-07-19

10 Kommentare

  1. 60

    Usted tiene que crear su propio ControlTemplate para el Botón. sólo echar un vistazo a la muestra

    creado un estilo llamado RoundCorner y dentro de que he cambiado de lugar de crear mi propia Plantilla de Control de la Frontera (CornerRadius=8) para la vuelta de la esquina y algunos antecedentes y otros gatillo efecto. Si usted tiene o sabe de Expression Blend se puede hacer muy fácilmente.

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

    Utilizando

    <Button Style="{DynamicResource RoundCorner}" 
            Height="25" 
            VerticalAlignment="Top" 
            Content="Show" 
            Width="100" 
            Margin="5" />
    • Puse la frontera exterior de la red, que tiene un rectángulo de fondo cuando al mover el ratón. Gracias de señalar la frontera elemento necesita estar dentro de la Cuadrícula y ContentPresenter ha alineación de ajuste.
    • Holy crap. Todo lo que acaba de conseguir las esquinas Redondeadas?
    • También, resulta que los botones de mi muy oscuro y no les dan las esquinas redondeadas. (Usando WPF 4.0) 🙁
    • Esto es lo que hace WPF un placer trabajar con.
    • Yo no creo que sea todos es necesario. El replier hecho que sea fácil para él y copiado de que la atrocidad de código generado automáticamente el uso de la Mezcla. Es por eso que él consiguió todo lo que santo excrementos y que por eso es tan mal formateado. En mi opinión, la respuesta debería ser aceptado, pero definitivamente no upvoted. Sin embargo, siéntase libre de las políticas de cti hacia abajo a los fundamentos de la redondez (omitiendo el colorante, se cierne etc.) y el post que a ti mismo. Me volvería a dar +1 para que.
    • Borrar formulario WPF => Insert WebView => border-radius: 8px => Presto

  2. 24

    Que esto es más un mínimo de control de la plantilla para obtener un botón con esquinas redondeadas, sin embargo, usted no tendrá ningún pase o haga clic en efectos visuales. Pero usted puede agregar a la plantilla de control según sea necesario. Yo estaba trabajando con un fondo oscuro, de ahí el fondo blanco.

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

    He utilizado la plantilla de control de la siguiente entrada de blog como mi punto de partida:
    http://shihac-sharp.blogspot.com.au/2012/05/button-with-rounded-corners-in-wpf.html

  3. 20

    Sé que este post es super viejo, pero tengo una respuesta sorprendentemente falta de la anterior, y también es mucho más simple que la mayoría.

    <Button>
        <Button.Resources>
            <Style TargetType="Border">
                <Setter Property="CornerRadius" Value="5"/>
            </Style>
        </Button.Resources>
    </Button>

    Ya que por defecto ControlTemplate para el Botón de control utiliza un elemento de Borde, la adición de un estilo de Borde para los botones de los recursos que aplica el estilo a la Frontera. Esto permite añadir esquinas redondeadas sin tener que hacer su propia ControlTemplate y sin ningún código. También funciona en todas las variedades de Botón (por ejemplo, ToggleButton y RepeatButton).

    • Probado esta solución, ya que era la más fácil de entender y trabajado fuera de la caja. El mayor problema que he tenido con este fue que tiene un 5 px radio y necesito un 2px radio!!!! 🙂 Muchas gracias Keith
    • Mejor solución, simple y de trabajo.
  4. 9

    Que usted puede probar esto………..

     <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>
    • más fácil de implementar.
    • Esto funciona, pero el fondo del botón debe ser Transparente
    • Tipo de obras. El éxito de la prueba para el botón que te hace perder la ronda ness.
    • Hmm. Voy a encontrar una solución para eso. Gracias por la info
  5. 3

    Como alternativa, usted puede codificar algo como esto:

        <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"
                   Source="Recursos/Images/ic_add_circle_outline_black_24dp_2x.png"
                   Width="{Binding borderBtnAdd.Width}" Height="{Binding borderBtnAdd.Height}"/>
        </Border>

    El «Botón» se verá algo como esto:

    Cómo crear/hacer esquinas redondeadas botones en WPF?

    Puede establecer cualquier otro contenido en lugar de la imagen.

  6. 2

    Esta es una versión adaptada de @Kishore Kumar ‘s respuesta que es más simple y se asemeja más a la predeterminada del botón estilo y los colores. También soluciona el problema de que su «IsPressed» gatillo está en el orden equivocado y no se ejecuta nunca, ya que la «MouseOver» tendrá prioridad:

    <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid x:Name="grid">
                            <Border x:Name="border" CornerRadius="2" BorderBrush="#707070" BorderThickness="1" Background="LightGray">
                                <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                          TextElement.FontWeight="Normal">
                                </ContentPresenter>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" TargetName="border" Value="#BEE6FD"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="#3C7FB1"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="BorderBrush" TargetName="border" Value="#2C628B"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Opacity" TargetName="grid" Value="0.25"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
  7. 1

    Puede utilizar las propiedades adjuntas para la configuración de botón de radio frontera (también el mismo trabajo para los cuadros de texto).

    Crear la clase de propiedad adjunta

    public class CornerRadiusSetter
    {
        public static CornerRadius GetCornerRadius(DependencyObject obj) => (CornerRadius)obj.GetValue(CornerRadiusProperty);
    
        public static void SetCornerRadius(DependencyObject obj, CornerRadius value) => obj.SetValue(CornerRadiusProperty, value);
    
        public static readonly DependencyProperty CornerRadiusProperty =
            DependencyProperty.RegisterAttached(nameof(Border.CornerRadius), typeof(CornerRadius),
                typeof(CornerRadiusSetter), new UIPropertyMetadata(new CornerRadius(), CornerRadiusChangedCallback));
    
        public static void CornerRadiusChangedCallback(object sender, DependencyPropertyChangedEventArgs e)
        {
            Control control = sender as Control;
    
            if (control == null) return;
    
            control.Loaded -= Control_Loaded;
            control.Loaded += Control_Loaded;
        }
    
        private static void Control_Loaded(object sender, EventArgs e)
        {
            Control control = sender as Control;
    
            if (control == null || control.Template == null) return;
    
            control.ApplyTemplate();
    
            Border border = control.Template.FindName("border", control) as Border;
    
            if (border == null) return;
    
            border.CornerRadius = GetCornerRadius(control);
        }
    }

    Entonces usted puede utilizar la propiedad adjunta de sintaxis para varios botones sin estilo duplicados:

    <Button local:CornerRadiusSetter.CornerRadius="10">Click me!</Button>
    <Button local:CornerRadiusSetter.CornerRadius="5, 0, 0, 5">Click me!</Button>
    <Button local:CornerRadiusSetter.CornerRadius="3, 20, 8, 15">Click me!</Button>
  8. 1

    en su aplicación.xaml agregar esta parte del estilo :

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

    Botón

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

    Bien la mejor manera de conseguir alrededor de esquinas rápido y con el estándar de la animación es crear una copia de la plantilla de control con la Mezcla.
    Una vez que obtenga un conjunto de copia de la radio de la esquina de la Cuadrícula de la etiqueta y usted debería ser capaz de tener el control con animación completa funcionalidad y aplicable a cualquier botón de control. mira este es el código:

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

    También he editado el VisualState=»PointerOver» específicamente en el Storyboard.TargetName=»BorderBrush», debido a su ThemeResource obtener el cuadrado de esquinas siempre PointerOver desencadenantes.

    A continuación, usted debe ser capaz de aplicarlo a su estilo de control como este:

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

    Así que usted puede aplicar los estilos a cualquier Botón.

    • Cómo funciona – <Grid> no tiene un CornerRadius propiedad? Esto se refiere a una WPF aplicación de Windows, no una aplicación de Windows Universal – son diferentes.
    • Sí, yo estaba hablando de UWP. Pero de todos modos todavía se podía aplicar el concepto a WPF. Acaba de editar la plantilla de control creados por la mezcla y editar sus propiedades para que se ajuste a sus necesidades, de esa manera usted no necesita empezar de 0.
  10. -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>

    Esto funciona muy bien para mí.

    • Lo que sucedió a ContentPresenter?

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea