Reputation: 105
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.
Upvotes: 3
Views: 1512
Reputation: 105
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!
Upvotes: 0