时间戳

首页 > 解决方案 > 如何在 WPF 中制作侧边栏

c# - 如何在 WPF 中制作侧边栏

问题描述

我遇到了一个问题，我试图在 WPF 中创建一个侧边栏。我已经为它制作了网格区域，它似乎存在但是当我尝试在其上放置标签时，标签似乎隐藏在网格后面。我尝试使用 z-index 不占优势，但是如果我使用边距将文本移动到表单的顶部，那么它就会出现。

1

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.

2

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="╳&quot; 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>

标签： c#wpfxaml

解决方案

对于您的第二个子网格，请添加： 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="╳&quot; 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>

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

推荐阅读