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> 

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