locked
Make button round edged RRS feed

  • Question

  • Hi Team,

    I want to make my button round edged. My button code is as follows:-

    <Button Grid.Column="1" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" HorizontalAlignment="Center" BorderThickness="1" Foreground="White" FontFamily="Arial,Helvetica,sans-serif" Width="85" Background="#6F933D" BorderBrush="#48671E" CommandParameter="11" Command="{Binding AuditCommand}" Visibility="{Binding ViewModel.IsCompleteAccessible}" Margin="38,0,60,0" Height="24" VerticalAlignment="Bottom">Complete</Button>

    Please tell how can I make it round edged.

    Thanks,
    Rahul

    Friday, June 26, 2015 5:58 AM

Answers

  • In order to give it round corners, you need to re-template it.

    The way to do that is to extract the default template then change the Border which is the thing making it a rectangle.

    Extracting the template in vs2012 is a matter of selecting any button in visual studio then using the property window.  Down the end in miscellaneous is default template.

    You click the square next to that and convert to local value.

    You will then find your toolbar button style won't be compatible though.

    What I changed here is adding the CornerRadius on the Border

        <Window.Resources>
            <ControlTemplate x:Key="RoundedCornerButton" TargetType="ButtonBase">
                    <Border x:Name="border" 
                                CornerRadius="5"
                                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="Button.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>
        <StackPanel>
            <Button Width="200" Template="{StaticResource RoundedCornerButton}"  >
     I amd a Rounded Button</Button>


    Hope that helps.

    Technet articles: WPF: Change Tracking; All my Technet Articles


    • Edited by Andy ONeill Friday, June 26, 2015 6:51 AM
    • Marked as answer by rahul_agg11 Friday, June 26, 2015 7:09 AM
    Friday, June 26, 2015 6:50 AM