Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In XAML, how can I keep an ellipse being a circle?

I'm getting XAML-blind I'm afraid. I'm developing a MS Surface application and I have an ellipse inside a ScatterViewItem (a container an end user can resize). I would like to keep the ellipse a circle (width == height) and keep it as big as possible (the lowest value of width/height of the SVI should be taken for both width/height properties of the ellipse).

A XAML only solution (using property triggers or similar) is prefered.

Your help is much appreciated as always.

like image 761
Bart Roozendaal Avatar asked May 25 '09 20:05

Bart Roozendaal


People also ask

How to use ellipse in WPF?

To draw an ellipse, create an Ellipse element and specify its Width and Height. Use its Fill property to specify the Brush that is used to paint the interior of the ellipse. Use its Stroke property to specify the Brush that is used to paint the outline of the ellipse.

What is ellipse in WPF?

The Ellipse object represents an ellipse shape and draws an ellipse with the given height and width. The Width and Height properties of the Ellipse class represent the width and height of an ellipse. The Fill property fills the interior of an ellipse.

What is WPF canvas?

Advertisements. Canvas panel is the basic layout Panel in which the child elements can be positioned explicitly using coordinates that are relative to the Canvas any side such as left, right, top and bottom.

How do you draw a rectangle in WPF?

To draw a rectangle, create a Rectangle element and specify its Width and Height. To paint the inside of the rectangle, set its Fill. To give the rectangle an outline, use its Stroke and StrokeThickness properties. To give the rectangle rounded corners, specify the optional RadiusX and RadiusY properties.


2 Answers

Would a simple Viewbox do the trick? E.g.

<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
    <Canvas Width="100" Height="100">
        <Ellipse Fill="Red" Width="100" Height="100" />
    </Canvas>
</Viewbox>

The Viewbox will scale its contents to fill the area of the Viewbox, and by default does the scaling proportionally. The specified horizontal and vertical alignments keep the Ellipse centered when it cannot be stretched to the full size (because of the proportional scaling).

like image 42
Tomi Junnila Avatar answered Sep 25 '22 21:09

Tomi Junnila


I stumbled over this question a few minutes ago and found a much better solution than @Paul Betts (I'd comment on his answer if I could, but I can't)

You can simply use <Ellipse Stretch="Uniform" /> to get a circle.

Source: http://forums.silverlight.net/t/160615.aspx

like image 70
Steffen Winkler Avatar answered Sep 23 '22 21:09

Steffen Winkler