WPF Toolkit BusyIndicator被LiveCharts遮挡如何调整至顶层？

问题原因 #

WPF的Grid面板中，子元素的层级由声明顺序决定，先声明的元素层级更低，后声明的元素会覆盖在先声明元素上方。你当前的代码先声明了xctk:BusyIndicator，后声明了包含LiveCharts图表的Grid，因此图表会遮挡BusyIndicator。

方案1：调整元素声明顺序（推荐） #

把BusyIndicator移到Grid的最后一个子元素位置，即可自然获得最高层级，修正后的XAML如下：

<UserControl>
    <Grid>
        <!-- 先声明图表所在Grid，层级靠下 -->
        <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>
        <!-- 最后声明BusyIndicator，层级最高，覆盖在所有元素上方 -->
        <xctk:BusyIndicator IsBusy="true"/>
    </Grid>
</UserControl>

方案2：显式设置ZIndex属性 #

如果不想调整元素顺序，可以给BusyIndicator设置Panel.ZIndex附加属性，ZIndex值越大层级越高，设置示例如下：

<xctk:BusyIndicator IsBusy="true" Panel.ZIndex="999"/>

补充说明 #

如果BusyIndicator没有完全覆盖图表，可检查以下两个属性是否为默认值，确保控件占满父Grid的全部空间，实现完整的遮罩效果：

• HorizontalAlignment="Stretch"
• VerticalAlignment="Stretch"

内容的提问来源于stack exchange，提问作者patrickgc