C# GridExtra子元素Z索引

我已经使用grid extra在我的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显示在实际面板的顶部，就像在回答中解释的那样

我试过了，效果很好。

现在，让我们转到我的实际要求，这是将实际面板的一个子组件置于顶部，同时将其他子组件置于残疾人面板后面

<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-索引来实现这一点，但对我来说不起作用。我不知道这是否是由grid extra造成的，但是使用grid extra是一个我无法放弃的约束。因此，我需要的是一个使用grid extra获得所需结果的解决方案。提前谢谢

---

注意：可以查看GridExtra的详细信息。Z索引用于控制组件继承权中处于同一级别的元素的顺序。根据你的陈述：

正如您接下来看到的，我将这两个控件包装在一个容器面板中，并将隐藏禁用的控件，直到我希望它使用Grid和Grid.Zindex显示在实际面板的顶部

我相信这样做，您所需的组件与禁用面板不在同一级别，并且不可能使用Z索引将其显示出来

我可以想到的另一种解决方案是，使用多个具有相同属性的禁用面板，并在希望发送回或带到前面的组件的相同同级级别使用一个

作为例子，考虑下面的代码：

<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>

---

虽然在上面的答案中使用了很多方法，但添加这些方法是为了向其他人阐明想法。

我遵循了你在我的答案中建议的方法。