StackPanel ZIndex не работает

Question

Я хочу добиться чего-то подобного, где есть видимая граница (слева от «Сводка рынка») по вертикали.

У меня есть сетка, два столбца (левая часть = изображение, имя, адрес электронной почты), список) и правая часть все остальное).Я попытался показать эту границу, перенеся панель StackPanel, которая находится в левой колонке, на передний план с помощью Panel.Zindex, но это ничего не дало.

    <StackPanel Panel.ZIndex="1"  Grid.Column="0">

        <materialDesign:ColorZone  Height="100"  Mode="PrimaryMid">
            <Border  Padding="8">
                <StackPanel>
                    <Ellipse HorizontalAlignment="Left" VerticalAlignment="Top" Width="48" Height="48" RenderTransformOrigin="-0.014,0.003" Margin="0,0,104,0">
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="RandomPic.jpg" />
                        </Ellipse.Fill>
                    </Ellipse>

                    <TextBlock Text="UsernameX" ></TextBlock>
                    <TextBlock Text="EmailY" ></TextBlock>
                </StackPanel>
            </Border>

        </materialDesign:ColorZone>


        <ListBox  Background="#FAFAFA"  x:Name="DemoItemsListBox">
            <ListBox.Items>
                <TextBlock> What's going on</TextBlock>
                <TextBlock>What's going on</TextBlock>
                <TextBlock>What's going on</TextBlock>
                <TextBlock>What's going on</TextBlock>
            </ListBox.Items>

        </ListBox>

    </StackPanel>


    <StackPanel  Panel.ZIndex="0"   Grid.Column="1">

        <materialDesign:ColorZone Panel.ZIndex="0"    Height="60" Mode="PrimaryMid" />
        <!--
        <dragablz:TabablzControl BorderBrush="#4CAF50" BorderThickness="0" Height="56" >

            <TabItem  Header="                 Ordre de mission                " IsSelected="True">
                <TextBlock><Run Text="Hello World"/></TextBlock>
            </TabItem>
            <TabItem Header="Tab No. 2">
                <TextBlock><Run Text="We Have Tearable Tabs!"/></TextBlock>
            </TabItem>


       </dragablz:TabablzControl>
-->

 <ContentControl></ContentControl>

    </StackPanel>

Answer 1

Стеклянная панель WPF не имеет границы, поэтому ее перенос на передний план не приведет к ее появлению.

Вы должны добавить свою собственную либо позади нее в том же столбце сетки, либо рядом с ней.это, вставив тонкий столбец и поместив в него элемент управления Border или Separator.Если вы поместите его в тот же столбец, вам может понадобиться отрегулировать поле StackPanel, чтобы оно не закрывало границу.

т.е.

<Border Grid.Column="0" BorderThickness="0,0,1,0" BorderBrush="Gray"/>
<StackPanel Grid.Column="0" Margin="0,0,2,0">

    <materialDesign:ColorZone  Height="100"  Mode="PrimaryMid">
        <Border  Padding="8">
            <StackPanel>
                <Ellipse HorizontalAlignment="Left" VerticalAlignment="Top" Width="48" Height="48" RenderTransformOrigin="-0.014,0.003" Margin="0,0,104,0">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="RandomPic.jpg" />
                    </Ellipse.Fill>
                </Ellipse>

                <TextBlock Text="UsernameX" ></TextBlock>
                <TextBlock Text="EmailY" ></TextBlock>
            </StackPanel>
        </Border>

    </materialDesign:ColorZone>


    <ListBox  Background="#FAFAFA"  x:Name="DemoItemsListBox">
        <ListBox.Items>
            <TextBlock> What's going on</TextBlock>
            <TextBlock>What's going on</TextBlock>
            <TextBlock>What's going on</TextBlock>
            <TextBlock>What's going on</TextBlock>
        </ListBox.Items>

    </ListBox>

</StackPanel>