CODEWITHSUNDEEP
c#xaml
Nomistake
Nomistake

Reputation: 863

XAML Ellipse relative size

I want to make the size of an ellipse relative to its holding grids Column and Row size.

So, the size of the ellipses should change relative to the size of the page (device) of the given hardware..

Something like 'Inherit' from css.

Is this possible?

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

Upvotes: 0

Views: 838

Answers (1)

kennyzx
kennyzx

Reputation: 12993

Use ViewBox for this purpose. For example, replace the 3rd Ellipse with the following code. It will grows/shrinks with the containing Grid.

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

Upvotes: 2

Related Questions