GridExtra 子元素 Z-index
GridExtra Child Element Z-index
我在我的 WPF 应用程序中使用额外的网格来设计单独的响应组件。我有如下视图：
<UserControl x:Class="..."
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:..."
mc:Ignorable="d"
xmlns:ge="clr-namespace:SourceChord.GridExtra;assembly=GridExtra.Wpf">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="...">
</ResourceDictionary>
<ResourceDictionary Source="...">
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<UserControl.Width>
<StaticResource ResourceKey="ApplicationWidth" />
</UserControl.Width>
<Grid Style="{StaticResource SelectContainer}"
ge:GridEx.RowDefinition="1*, 3*"
ge:GridEx.TemplateArea="Message/ Companies/">
<Grid ge:GridEx.AreaName="Message"
ge:GridEx.RowDefinition="*"
ge:GridEx.ColumnDefinition="*,*"
ge:GridEx.TemplateArea="L1 L2/"
>
<TextBlock Text="{Binding Path=MessageL1Text}" Style="{StaticResource MessageTextStyle}" ge:GridEx.AreaName="L1"/>
<TextBlock Text="{Binding Path=MessageL2Text}" Style="{StaticResource MessageTextUrduStyle}" ge:GridEx.AreaName="L2"/>
</Grid>
<Grid ge:GridEx.AreaName="Companies"
ge:GridEx.RowDefinition="*"
ge:GridEx.ColumnDefinition="1*,1.5*,1.5*,1.5*,1.5*,1.5*,1.5*,1*"
ge:GridEx.TemplateArea="MarginLeft Company1 Company2 Company3 Company4 Company5 More MarginRight/">
<Grid ge:GridEx.AreaName="MarginLeft"></Grid>
<Grid ge:GridEx.AreaName="MarginRight"></Grid>
<Grid ge:GridEx.AreaName="Company1" Style="{StaticResource CompanyButtonOneStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyOne.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyOneClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyOne.IsVisible}" IsEnabled="{Binding Path=CompanyOne.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company2" Style="{StaticResource CompanyButtonTwoStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyTwo.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyTwoClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyTwo.IsVisible}" IsEnabled="{Binding Path=CompanyTwo.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company3" Style="{StaticResource CompanyButtonThreeStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyThree.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyThreeClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyThree.IsVisible}" IsEnabled="{Binding Path=CompanyThree.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company4" Style="{StaticResource CompanyButtonFourStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyFour.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyFourClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyFour.IsVisible}" IsEnabled="{Binding Path=CompanyFour.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company5" Style="{StaticResource CompanyButtonFiveStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyFive.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyFiveClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyFive.IsVisible}" IsEnabled="{Binding Path=CompanyFive.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="More" Style="{StaticResource MoreButtonStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=More.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=MoreClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=More.IsVisible}" IsEnabled="{Binding Path=More.IsActive}">
</Button>
</Grid>
</Grid>
</Grid>
接下来我需要的是带一个禁用面板来覆盖此用户控件，禁用所有控件并将 UI 变灰，例如：
<UserControl x:Class="..."
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:..."
mc:Ignorable="d"
xmlns:ge="clr-namespace:SourceChord.GridExtra;assembly=GridExtra.Wpf">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="...">
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid Style="{StaticResource DisableGridStyle}" Opacity="0.8" Background="Gray">
</Grid>
正如您接下来看到的，我将两者都包装在一个容器面板中，并将禁用的控件隐藏起来，直到我希望它使用 Grid 和 Grid.Zindex 以某种方式出现在实际面板的顶部，就像在中解释的那样this 回答。
我试过了，效果很好。
那么现在让我们继续我的实际要求，即调出实际面板的子组件之一，在顶部说以下内容，同时将其他组件放在禁用的后面面板；
<Grid ge:GridEx.AreaName="Company1" Style="{StaticResource CompanyButtonOneStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyOne.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyOneClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyOne.IsVisible}" IsEnabled="{Binding Path=CompanyOne.IsActive}">
</Button>
</Grid>
我试图通过调整上述组件的 Z-index 来实现，但它对我不起作用。我不知道这是否是由 grid extra 引起的，但是 使用 grid extra 是一个我不能放手的约束。因此，我需要的是使用 grid extra 获得所需结果的解决方案。提前致谢。
关于GridExtra的注意详情可以查看here.
Z 索引用于控制组件层次结构中同一级别的元素的顺序。根据您的说法：
As you can see next I wrap both in a container Panel and will keep the disabled control hidden till I want it to appear on top of the actual panel using Grid and Grid.Zindex
我相信这样做，您所需的组件与禁用面板不在同一级别，并且无法使用 Z-Index.
将其调出
我能想到的另一种解决方案是使用多个具有相同属性的禁用面板，并在您希望送回或放在前面的组件的同一兄弟级使用一个。
例如考虑以下代码：
<Window x:Class="ZindexForVaryingChildren.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:ZindexForVaryingChildren"
xmlns:ge="clr-namespace:SourceChord.GridExtra;assembly=GridExtra.Wpf"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid ge:GridEx.RowDefinition="*,*"
ge:GridEx.TemplateArea="R1/ R2/" Opacity="0.8" Background="Red">
<TextBlock Opacity="0.8" Background="Red" Grid.ZIndex="2" ge:GridEx.Area="0,0,2,2" HorizontalAlignment="Stretch"/>
<Grid ge:GridEx.AreaName="R1" Grid.ZIndex="1">
<TextBlock TextWrapping="Wrap" Text="Hello" FontSize="40"/>
</Grid>
<Grid ge:GridEx.AreaName="R2" Grid.ZIndex="3">
<TextBlock TextWrapping="Wrap" Text="Hello" FontSize="40"/>
</Grid>
</Grid>
在这里你甚至可以看到使用 GridExtra 我试图说明如何在将 R1 推到后面时将 R2 放在前面。还可以使用 TextBlock 作为禁用面板，同时您可以使用您想要的组件。
以上将产生如下输出：
另请注意，这是建议的解决方案之一，您完全可以制定自己的策略，但必须记住 Z-Index 仅适用于兄弟姐妹。
我最终将我的禁用组件用作层次结构的兄弟组件：
<UserControl x:Class="..."
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:..."
mc:Ignorable="d"
xmlns:ge="clr-namespace:SourceChord.GridExtra;assembly=GridExtra.Wpf">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="...">
</ResourceDictionary>
<ResourceDictionary Source="...">
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<UserControl.Width>
<StaticResource ResourceKey="ApplicationWidth" />
</UserControl.Width>
<Grid Style="{StaticResource NetworkSelectContainer}"
ge:GridEx.RowDefinition="1*, 3*"
ge:GridEx.TemplateArea="Message/ Companies/">
<Grid ge:GridEx.AreaName="Message"
ge:GridEx.RowDefinition="*"
ge:GridEx.ColumnDefinition="*,*"
ge:GridEx.TemplateArea="L1 L2/"
>
<local:DisablePanel Panel.ZIndex="3" ge:GridEx.Area="0,0,2,2" x:Name="DisableMessage"></local:DisablePanel>
<TextBlock Text="{Binding Path=MessageText}" Style="{StaticResource MessageTextStyle}" ge:GridEx.AreaName="L1"/>
<TextBlock Text="{Binding Path=MessageUrduText}" Style="{StaticResource MessageTextStyle}" ge:GridEx.AreaName="L2"/>
</Grid>
<Grid ge:GridEx.AreaName="Companies"
ge:GridEx.RowDefinition="*"
ge:GridEx.ColumnDefinition="1*,1.5*,1.5*,1.5*,1.5*,1.5*,1.5*,1*"
ge:GridEx.TemplateArea="MarginLeft Company1 Company2 Company3 Company4 Company5 More MarginRight/">
<local:DisablePanel ge:GridEx.Area="0,0,1,8" Panel.ZIndex="3" x:Name="DisableCompany"></local:DisablePanel>
<Grid ge:GridEx.AreaName="MarginLeft"></Grid>
<Grid ge:GridEx.AreaName="MarginRight"></Grid>
<Grid ge:GridEx.AreaName="Company1" Style="{StaticResource CompanyButtonOneStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyOne.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyOneClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyOne.IsVisible}" IsEnabled="{Binding Path=CompanyOne.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company2" Style="{StaticResource CompanyButtonTwoStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyTwo.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyTwoClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyTwo.IsVisible}" IsEnabled="{Binding Path=CompanyTwo.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company3" Style="{StaticResource CompanyButtonThreeStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyThree.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyThreeClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyThree.IsVisible}" IsEnabled="{Binding Path=CompanyThree.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company4" Style="{StaticResource CompanyButtonFourStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyFour.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyFourClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyFour.IsVisible}" IsEnabled="{Binding Path=CompanyFour.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company5" Style="{StaticResource CompanyButtonFiveStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyFive.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyFiveClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyFive.IsVisible}" IsEnabled="{Binding Path=CompanyFive.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="More" Style="{StaticResource MoreButtonStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=More.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=MoreClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=More.IsVisible}" IsEnabled="{Binding Path=More.IsActive}">
</Button>
</Grid>
</Grid>
</Grid>
虽然在上述答案中使用了大部分方法，但添加它是为了向其他人阐明想法。
我在我的 WPF 应用程序中使用额外的网格来设计单独的响应组件。我有如下视图：
<UserControl x:Class="..."
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:..."
mc:Ignorable="d"
xmlns:ge="clr-namespace:SourceChord.GridExtra;assembly=GridExtra.Wpf">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="...">
</ResourceDictionary>
<ResourceDictionary Source="...">
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<UserControl.Width>
<StaticResource ResourceKey="ApplicationWidth" />
</UserControl.Width>
<Grid Style="{StaticResource SelectContainer}"
ge:GridEx.RowDefinition="1*, 3*"
ge:GridEx.TemplateArea="Message/ Companies/">
<Grid ge:GridEx.AreaName="Message"
ge:GridEx.RowDefinition="*"
ge:GridEx.ColumnDefinition="*,*"
ge:GridEx.TemplateArea="L1 L2/"
>
<TextBlock Text="{Binding Path=MessageL1Text}" Style="{StaticResource MessageTextStyle}" ge:GridEx.AreaName="L1"/>
<TextBlock Text="{Binding Path=MessageL2Text}" Style="{StaticResource MessageTextUrduStyle}" ge:GridEx.AreaName="L2"/>
</Grid>
<Grid ge:GridEx.AreaName="Companies"
ge:GridEx.RowDefinition="*"
ge:GridEx.ColumnDefinition="1*,1.5*,1.5*,1.5*,1.5*,1.5*,1.5*,1*"
ge:GridEx.TemplateArea="MarginLeft Company1 Company2 Company3 Company4 Company5 More MarginRight/">
<Grid ge:GridEx.AreaName="MarginLeft"></Grid>
<Grid ge:GridEx.AreaName="MarginRight"></Grid>
<Grid ge:GridEx.AreaName="Company1" Style="{StaticResource CompanyButtonOneStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyOne.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyOneClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyOne.IsVisible}" IsEnabled="{Binding Path=CompanyOne.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company2" Style="{StaticResource CompanyButtonTwoStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyTwo.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyTwoClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyTwo.IsVisible}" IsEnabled="{Binding Path=CompanyTwo.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company3" Style="{StaticResource CompanyButtonThreeStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyThree.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyThreeClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyThree.IsVisible}" IsEnabled="{Binding Path=CompanyThree.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company4" Style="{StaticResource CompanyButtonFourStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyFour.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyFourClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyFour.IsVisible}" IsEnabled="{Binding Path=CompanyFour.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company5" Style="{StaticResource CompanyButtonFiveStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyFive.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyFiveClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyFive.IsVisible}" IsEnabled="{Binding Path=CompanyFive.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="More" Style="{StaticResource MoreButtonStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=More.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=MoreClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=More.IsVisible}" IsEnabled="{Binding Path=More.IsActive}">
</Button>
</Grid>
</Grid>
</Grid>
接下来我需要的是带一个禁用面板来覆盖此用户控件，禁用所有控件并将 UI 变灰，例如：
<UserControl x:Class="..."
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:..."
mc:Ignorable="d"
xmlns:ge="clr-namespace:SourceChord.GridExtra;assembly=GridExtra.Wpf">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="...">
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid Style="{StaticResource DisableGridStyle}" Opacity="0.8" Background="Gray">
</Grid>
正如您接下来看到的，我将两者都包装在一个容器面板中，并将禁用的控件隐藏起来，直到我希望它使用 Grid 和 Grid.Zindex 以某种方式出现在实际面板的顶部，就像在中解释的那样this 回答。
我试过了，效果很好。
那么现在让我们继续我的实际要求，即调出实际面板的子组件之一，在顶部说以下内容，同时将其他组件放在禁用的后面面板；
<Grid ge:GridEx.AreaName="Company1" Style="{StaticResource CompanyButtonOneStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyOne.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyOneClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyOne.IsVisible}" IsEnabled="{Binding Path=CompanyOne.IsActive}">
</Button>
</Grid>
我试图通过调整上述组件的 Z-index 来实现，但它对我不起作用。我不知道这是否是由 grid extra 引起的，但是 使用 grid extra 是一个我不能放手的约束。因此，我需要的是使用 grid extra 获得所需结果的解决方案。提前致谢。
关于GridExtra的注意详情可以查看here.
Z 索引用于控制组件层次结构中同一级别的元素的顺序。根据您的说法：
As you can see next I wrap both in a container Panel and will keep the disabled control hidden till I want it to appear on top of the actual panel using Grid and Grid.Zindex
我相信这样做，您所需的组件与禁用面板不在同一级别，并且无法使用 Z-Index.
将其调出我能想到的另一种解决方案是使用多个具有相同属性的禁用面板，并在您希望送回或放在前面的组件的同一兄弟级使用一个。
例如考虑以下代码：
<Window x:Class="ZindexForVaryingChildren.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:ZindexForVaryingChildren"
xmlns:ge="clr-namespace:SourceChord.GridExtra;assembly=GridExtra.Wpf"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid ge:GridEx.RowDefinition="*,*"
ge:GridEx.TemplateArea="R1/ R2/" Opacity="0.8" Background="Red">
<TextBlock Opacity="0.8" Background="Red" Grid.ZIndex="2" ge:GridEx.Area="0,0,2,2" HorizontalAlignment="Stretch"/>
<Grid ge:GridEx.AreaName="R1" Grid.ZIndex="1">
<TextBlock TextWrapping="Wrap" Text="Hello" FontSize="40"/>
</Grid>
<Grid ge:GridEx.AreaName="R2" Grid.ZIndex="3">
<TextBlock TextWrapping="Wrap" Text="Hello" FontSize="40"/>
</Grid>
</Grid>
在这里你甚至可以看到使用 GridExtra 我试图说明如何在将 R1 推到后面时将 R2 放在前面。还可以使用 TextBlock 作为禁用面板，同时您可以使用您想要的组件。
以上将产生如下输出：
另请注意，这是建议的解决方案之一，您完全可以制定自己的策略，但必须记住 Z-Index 仅适用于兄弟姐妹。
我最终将我的禁用组件用作层次结构的兄弟组件：
<UserControl x:Class="..."
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:..."
mc:Ignorable="d"
xmlns:ge="clr-namespace:SourceChord.GridExtra;assembly=GridExtra.Wpf">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="...">
</ResourceDictionary>
<ResourceDictionary Source="...">
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<UserControl.Width>
<StaticResource ResourceKey="ApplicationWidth" />
</UserControl.Width>
<Grid Style="{StaticResource NetworkSelectContainer}"
ge:GridEx.RowDefinition="1*, 3*"
ge:GridEx.TemplateArea="Message/ Companies/">
<Grid ge:GridEx.AreaName="Message"
ge:GridEx.RowDefinition="*"
ge:GridEx.ColumnDefinition="*,*"
ge:GridEx.TemplateArea="L1 L2/"
>
<local:DisablePanel Panel.ZIndex="3" ge:GridEx.Area="0,0,2,2" x:Name="DisableMessage"></local:DisablePanel>
<TextBlock Text="{Binding Path=MessageText}" Style="{StaticResource MessageTextStyle}" ge:GridEx.AreaName="L1"/>
<TextBlock Text="{Binding Path=MessageUrduText}" Style="{StaticResource MessageTextStyle}" ge:GridEx.AreaName="L2"/>
</Grid>
<Grid ge:GridEx.AreaName="Companies"
ge:GridEx.RowDefinition="*"
ge:GridEx.ColumnDefinition="1*,1.5*,1.5*,1.5*,1.5*,1.5*,1.5*,1*"
ge:GridEx.TemplateArea="MarginLeft Company1 Company2 Company3 Company4 Company5 More MarginRight/">
<local:DisablePanel ge:GridEx.Area="0,0,1,8" Panel.ZIndex="3" x:Name="DisableCompany"></local:DisablePanel>
<Grid ge:GridEx.AreaName="MarginLeft"></Grid>
<Grid ge:GridEx.AreaName="MarginRight"></Grid>
<Grid ge:GridEx.AreaName="Company1" Style="{StaticResource CompanyButtonOneStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyOne.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyOneClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyOne.IsVisible}" IsEnabled="{Binding Path=CompanyOne.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company2" Style="{StaticResource CompanyButtonTwoStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyTwo.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyTwoClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyTwo.IsVisible}" IsEnabled="{Binding Path=CompanyTwo.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company3" Style="{StaticResource CompanyButtonThreeStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyThree.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyThreeClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyThree.IsVisible}" IsEnabled="{Binding Path=CompanyThree.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company4" Style="{StaticResource CompanyButtonFourStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyFour.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyFourClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyFour.IsVisible}" IsEnabled="{Binding Path=CompanyFour.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="Company5" Style="{StaticResource CompanyButtonFiveStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=CompanyFive.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=CompanyFiveClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=CompanyFive.IsVisible}" IsEnabled="{Binding Path=CompanyFive.IsActive}">
</Button>
</Grid>
<Grid ge:GridEx.AreaName="More" Style="{StaticResource MoreButtonStyle}">
<Grid.Resources>
<ImageBrush x:Key="AddButtonImageBrush" ImageSource="{Binding Path=More.ButtonImagePath}" Stretch="Uniform"/>
</Grid.Resources>
<Button Command="{Binding Path=MoreClick}" Height="Auto" Width="Auto" Background="{StaticResource AddButtonImageBrush}" Style="{StaticResource CompanyButton}" Visibility="{Binding Path=More.IsVisible}" IsEnabled="{Binding Path=More.IsActive}">
</Button>
</Grid>
</Grid>
</Grid>
虽然在上述答案中使用了大部分方法，但添加它是为了向其他人阐明想法。