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


Keywords:wpf 


Question: 

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.


3 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).

 

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:

 
<Ellipse x:Name="anEllipse" Width={Binding Path=ActualHeight ElementName=anEllipse} />

You could probably get away with not naming this if you did a relative binding as well.