CODEWITHSUNDEEP
c#visual-studioxamlwindows
nboisnea
nboisnea

Reputation: 27

Resizable circle button xaml

I'm developping a universal app for Windows in XAML/C# and I can't manage to create a circle button that I can resize. I use an Ellipse with uniform stretch so as to make it circle and a ContentPresenter. 

    <ControlTemplate TargetType="Button">
        <Grid>
            <Ellipse Stretch="Uniform">
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </ControlTemplate>

The problem is a uniform ellipse is automatically aligned top, left, and it's impossible to make it stretch the grid. When I resize the button, the ContentPresenter stays in the center while the ellipse stays in the top left corner. I'd like to be able to resize the button and that the text stays in the center of the circle. Thanks for help!

Upvotes: 0

Views: 1732

Answers (2)

nboisnea
nboisnea

Reputation: 27

I've also found another solution which is to use a ViewBox:

<ControlTemplate TargetType="Button">
    <ViewBox>
        <Grid>
            <Ellipse Stretch="Uniform" Width="50" Height="50">
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </ViewBox>
</ControlTemplate>

The ViewBox automatically scales everything when resized. You have to set Width and Height, but it's only to set proportions. Very useful when using the user control with both Windows and Windows Phone. Thanks for your answers!

Upvotes: 1

Clemens
Clemens

Reputation: 128061

You may use a Path with a circular EllipseGeometry:

<ControlTemplate TargetType="Button">
    <Grid>
        <Path Stretch="Uniform" ...>
            <Path.Data>
                <EllipseGeometry RadiusX="1" RadiusY="1"/>
            </Path.Data>
        </Path>
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</ControlTemplate>

You would however have to explicitly set the Width or Height of the Button, otherwise it would take up all available space.

Upvotes: 1

Related Questions