#406 – Creating New Controls by Layering One on Top of Another

Because you can place more than one control in the same cell of a Grid, you can overlay multiple controls in order to create a new control.

As an example, assume that you want to add a Label to a ProgressBar, showing the current progress of some operation.  We can do this by placing a Label and a ProgressBar into the same cell of a Grid.

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <!-- ProgressBar and Label overlayed, both in 1st row -->
        <ProgressBar Grid.Row="0" Value="{Binding Progress, Mode=OneWay}" Margin="5"/>
        <Label Grid.Row="0" Content="{Binding ProgressLabel}" HorizontalContentAlignment="Center" Margin="5"/>

        <Button Grid.Row="1" Content="Click to Start Progress" Click="StartTimer" Margin="5"/>
    </Grid>