Friday, September 23, 2016

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
<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>
To use that user control, simply declare a xml namespace that will reference that object.
<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>
Output

0 comments:

Post a Comment