XAML 椭圆相对大小

Question

我想使椭圆的大小相对于其保持网格的列和行大小。

因此，椭圆的大小应根据给定硬件的页面（设备）大小而变化。

类似于 css 中的 'Inherit'。

这可能吗？

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="1*" />
        <RowDefinition Height="10*" />
        <RowDefinition Height="10*" />
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*" />
        <ColumnDefinition Width="4*" />
        <ColumnDefinition Width="4*" />
        <ColumnDefinition Width="3*" />
    </Grid.ColumnDefinitions>

    <Ellipse Fill="DarkGray" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Stroke="Black" VerticalAlignment="Center" HorizontalAlignment="Center" Width="200" Height="200" />
    <Ellipse Fill="DarkGray" Height="200" Width="200" Grid.Row="2" Grid.Column="1" Stroke="Black" VerticalAlignment="Center" HorizontalAlignment="Center" />
    <Ellipse Fill="DarkGray" Height="200" Width="200" Grid.Row="2" Grid.Column="2" Stroke="Black" VerticalAlignment="Center" HorizontalAlignment="Center" />
    <TextBlock Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center"  HorizontalAlignment="Center"/>
    <TextBlock Grid.Column="1" Grid.Row="2" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center"  HorizontalAlignment="Center"/>
    <TextBlock Grid.Column="2" Grid.Row="2" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center"  HorizontalAlignment="Center"/>

</Grid>

Answer 1

为此使用 ViewBox。例如，将 3rd Ellipse 替换为以下代码。它将 grows/shrinks 与包含的网格。

<Viewbox Grid.Row="2" Grid.Column="2">
    <Ellipse Fill="DarkGray" Height="200" Width="200" Stroke="Black" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Viewbox>

XAML 椭圆相对大小

XAML Ellipse relative size

c#

xaml