Menu
I need to create a rounded corner glossy button in WPF. Can anyone please explain me what steps are needed?
977
You can achieve rounded corners on a button without having to write any XAML (other than a Style, once) and without having to replace the template or set/change any other properties. Just use an EventSetter in your style for the button's "Loaded" event and change it in code-behind.
Make a copy of the default Button Template, and simply change the default panel to your own custom shape. In the case of the button, it looks like you need to replace the Border with something like a Path defining an Arrow.
The BorderBrush property of the Button sets a brush to draw the border of a Button. You may use any brush to fill the border. The following code snippet uses a linear gradient brush to draw the border with a combination of red and blue color.
I know this post is super old, but I have an answer that's surprisingly missing from the above and is also much simpler than most.
<Button> <Button.Resources> <Style TargetType="Border"> <Setter Property="CornerRadius" Value="5"/> </Style> </Button.Resources> </Button> Since the default ControlTemplate for the Button control uses a Border element, adding a style for Border to the Button's resources applies that style to that Border. This lets you add rounded corners without having to make your own ControlTemplate and without any code. It also works on all varieties of Button (e.g. ToggleButton and RepeatButton).
148
You have to create your own ControlTemplate for the Button. just have a look at the sample
created a style called RoundCorner and inside that i changed rather created my own new Control Template with Border (CornerRadius=8) for round corner and some background and other trigger effect. If you have or know Expression Blend it can be done very easily.
<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> Using
<Button Style="{DynamicResource RoundCorner}" Height="25" VerticalAlignment="Top" Content="Show" Width="100" Margin="5" /> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
