如何在 WPF 中制作侧边栏

Posted 2023-04-12

【中文标题】如何在 WPF 中制作侧边栏

【英文标题】：how to make a side bar in WPF

【发布时间】：2021-12-15 14:00:58

【问题描述】：

我遇到了一个问题，我试图在 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>

【问题讨论】：

在您的主网格中，您有一行完全由跨越两列的边框填充，左列中的另一个网格重叠。也许您应该在纸上制作所需的布局并在 xaml 中进行相应的翻译。重叠元素只有在一次只有一个可见时才有意义。而且我从来不需要更改 Z-Order，只需要更改可见性。

【参考方案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>

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

【讨论】：

主网格中没有第二行

编辑了我的答案，使其包含第二行并将您的内容放在它的位置。