如何在WPF中制作側邊欄

我遇到了一個問題，我試圖在 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 collum-->
            <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>

uj5u.com熱心網友回復：

對于您的第二個子網格，添加以下內容：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 collum-->
        <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>

編輯：添加修改后的代碼以獲得更好的解釋。

標籤：C＃ 小白 xml

上一篇：如何在子類方法中使用父類變數名

下一篇：在這里，當我按下一個有效的空格時，我試圖更改DirectionX的值，但我必須多次按下才能更改