CODEWITHSUNDEEP
wpfbutton
AwkwardCoder
AwkwardCoder

Reputation: 25631

How to create oval button in WPF application?

Exactly as the subject, How to create oval button in WPF application?

Upvotes: 1

Views: 12285

Answers (2)

brian
brian

Reputation:

The following code can go directly in your window and supports the IsPressed and IsMouseOver triggers.

<Window.Resources>

    <ControlTemplate x:Key="ButtonControlTemplate" TargetType="{x:Type Button}">
        <Grid>
            <Ellipse Fill="White" Stroke="Black" VerticalAlignment="Top" Height="32" x:Name="theEllipse"/>
            <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Fill" Value="Yellow" TargetName="theEllipse"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="Fill" Value="Gray" TargetName="theEllipse"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

</Window.Resources>

<Grid x:Name="LayoutRoot">
    <Button HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Content="Button" Template="{DynamicResource ButtonControlTemplate}"/>
</Grid>

Upvotes: 2

Andrej
Andrej

Reputation: 991

Something like this:

<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Width="64" Height="32" Fill="Blue" />
<ContentControl Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

I did not test the code, but you should get the idea :)

Edit: The Ellipse of course, has a Fill Property instead of Background.

Andrej

Upvotes: 5

Related Questions