WPF gui design with xaml

Question

Я новичок в XAML, поэтому я не знаю, как это сделать правильно. В моем дизайне должна быть строка меню сверху (ширина 100%), а затем другая панель с кнопкой слева и одна справа (100% ширина), после чего она должна быть боковой панелью слева (около 100 пикселей), а остальное должно быть «содержимым», поэтому я хочу разместить свои элементы управления (кнопки, списки, сетки, lkab

С моим кодом это выглядит неплохо, но боковая панель должна находиться под док-панелью, которая содержит два dockpanels.

http://oi66.tinypic.com/xf5dhw.jpg

<Window Background="#f5f5f5" Width="1280" Height="800" x:Class="WpfApplication3.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:WpfApplication3" 
    mc:Ignorable="d" 
    Title="primoxx"> 
<Grid> 
    <DockPanel LastChildFill="False" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Top"> 
     <DockPanel DockPanel.Dock="Top"> 
      <Menu DockPanel.Dock="Top"> 
       <MenuItem Header="_Datei" /> 
       <MenuItem Header="_Bearbeiten" /> 
       <MenuItem Header="_Verwaltung" /> 
       <MenuItem Header="_Vorlagen" /> 
       <MenuItem Header="_Gestaltung" /> 
       <MenuItem Header="_Extras" /> 
       <MenuItem Header="_Hilfe" /> 
      </Menu> 
     </DockPanel> 
     <DockPanel Background="White" LastChildFill="False" DockPanel.Dock="Top"> 
      <Button Height="30px">My Button</Button> 
     </DockPanel> 
    </DockPanel> 
    <DockPanel Grid.Row="1" VerticalAlignment="Top"> 
     <DockPanel DockPanel.Dock="Left"> 
      <StackPanel> 
       <Button Style="{StaticResource subMenuButton}">Hello</Button> 
      </StackPanel> 
     </DockPanel> 
     <DockPanel DockPanel.Dock="Right"> 

     </DockPanel> 
    </DockPanel> 
</Grid> 

Answer 1

панель Сетка определяет гибкую область сетки, состоящую из столбцов и строк, которые должны быть очень полезны здесь: https://msdn.microsoft.com/en-us/library/system.windows.controls.grid(v=vs.110).aspx

Вы добавляете RowDefinition для каждой строки, которая требуется в Grid и ColumnDefinition для каждого столбца, а затем вы устанавливаете прикрепленные свойства Grid.Row/Grid.Column каждого элемента в Grid для определения своей позиции в пределах одного и того же. Элемент может охватывать несколько столбцов или строк, задавая свойства Grid.ColumnSpan и Grid.RowSpan соответственно. Следующий пример разметка должна дать вам идею:

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition /> 
     <ColumnDefinition /> 
    </Grid.ColumnDefinitions> 
    <!-- first row, the Menu spans both columns --> 
    <Menu Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2"> 
     <MenuItem Header="_Datei" /> 
     <MenuItem Header="_Bearbeiten" /> 
     <MenuItem Header="_Verwaltung" /> 
     <MenuItem Header="_Vorlagen" /> 
     <MenuItem Header="_Gestaltung" /> 
     <MenuItem Header="_Extras" /> 
     <MenuItem Header="_Hilfe" /> 
    </Menu> 
    <!-- the bar with one button to the left and another one to the right--> 
    <Button Content="Left" Grid.Column="0" Grid.Row="1" /> 
    <Button Content="Right" Grid.Column="1" Grid.Row="1" /> 

    <Grid Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="100" /> 
      <ColumnDefinition Width="*" /> 
     </Grid.ColumnDefinitions> 
     <Border Background="Silver" Grid.Column="0"> 
      <!-- Sidebar--> 
     </Border> 
     <Border Background="Yellow" Grid.Column="1"> 
      <!-- The Content--> 
     </Border> 
    </Grid> 
</Grid> 

Answer 2

Я думаю, вы не поняли, как работает DockPanel.Dock

он может пойти в любом UIElement, а затем установит док в первый родитель, который является док-панель, так что вы не должны половину док-панелей, которые вы используете попробовать это вместо

<Window Background="#f5f5f5" Width="1280" Height="800" x:Class="WpfApplication3.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:WpfApplication3" 
    mc:Ignorable="d" 
    Title="primoxx"> 
    <DockPanel > 
     <Menu DockPanel.Dock="Top"> 
      <MenuItem Header="_Datei" /> 
      <MenuItem Header="_Bearbeiten" /> 
      <MenuItem Header="_Verwaltung" /> 
      <MenuItem Header="_Vorlagen" /> 
      <MenuItem Header="_Gestaltung" /> 
      <MenuItem Header="_Extras" /> 
      <MenuItem Header="_Hilfe" /> 
     </Menu> 
     <!--if you want to have both buttons on 50% width--> 
     <UniformGrid DockPanel.Dock="Top" Columns="2"> 
      <Button DockPanel.Dock="Left">Hello</Button> 
      <Button DockPanel.Dock="Right" Height="30px">My Button</Button> 
     </UniformGrid> 
     <!--if you want to have both buttons on auto size --> 
     <DockPanel LastChildFill="False" DockPanel.Dock="Top"> 
      <Button DockPanel.Dock="Left">Hello</Button> 
      <Button DockPanel.Dock="Right" Height="30px">My Button</Button> 
     </DockPanel> 
     <StackPanel DockPanel.Dock="Left" Background="blue" MinWidth="100"/> 
     <ContentControl /> 
    </DockPanel> 
</Window> 

Примечание: Я цветные боковой панели синего цвета, так что вы можете увидеть его