GridExtra子元素Z索引

Question

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

接下来，我需要打开一个禁用面板以对该用户控件进行泛洪，以禁用所有控件并使界面变灰，例如：

<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-index来做到这一点，但是它对我不起作用。我不知道这是否由多余的网格引起，但是使用多余的网格是我不能放过的约束。因此，我需要的是一种使用网格额外功能获得所需结果的解决方案。提前致谢。

可以在此处查看有关GridExtra的详细信息。

Answer 1

Z 索引用于控制组件层次结构中同一级别的元素的顺序。根据你的说法：

正如您接下来所看到的，我将两者都包装在容器面板中，并将禁用的控件隐藏起来，直到我希望它使用 Grid 和 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 仅适用于兄弟姐妹。