XAML佈局 - 如何添加以下按鈕的WebKitBrowser內<Grid>

Question

我有以下XAML標記，而我試圖用在我的應用程序的GUI顯示下面的一些按鈕的WebKitBrowser：

<DockPanel VerticalAlignment="Stretch" Height="Auto" HorizontalAlignment="Stretch" Width="Auto"> 
       <Grid x:Name="browserGrid"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto" /> 
         <RowDefinition Height="Auto" /> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="Auto" /> 
         <ColumnDefinition Width="Auto" /> 
         <ColumnDefinition Width="Auto" /> 
         <ColumnDefinition Width="Auto" /> 
        </Grid.ColumnDefinitions> 
         <Button Style="{DynamicResource NoChromeButton}" Click="backBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" Height="30" Width="40" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1"> 
        <Image Source="C:\...\arrow_left.png" Height="30" Width="40" /> 
       </Button> 
       <Button Style="{DynamicResource NoChromeButton}" Click="RefreshBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" Height="30" Width="40" VerticalAlignment="Top" Grid.Row="1" Grid.Column="2" > 
        <Image Source="C:\...\arrow_loop3.png" Height="30" Width="30" /> 
       </Button> 
       <Button Style="{DynamicResource NoChromeButton}" Click="printBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" Height="30" Width="30" VerticalAlignment="Top" Grid.Row="1" Grid.Column="3"> 
        <Image Source="C:\...\printer.png" Height="30" Width="30" /> 
       </Button> 
       <Button Style="{DynamicResource NoChromeButton}" Name="referBtn" Click="referThis" Margin="0,0,0,0" HorizontalAlignment="Left" HorizontalContentAlignment="Left" Height="30" Width="80" VerticalAlignment="Top" Grid.Row="1" Grid.Column="4"> 
        <TextBlock>Refer</TextBlock> 
       </Button> 

       <Grid x:Name="grdBrowserHost" Height="650" Width="900" Margin="0,0,0,0" Grid.Row="2" Grid.Column="3"></Grid> 
       <!--/StackPanel--> 
       </Grid> 
      </DockPanel> 

基本上，我想要做的，是一排WebKitBrowser以上，（這將在grdBrowserHost內展示顯示的按鈕，來創造一種「導航欄」內的<DockPanel>

但由於某些原因，與我在上面做的，我得到按鈕迪張開的<grid>的前幾列，並在最後一欄顯示的瀏覽器，但它是displayd「旁邊的」按鈕，而不是「之下，所以佈局看起來雜亂無章：

如何我可以修復佈局，以便WebKitBrowser內容顯示在按鈕下方，而不是旁邊的內容？正如你所看到的，我試着把grdBrowserHost網格（其中顯示WebKitBrowser）放在佈局的第二行（即顯示按鈕的行下面一行）內，但是這沒有什麼區別......任何人有任何建議？

編輯

我嘗試設置DockPanel.Dock="Bottom"，作爲答案的建議，但這似乎只是導致WebKitBrowser要顯示「頂部」的一些其他元素對我的GUI顯示，因此，佈局現​​在看起來像：

正如你可以看到，現在會顯示瀏覽器「頂部」一對夫婦，我以前已經加入到我的GUI按鈕的，而不是在它們下面，就像我希望它，或者他們身邊，就像是之前...

我所有的按鍵設置爲：DockPanel.Dock="Top"，和瀏覽器DockPanel.Dock="Bottom" ...但由於某些原因，顯示在瀏覽器最右邊的兩個按鈕的頂部...

現在，我使用添加到瀏覽器的GUI該生產線是：

    <Grid x:Name="grdBrowserHost" Height="650" Width="900" Margin="0,0,0,0" Grid.Row="2" Grid.Column="3" DockPanel.Dock="Bottom"></Grid> 

如果我刪除grdBrowserHost的 & Column，然後Web瀏覽器佔用整個GUI，並完全隱藏b uttons我說：

任何其他建議？

Answer 1

您需要設置要移動的控件的Dock屬性。因此：

<DockPanel VerticalAlignment="Stretch" Height="Auto" HorizontalAlignment="Stretch" Width="Auto"> 
       <Grid x:Name="browserGrid"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto" /> 
         <RowDefinition Height="Auto" /> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="Auto" /> 
         <ColumnDefinition Width="Auto" /> 
         <ColumnDefinition Width="Auto" /> 
         <ColumnDefinition Width="Auto" /> 
        </Grid.ColumnDefinitions> 
         <Button Style="{DynamicResource NoChromeButton}" Click="backBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" Height="30" Width="40" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1"> 
        <Image Source="C:\...\arrow_left.png" Height="30" Width="40" /> 
       </Button> 
       <Button Style="{DynamicResource NoChromeButton}" Click="RefreshBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" Height="30" Width="40" VerticalAlignment="Top" Grid.Row="1" Grid.Column="2" > 
        <Image Source="C:\...\arrow_loop3.png" Height="30" Width="30" /> 
       </Button> 
       <Button Style="{DynamicResource NoChromeButton}" Click="printBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" Height="30" Width="30" VerticalAlignment="Top" Grid.Row="1" Grid.Column="3"> 
        <Image Source="C:\...\printer.png" Height="30" Width="30" /> 
       </Button> 
       <Button Style="{DynamicResource NoChromeButton}" Name="referBtn" Click="referThis" Margin="0,0,0,0" HorizontalAlignment="Left" HorizontalContentAlignment="Left" Height="30" Width="80" VerticalAlignment="Top" Grid.Row="1" Grid.Column="4"> 
        <TextBlock>Refer</TextBlock> 
       </Button> 

       <Grid x:Name="grdBrowserHost" DockPanel.Dock="Bottom" Height="650" Width="900" Margin="0,0,0,0" ></Grid> 
       <!--/StackPanel--> 
       </Grid> 
      </DockPanel> 

請注意名爲grdBrowserHost的網格中的DockPanel.Dock =「Bottom」。您還需要刪除grdBrowserHosts列/行屬性，因爲您希望它的父級爲dockpanel，而不是網格。

我應該ponit的是，你必須將默認爲DockPanel.Dock =「左」，因爲這按鍵是默認的，當沒有定義