Question

So I have a following XAML code:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="214" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="42" />
    </Grid.RowDefinitions>

    <toolkit:BusyIndicator IsBusy="False" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <StackPanel Grid.Column="0" Grid.Row="0">
            <!-- ... -->
        </StackPanel>
        <Canvas Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <!-- ... -->
        </Canvas>
    </toolkit:BusyIndicator>
    <TextBlock Grid.Row="1" Grid.ColumnSpan="2" />
</Grid>

The idea is to have BusyIndicator to cover both cells in the first row and leave second row as is. But XAML editor in Visual Studio underlines <Canvas> and says: “The property ‘Content’ is set more than once.”

How to overcome this?

Answer 1

You’re getting the error about ‘Content’ being set more than once because a BusyIndicator is a ContentControl and can only have at most one child.

What you can do instead is put the BusyIndicator inside the grid as siblings of your StackPanel and Canvas. To ensure that it appears above the other controls in the top row when it is busy, use the property Canvas.ZIndex. This needs to have a higher Z-index than any controls within your stackpanel and canvas. (If you’re not using Z-indexes in your stackpanel and canvas, 1 will do, as in the example below.)

<Grid>
    <!-- ... -->
    <toolkit:BusyIndicator IsBusy="False" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Canvas.ZIndex="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/ >
    <StackPanel Grid.Column="0" Grid.Row="0">
        <!-- ... -->
    </StackPanel>
    <Canvas Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <!-- ... -->
    </Canvas>
    <TextBlock Grid.Row="1" Grid.ColumnSpan="2" />
</Grid>