19

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.

Bart Roozendaal
  • 815
  • 2
  • 9
  • 21

3 Answers3

37

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

Steffen Winkler
  • 2,805
  • 2
  • 35
  • 58
  • 2
    This is the best solution by far. – flyingfisch Apr 14 '15 at 18:08
  • 1
    In order to get this to work with WPF, I had to make this `UniformToFill`. – Mitch Sep 25 '18 at 19:28
  • @Mitch only if the parent that contains the ellipse doesn't provide a height/width for the ellipse and you didn't specify a height or width on the ellipse. Good point though, I didn't know that `UniformToFill` existed. – Steffen Winkler Sep 26 '18 at 07:43
15

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

Tomi Junnila
  • 7,443
  • 3
  • 28
  • 24
6
<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.

Ana Betts
  • 73,868
  • 16
  • 141
  • 209
  • 2
    What if the height of the bounding box is greater than the width? In that case I want the Height=ActualWidth. – Bart Roozendaal May 26 '09 at 10:14
  • In this case, you need to write code to do this - i.e. you want to do greedy sizing that maintains the aspect ratio (kind of like how a movie player does it, that switches which side it bases its sizes on based on which axis is bigger) – Ana Betts May 26 '09 at 15:38
  • That's what I thought. Too bad, but no problem. Thanks – Bart Roozendaal May 27 '09 at 05:26