How to make two child occupy 100% and 20% of parent grid?

110 views Asked by At

I have a grid with 2 rows. and I want to place a rectangle to take 100% of grid height and a text box to be placed outside the grid(overflow).

My XAML Code:

            <Grid.RowDefinitions>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>

            </Grid.RowDefinitions>

            <Rectangle Grid.Row="0" Height="{Binding Height, ElementName=AppServer}">
                <Rectangle.Fill>
                    <ImageBrush ImageSource="/Images/Server_Base.png"/>
                </Rectangle.Fill>

            </Rectangle>
            <Label ClipToBounds="False" Grid.Row="1"  Width="Auto"  HorizontalContentAlignment="Right" VerticalContentAlignment="Bottom"  Background="Transparent" >
                <AccessText TextWrapping="Wrap">App</AccessText>
            </Label>

        </Grid>

Output:

Expected:

1

There are 1 answers

0
pushpraj On BEST ANSWER

as a simple workaround you may use below

<Grid>
    <Rectangle>
        <Rectangle.Fill>
            <ImageBrush ImageSource="/Images/Server_Base.png" />
        </Rectangle.Fill>
    </Rectangle>
    <Canvas VerticalAlignment="Bottom">
        <Label ClipToBounds="False"
               Canvas.Right="0"
               Width="Auto"
               Background="Transparent">
            <AccessText TextWrapping="Wrap">App</AccessText>
        </Label>
    </Canvas>
</Grid>