Search code examples
xamlalignmentellipsestretchuwp

XAML: align Ellipse with Uniform stretch to the center


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.


Solution

  • 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!