CODEWITHSUNDEEP
wpfxamlbutton
Harut Hunanyan
Harut Hunanyan

Reputation: 178

Changing button shape in wpf

I want to change a button,so it will have ellipse shape . I'm using wpf app.

I saw some answers, someone offered "straightforward" thing, and I didn't get it.Also I don't want to add image(it was an answer to the question too).

Upvotes: 2

Views: 2083

Answers (2)

Ashok Manghat
Ashok Manghat

Reputation: 166

The provided answer is correct if you are planning to apply that on single button , but the real question if you want to use the same template across multiple buttons then it will be a problem. For that please follow the below method

First create a new Resource Dictionary with the name Styles.xaml (as an example) and add the following styles into it:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:SampleCodeWorkSpace">

    <Style TargetType="Button" x:Key="EllipseButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Ellipse Fill="{TemplateBinding Background}"/>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
                        </ContentPresenter>
                    </Grid>
                </ControlTemplate>
                
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="Button" x:Key="RoundedButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border CornerRadius="8" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"  
                                BorderThickness="1">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
                        </ContentPresenter>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Next, add the Resource Dictionary Reference to the App.xaml

<Application x:Class="SampleCodeWorkSpace.App"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="clr-namespace:SampleCodeWorkSpace"
         StartupUri="MainWindow.xaml">
<Application.Resources>
    <ResourceDictionary Source="Styles.xaml"></ResourceDictionary>
</Application.Resources>

Finally, add the style to the required button as shown below

<Button Content="Button" Foreground="Black"             
   HorizontalAlignment="Left" VerticalAlignment="Top" 
   Width="328" Height="188" Click="Button_Click" Style=" 
   {StaticResource EllipseButton}" />

In App.xaml and Style.xaml make sure to change xmlns:local to your project's namespace

Upvotes: 3

Umar
Umar

Reputation: 487

Try the following in XAML,

    <Button Click="Button_Click">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <Ellipse Fill="{TemplateBinding Background}"/>
                    <ContentPresenter/>
                </Grid>
            </ControlTemplate>
        </Button.Template>
    </Button>

Upvotes: 3

Related Questions