文章/答案/技术大牛

发布

问GridExtra子元素Z-索引
EN

Stack Overflow用户

提问于 2019-07-08 07:53:33

回答 2查看 81关注 0票数 5

在我的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.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索引来实现它，但它对我没有作用。我不知道这是否是由网格额外引起的，但是使用网格额外是一个约束，我不能松手。因此，我需要的是一个解决方案，以获得所需的结果使用网格额外。提前谢谢。

关于这里.的详细信息可以查看 GridExtra

wpf

gridextra

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-07-08 09:08:32

Z索引用于控制组件中处于同一级别的元素的顺序。如你所述：

正如您接下来所看到的，我将两者都包装在一个容器面板中，并将禁用的控件隐藏起来，直到使用网格和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作为disabler面板，同时可以使用您想要的组件。

上述产出如下：

另外，请注意，这是建议的解决方案之一，您可以完全制定自己的策略，但必须记住，Z索引只适用于兄弟姐妹。

票数 1

Stack Overflow用户

发布于 2019-07-08 09:40:06

最后，我将禁用组件用作层次结构的同级，如下所示：

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

虽然在上面的答案中使用了大量的方法，但为了向其他人澄清想法，还添加了它。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56930542

复制

相似问题

问GridExtra子元素Z-索引
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问GridExtra子元素Z-索引EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问GridExtra子元素Z-索引
EN