WPF Toolkit BusyIndicator with LiveCharts - Indicator is overlapped by the chart

Question

I use the BusyIndicator from the WPF Toolkit together with LiveCharts. Unfortunately the chart overlaps the BusyIndicator. Is there any possibility to bring the BusyIndicator to the top level? Below is my XAML code and an image.

<UserControl>
    <Grid>
        <xctk:BusyIndicator IsBusy="true"/>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <lvc:CartesianChart Grid.Row="0" Series="{Binding SeriesCollection}" Visibility="{Binding IsVisible, Converter={StaticResource BoolToVisibility}}" LegendLocation="Bottom" Margin="15,20,15,0" MinHeight="200" VerticalContentAlignment="Stretch" VerticalAlignment="Stretch" Height="AUTO">
            <lvc:CartesianChart.AxisY>
                <lvc:Axis Foreground="Black" Title="Temperature">
                    <lvc:Axis.Separator>
                        <lvc:Separator Stroke="Transparent" Step="5"/>
                    </lvc:Axis.Separator>
                </lvc:Axis>
                <lvc:Axis Foreground="Black" Title="Level" Position="RightTop">
                    <lvc:Axis.Separator>
                        <lvc:Separator Stroke="LightGray" Step="10"/>
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisY>
            <lvc:CartesianChart.AxisX>
                <lvc:Axis Foreground="Black" Labels="{Binding Labels}" LabelsRotation="0">
                    <lvc:Axis.Separator>
                        <lvc:Separator Stroke="LightGray" Step="{Binding Seperator.Step}"/>
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisX>
            <lvc:CartesianChart.ChartLegend>
                <lvc:DefaultLegend BulletSize="5" Margin="10" Background="Red"/>
            </lvc:CartesianChart.ChartLegend>
        </lvc:CartesianChart>
    </Grid>
    </Grid>
</UserControl>

Answer 1

Use a single Grid where is the BusyIndicator is the last child:

<UserControl>
    <Grid>
        <lvc:CartesianChart Grid.Row="0" Series="{Binding SeriesCollection}" Visibility="{Binding IsVisible, Converter={StaticResource BoolToVisibility}}" LegendLocation="Bottom" Margin="15,20,15,0" MinHeight="200" VerticalContentAlignment="Stretch" VerticalAlignment="Stretch" Height="AUTO">
            <lvc:CartesianChart.AxisY>
                <lvc:Axis Foreground="Black" Title="Temperature">
                    <lvc:Axis.Separator>
                        <lvc:Separator Stroke="Transparent" Step="5"/>
                    </lvc:Axis.Separator>
                </lvc:Axis>
                <lvc:Axis Foreground="Black" Title="Level" Position="RightTop">
                    <lvc:Axis.Separator>
                        <lvc:Separator Stroke="LightGray" Step="10"/>
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisY>
            <lvc:CartesianChart.AxisX>
                <lvc:Axis Foreground="Black" Labels="{Binding Labels}" LabelsRotation="0">
                    <lvc:Axis.Separator>
                        <lvc:Separator Stroke="LightGray" Step="{Binding Seperator.Step}"/>
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisX>
            <lvc:CartesianChart.ChartLegend>
                <lvc:DefaultLegend BulletSize="5" Margin="10" Background="Red"/>
            </lvc:CartesianChart.ChartLegend>
        </lvc:CartesianChart>
        <xctk:BusyIndicator IsBusy="true"/>
    </Grid>
</UserControl>

Answer 2

Declare the indicator at the bottom, after the chart, not at the top. Put it immediately after the nested grid that contains the chart. That will put it above the chart in the Z-order