WPF gui 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

您为Grid中的每一行添加RowDefinition并为每个列添加ColumnDefinition，然后设置Grid中每个元素的Grid.Row/Grid.Column附加属性，以确定其在同一个元素中的位置。通过分别设置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> 

注：我彩色的侧面板蓝，所以你可以看到它