GridExtra Z-index для дочерних элементов

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-индекс для указанного компонента, но у меня это не сработало.Я не знаю, вызвано ли это дополнительной сеткой, но использование дополнительной сетки - это ограничение , которое я не могу отпустить.Таким образом, мне нужно решение, чтобы получить требуемые результаты, используя дополнительные сетки.Заранее спасибо.

Примечание: подробности о GridExtra можно посмотреть здесь .

Answer 1

Я закончил тем, что использовал свой отключающий компонент в качестве родственного элемента иерархии как:

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

Хотя я использовал большую часть подхода в ответе выше, но добавил его для пояснения идеи кдр.

Answer 2

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. Я попытался проиллюстрировать, как вы можете вывести R2 вперед, когда толкаете R1 назад. Также, используя TextBlock в качестве панели блокировки, вы можете использовать компонент, который вам нужен.

Приведенное выше даст следующий результат:

Также обратите внимание, что это одно из предложенных решений, вы можете полностью разработать собственную стратегию, но имейте в виду, что Z-Index работает только для братьев и сестер.