none
button with rounded corners RRS feed

  • Question

  • i don't want to learn templates and don't want my buttons to be glossary , i just want the corners of my simple button to be rounded.

    thousands of examples , not one SIMPLE example of button with rounded corners anywhere.

    i tried this:

    <Button Height="150" Width="200" Margin="100,20,0,0" >
                        <Border CornerRadius="15" BorderBrush="Black" BorderThickness="20" ></Border>
                </Button>
    

    but all i get is a button with a black dot inside it:

     

     

    Friday, December 23, 2011 6:38 AM

Answers

  • I found the problem , the border should be outside the button tag - arounf it:

     

    <StackPanel Name="stackPanel2" Grid.Column="1" Grid.Row="0" Background="Red" >
                <Border CornerRadius="6" BorderBrush="Blue" BorderThickness="6" HorizontalAlignment="Center" >
                    <Button Height="150" Width="200" Background="blue"></Button>
                </Border>
            </StackPanel>
    

    Friday, December 23, 2011 8:03 AM

All replies

  • Hi,

    try this.

    <Button x:Name="btn" Height="30" Width="100" Background="Transparent" BorderThickness="0" BorderBrush="Transparent">
                <Button.Content>
                    <Border CornerRadius="5" Height="25" Width="95" Margin="0" BorderBrush="Black" BorderThickness="4,4,4,4" >
                        <TextBlock Text="Click on Me" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>    
                </Button.Content>
            </Button>
    


    Thanks,

    Rajnikant 

    Friday, December 23, 2011 7:06 AM
  • HI

    rodniko

    try this

    http://tarundotnet.wordpress.com/2011/02/22/a-rounded-edged-button-in-wpf/

     

     


    Harshad..... Always 4 U
    Friday, December 23, 2011 7:07 AM
  • thanks, in your example the round border is inside the button, i need the button to have a rounded border.
    Friday, December 23, 2011 8:00 AM
  • I found the problem , the border should be outside the button tag - arounf it:

     

    <StackPanel Name="stackPanel2" Grid.Column="1" Grid.Row="0" Background="Red" >
                <Border CornerRadius="6" BorderBrush="Blue" BorderThickness="6" HorizontalAlignment="Center" >
                    <Button Height="150" Width="200" Background="blue"></Button>
                </Border>
            </StackPanel>
    

    Friday, December 23, 2011 8:03 AM
  • <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>
    This is working fine

    -Thanks and Regards Dileep Kumar

    Saturday, April 30, 2016 2:38 PM
  • Note that when you set the controltemplate for a control, you entirely replace the default template.

    I mention this because the standar button template has triggers for mouseover, ispressed and IsEnabled.

    It's therefore often preferable to edit a copy of the standard template.

    This is almost trivial, so you don't need to learn all about templates to do it.

    Just know that you can get the template by clicking the square next to the Template property of any button.

    You then make a very simple change to that template and your button has rounded corners

    EG:

        <Window.Resources>
            <ControlTemplate x:Key="RoundedButtonTemplate" TargetType="{x:Type Button}">
                <Border x:Name="border" 
                        CornerRadius="10" 
                        BorderBrush="{TemplateBinding BorderBrush}" 
                        BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                    <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsDefaulted" Value="True">
                        <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" TargetName="border" Value="#FFBEE6FD"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="#FF3C7FB1"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" TargetName="border" Value="#FFC4E5F6"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="#FF2C628B"/>
                    </Trigger>
                    <Trigger Property="ToggleButton.IsChecked" Value="True">
                        <Setter Property="Background" TargetName="border" Value="#FFBCDDEE"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="#FF245A83"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Background" TargetName="border" Value="#FFF4F4F4"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/>
                        <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="#FF838383"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Window.Resources>
        <Grid>
            <Button Content="I Have Rounded Corners" 
                    Template="{StaticResource RoundedButtonTemplate}"
                    />

    All I did there is add that corner radius 10.

     


    Hope that helps.

    Technet articles: WPF: Layout Lab; All my Technet Articles

    Saturday, April 30, 2016 3:01 PM
    Moderator
  • This seems to be the cleanest solution. It works like a charm for me.
    Wednesday, February 13, 2019 1:57 PM