как сделать боковую панель в WPF

ProgramBox

как сделать боковую панель в WPF

Post author:admin
Запись опубликована:6 января, 2022
Post category:Вопросы по программированию

#c# #wpf #xaml

Вопрос:

Я столкнулся с проблемой, когда я пытаюсь создать боковую панель в WPF. Я сделал для него область сетки, и она, кажется, существует, однако, когда я пытаюсь нанести на нее метку, метка, кажется, скрыта за сеткой. Я попытался использовать z-индекс, но безрезультатно, однако, если я использую поле для перемещения текста в верхнюю часть формы, он появится.

 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 ниже

 lt;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"gt;   lt;Window.DataContextgt;  lt;viewmodel:MainViewModelgt;lt;/viewmodel:MainViewModelgt;  lt;/Window.DataContextgt;   lt;Gridgt;   lt;Grid.RowDefinitionsgt;  lt;RowDefinition Height="25"gt;   lt;/RowDefinitiongt;  lt;/Grid.RowDefinitionsgt;   lt;Grid.ColumnDefinitionsgt;  lt;ColumnDefinition Width="200"gt;   lt;/ColumnDefinitiongt;  lt;ColumnDefinition/gt;  lt;/Grid.ColumnDefinitionsgt;   lt;Border Grid.ColumnSpan="2" Background="#252525" MouseDown="Border_MouseDown" Panel.ZIndex="1"gt;   lt;Grid HorizontalAlignment="Stretch"gt;  lt;Label Content="Crackle Chat" Foreground="Gray" FontWeight="SemiBold"/gt;   lt;StackPanel HorizontalAlignment="Right" Orientation="Horizontal"gt;   lt;Button Width="20" Height="20" Content="🗕" Background="Transparent"  BorderThickness="0" Foreground="Gray" FontWeight="Bold" Margin="0,0,0,3"  Click="Button_Minimize_Click"gt;lt;/Buttongt;   lt;Button Width="20" Height="20" Content="🗖" Background="Transparent"  BorderThickness="0" Foreground="Gray" FontWeight="Bold"  Click="Button_Maximize_Click"gt;lt;/Buttongt;   lt;Button Width="20" Height="20" Content="╳" Background="Transparent"  BorderThickness="0" Foreground="Gray" FontWeight="Bold"  Click="Button_Exit_Click"gt;lt;/Buttongt;    lt;/StackPanelgt;  lt;/Gridgt;   lt;/Bordergt;   lt;Grid Background="#2F3136"gt;  lt;!--This is the left hand column--gt;  lt;Grid.RowDefinitionsgt;  lt;RowDefinition Height="25"gt;lt;/RowDefinitiongt;  lt;RowDefinition Height="0*"/gt;  lt;/Grid.RowDefinitionsgt;   lt;ListView ItemsSource="{Binding Contacts}" Background="Transparent" BorderThickness="0"  Grid.Row="1" ItemContainerStyle="{StaticResource ContactCard}"gt;lt;/ListViewgt;   lt;/Gridgt;  lt;Label Panel.ZIndex="5" Content="Contacts" VerticalAlignment="Top" FontWeight="Medium" Foreground="Gray" Height="26" Margin="0,25,0,0"/gt;   lt;/Gridgt; lt;/Windowgt;

1. В вашей основной сетке у вас есть одна строка, которая полностью заполнена границей, охватывающей оба столбца, перекрываемой другой сеткой в левом столбце. Возможно, вам следует сделать желаемый макет на бумаге и соответствующим образом перевести его в xaml. Перекрывающиеся элементы имеют смысл только в том случае, если одновременно виден только один. И мне никогда не приходилось менять Z-порядок, только видимость.

Ответ №1:

Для вашей второй подсети добавьте следующее: Grid.Row = «1», В противном случае обе сетки находятся в одной строке (здесь применяется индекс на основе 0).

 lt;Gridgt;   lt;Grid.RowDefinitionsgt;  lt;RowDefinition Height="25"/gt;   lt;RowDefinition Height="*"/gt; lt;!--This is your second row--gt;  lt;/Grid.RowDefinitionsgt;   lt;Grid.ColumnDefinitionsgt;  lt;ColumnDefinition Width="200"gt;   lt;/ColumnDefinitiongt;  lt;ColumnDefinition/gt;  lt;/Grid.ColumnDefinitionsgt;   lt;Border Grid.ColumnSpan="2" Background="#252525" MouseDown="Border_MouseDown" Panel.ZIndex="1"gt;   lt;Grid HorizontalAlignment="Stretch"gt;  lt;Label Content="Crackle Chat" Foreground="Gray" FontWeight="SemiBold"/gt;   lt;StackPanel HorizontalAlignment="Right" Orientation="Horizontal"gt;   lt;Button Width="20" Height="20" Content="🗕" Background="Transparent"  BorderThickness="0" Foreground="Gray" FontWeight="Bold" Margin="0,0,0,3"  Click="Button_Minimize_Click"gt;lt;/Buttongt;   lt;Button Width="20" Height="20" Content="🗖" Background="Transparent"  BorderThickness="0" Foreground="Gray" FontWeight="Bold"  Click="Button_Maximize_Click"gt;lt;/Buttongt;   lt;Button Width="20" Height="20" Content="╳" Background="Transparent"  BorderThickness="0" Foreground="Gray" FontWeight="Bold"  Click="Button_Exit_Click"gt;lt;/Buttongt;    lt;/StackPanelgt;  lt;/Gridgt;   lt;/Bordergt;   lt;Grid Background="#2F3136" Grid.Row="1"gt; lt;!--This goes to the second row--gt;  lt;!--This is the left hand column--gt;  lt;Grid.RowDefinitionsgt;  lt;RowDefinition Height="25"gt;lt;/RowDefinitiongt;  lt;RowDefinition Height="0*"/gt;  lt;/Grid.RowDefinitionsgt;   lt;ListView ItemsSource="{Binding Contacts}" Background="Transparent" BorderThickness="0"  Grid.Row="1" ItemContainerStyle="{StaticResource ContactCard}"gt;lt;/ListViewgt;   lt;/Gridgt;  lt;Label Panel.ZIndex="5" Content="Contacts" VerticalAlignment="Top" FontWeight="Medium" Foreground="Gray" Height="26" Margin="0,25,0,0"/gt;  lt;/Gridgt;

Правка: добавлен измененный код для лучшего объяснения.