Rounded Corner Button Example In WPF
In WPF, you can alter the corner radius of a button using Style class. In Setter class, set the Property value to Template. Inside the Setter class, add a ControlTemplate class that will target the Button control. After that, you can add a Border class and then setting it's CornerRadius property with an integer value of the desired radius. The example below is a user control that has a Button and a Style resource that will alter the Button's corner radius.
User Control
To use that user control, simply declare a xml namespace that will reference that object.
Output
User Control
<UserControl x:Class="WPFButtonCornerRadiusXAMLVBForums.UCRoundedButton" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="45" d:DesignWidth="100"> <UserControl.Resources> <Style x:Key="ButtonRoundedCorner" TargetType="Button"> <Setter Property="Background" Value="Silver"/> <Setter Property="Foreground" Value="White" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Border CornerRadius="25" Background="{TemplateBinding Background}" BorderThickness="2"> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"> </ContentPresenter> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> </UserControl.Resources> <Grid> <Button Style="{StaticResource ButtonRoundedCorner}" Grid.Column="2" Grid.Row="2" Content="Hello World" Width="100" Height="45" Margin="0,0,0,0" HorizontalAlignment="Center" BorderBrush="#FFF" Name="PasswordButton"> </Button> </Grid> </UserControl>
<Window x:Class="WPFButtonCornerRadius.RoundedCornerButtonDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ucButton="clr-namespace:WPFButtonCornerRadius" Title="RoundedCornerButtonDemo" Height="300" Width="300"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <ucButton:UCRoundedButton Grid.Column="2" Grid.Row="2"></ucButton:UCRoundedButton> </Grid> </Window>
Comments
Post a Comment