XAML: align Ellipse with Uniform stretch to the center

Question

I'm trying to align an Ellipse with Uniform Stretch to the center (both vertical and horizontal). But when I add HorizontalAlignment="Center" and/or VerticalAlignment="Center" to the Ellipse, it becomes invisible.

This is my XAML code:

<Grid Grid.Row="1" Margin="12">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>


        <Ellipse x:Name="Ellipse_AccountImage" Grid.Row="0" Grid.Column="0" Stretch="Uniform">
            <Ellipse.Fill>
                <ImageBrush x:Name="ImageBrush_AccountImage"/>
            </Ellipse.Fill>
        </Ellipse>
        <Grid x:Name="Grid_AccountInfo">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <TextBlock Grid.Row="0" Grid.Column="0" Style="{ThemeResource BaseTextBlockStyle}" Text="Name:" Margin="0,0,12,0"/>
            <TextBlock Grid.Row="0" Grid.Column="1" Style="{ThemeResource BodyTextBlockStyle}" x:Name="TextBlock_Name"/>

            <TextBlock Grid.Row="1" Grid.Column="0" Style="{ThemeResource BaseTextBlockStyle}" Text="Email:" Margin="0,0,12,0"/>
            <TextBlock Grid.Row="1" Grid.Column="1" Style="{ThemeResource BodyTextBlockStyle}" x:Name="TextBlock_Email"/>

            <TextBlock Grid.Row="2" Grid.Column="0" Style="{ThemeResource BaseTextBlockStyle}" Text="Created:" Margin="0,0,12,0"/>
            <TextBlock Grid.Row="2" Grid.Column="1" Style="{ThemeResource BodyTextBlockStyle}" x:Name="TextBlock_Created"/>
        </Grid>
    </Grid>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="800"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="Ellipse_AccountImage.(Grid.RowSpan)" Value="2"/>
                    <Setter Target="Ellipse_AccountImage.Margin" Value="0,0,24,0"/>
                    <Setter Target="Grid_AccountInfo.(Grid.Row)" Value="0"/>
                    <Setter Target="Grid_AccountInfo.(Grid.Column)" Value="1"/>
                    <Setter Target="Grid_AccountInfo.(Grid.RowSpan)" Value="2"/>
                    <Setter Target="Grid_AccountInfo.VerticalAlignment" Value="Center"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="Ellipse_AccountImage.(Grid.ColumnSpan)" Value="2"/>
                    <Setter Target="Ellipse_AccountImage.Margin" Value="0,0,0,24"/>
                    <Setter Target="Grid_AccountInfo.(Grid.Row)" Value="1"/>
                    <Setter Target="Grid_AccountInfo.(Grid.Column)" Value="0"/>
                    <Setter Target="Grid_AccountInfo.(Grid.ColumnSpan)" Value="2"/>
                    <Setter Target="Grid_AccountInfo.HorizontalAlignment" Value="Center"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

I already tried putting the Ellipse element in a ViewBox, Canvas or Grid but that doesn't solve the problem.

It's invisible because you didn't specify the width & height. — Justin XL
If you set the Stretch property to Uniform, the image is scaled to fit the output dimensions, but the aspect ratio of the content is preserved, the workaround will be set fixed Width and Height for Ellipse or set Stretch to Fill(dismiss aspect ratio) — Franklin Chen - MSFT
Also, setting fixed width and height (updating it, actually) can be done in code behind when grid size changes so that it always kind of stretches appropriately. — Igor Ralic

Niels Uytdenhouwen Niels Uytdenhouwen · Accepted Answer · 2015-09-03T13:31:46

From the comments above it seemed that it isn't possible to solve this with XAML only. Instead I wrote a function that updates the width and height manually every time the page is resized (like igrali said). Thank your for the help!

XAML: align Ellipse with Uniform stretch to the center

1 Answers