如何在WPF中制作侧边栏

Question

我在尝试在 WPF 中制作边栏时遇到了问题。我已经为它制作了网格区域，它似乎存在，但是当我尝试在其上放置标签时，标签似乎隐藏在网格后面。我尝试使用 z-index 没有成功，但是如果我使用边距将文本移动到表单顶部，它就会出现。

Red - The top of the form and where the form name is. (This is how the top is supposed to look
Orange - The left size is where the side bar is meant to be and the right is where messages will be shown.

Grey - By using a margin and moving the text up you can see that is displayed at the top where the name of the form
should be.
This is **not** how its supposed and should be where the
yellow is however it shows that if anything goes where the yellow is then
it is covered by the gray area as if it has a higher z-index.

我的xaml在下面

<Window x:Class="CrackleChat.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:CrackleChat" xmlns:viewmodel="clr-namespace:CrackleChat.MVVM.ViewModel"
        mc:Ignorable="d"
        Height="650" Width="1200" Icon="/Icon.png"
        Background="#36393F"
        WindowStyle="None"
        AllowsTransparency="True"
        ResizeMode="CanResizeWithGrip">

    <Window.DataContext>
        <viewmodel:MainViewModel></viewmodel:MainViewModel>
    </Window.DataContext>

    <Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="25">

            </RowDefinition>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200">

            </ColumnDefinition>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Border Grid.ColumnSpan="2" Background="#252525" MouseDown="Border_MouseDown" Panel.ZIndex="1">

            <Grid HorizontalAlignment="Stretch">
                <Label Content="Crackle Chat" Foreground="Gray" FontWeight="SemiBold"/>

                <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">

                    <Button Width="20" Height="20" Content="" Background="Transparent"
                            BorderThickness="0" Foreground="Gray" FontWeight="Bold" Margin="0,0,0,3"
                            Click="Button_Minimize_Click"></Button>

                    <Button Width="20" Height="20" Content="" Background="Transparent"
                            BorderThickness="0" Foreground="Gray" FontWeight="Bold"
                            Click="Button_Maximize_Click"></Button>

                    <Button Width="20" Height="20" Content="╳" Background="Transparent"
                            BorderThickness="0" Foreground="Gray" FontWeight="Bold"
                            Click="Button_Exit_Click"></Button>


                </StackPanel>
            </Grid>

        </Border>

        <Grid Background="#2F3136">
            <!--This is the left hand column-->
            <Grid.RowDefinitions>
                <RowDefinition Height="25"></RowDefinition>
                <RowDefinition Height="0*"/>
            </Grid.RowDefinitions>

            <ListView ItemsSource="{Binding Contacts}" Background="Transparent" BorderThickness="0"
                      Grid.Row="1" ItemContainerStyle="{StaticResource ContactCard}"></ListView>

        </Grid>
        <Label Panel.ZIndex="5" Content="Contacts" VerticalAlignment="Top" FontWeight="Medium" Foreground="Gray" Height="26" Margin="0,25,0,0"/>

    </Grid>
</Window>

Answer 1

对于你的第二个子网格添加：Grid.Row = "1" 否则两个网格都在同一行（此处适用基于 0 的索引）

<Grid>

    <Grid.RowDefinitions>
        <RowDefinition Height="25"/>

        <RowDefinition Height="*"/> <!--This is your second row-->
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200">

        </ColumnDefinition>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <Border Grid.ColumnSpan="2" Background="#252525" MouseDown="Border_MouseDown" Panel.ZIndex="1">

        <Grid HorizontalAlignment="Stretch">
            <Label Content="Crackle Chat" Foreground="Gray" FontWeight="SemiBold"/>

            <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">

                <Button Width="20" Height="20" Content="" Background="Transparent"
                        BorderThickness="0" Foreground="Gray" FontWeight="Bold" Margin="0,0,0,3"
                        Click="Button_Minimize_Click"></Button>

                <Button Width="20" Height="20" Content="" Background="Transparent"
                        BorderThickness="0" Foreground="Gray" FontWeight="Bold"
                        Click="Button_Maximize_Click"></Button>

                <Button Width="20" Height="20" Content="╳" Background="Transparent"
                        BorderThickness="0" Foreground="Gray" FontWeight="Bold"
                        Click="Button_Exit_Click"></Button>


            </StackPanel>
        </Grid>

    </Border>

    <Grid Background="#2F3136" Grid.Row="1"> <!--This goes to the second row-->
        <!--This is the left hand column-->
        <Grid.RowDefinitions>
            <RowDefinition Height="25"></RowDefinition>
            <RowDefinition Height="0*"/>
        </Grid.RowDefinitions>

        <ListView ItemsSource="{Binding Contacts}" Background="Transparent" BorderThickness="0"
                  Grid.Row="1" ItemContainerStyle="{StaticResource ContactCard}"></ListView>

    </Grid>
    <Label Panel.ZIndex="5" Content="Contacts" VerticalAlignment="Top" FontWeight="Medium" Foreground="Gray" Height="26" Margin="0,25,0,0"/>

</Grid>

编辑：添加修改后的代码以获得更好的解释。

如何在WPF中制作侧边栏

how to make a side bar in WPF

c#

wpf

xaml