c# - GridExtra 子元素 Z-index

Question

我在我的 WPF 应用程序中使用 grid extra 来设计各个响应式组件。我有如下 View :

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

Answer 1

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 仅适用于 sibling 。