XAML Layout- wie ein WebKitBrowser Tasten unten in einem <Grid>

Question

hinzufügt ich folgenden XAML-Markup, die ich ein WebKitBrowser unten einige Tasten auf dem GUI meiner Anwendung anzuzeigen zu verwenden versuchen:

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

im Grunde, was ich tun möchte, ist es, die Tasten oberhalb der WebKitBrowser in einer Reihe angezeigt werden, (die innerhalb des grdBrowserHost angezeigt wird, eine Art ‚Navigationsleiste‘ in der <DockPanel>

Aber aus irgendeinem Grund zu schaffen, mit dem, was ich oben mache, bekomme ich die Knöpfe di in den ersten Spalten der <grid> gespreizt, und der Browser in der letzten Spalte angezeigt, aber es ist displayd ‚neben‘ die Tasten, und nicht ‚unter, so das Layout sieht chaotisch:

Wie kann ich das Layout korrigieren, so dass der Inhalt WebKitBrowser unter den Schaltflächen angezeigt wird, und nicht neben ihnen? Wie Sie sehen können, habe ich versucht, die grdBrowserHost Raster (wo die WebKitBrowser angezeigt wird) in der zweiten Zeile des Layouts (dh eine Zeile unter der Zeile, wo die Schaltflächen angezeigt werden), aber das macht keinen Unterschied ... Hat jemand irgendwelche Vorschläge?

bearbeiten

Ich versuchte, die DockPanel.Dock="Bottom" Einstellung, wie in der Antwort vorgeschlagen, aber dies schien nur die WebKitBrowser zu verursachen angezeigt ‚auf‘ werden von einigen der anderen Elemente auf meiner GUI angezeigt werden, so dass das Layout sieht nun wie:

wie Sie sehen können, wird der Browser jetzt ‚auf‘ ein Paar der Tasten angezeigt, die ich vorher meine GUI hinzugefügt hatte, statt unter ihnen , wie ich es will, oder neben ihnen, wie es vorher war ...

Ich habe alle Tasten auf: DockPanel.Dock="Top", und der Browser auf DockPanel.Dock="Bottom" ... aber aus irgendeinem Grund wird der Browser angezeigt oben auf der am weitesten rechts stehenden paar Knöpfe ...

die Linie, die ich jetzt bin mit dem Browser auf die GUI hinzuzufügen ist:

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

Wenn ich die grdBrowserHost ‚s & Column entfernen, dann nimmt der Webbrowser die gesamte GUI auf und verbirgt vollständig die b uttons Ich habe hinzugefügt:

noch andere Vorschläge?

Answer 1

Sie müssen die Dock-Eigenschaft der Steuerelemente festlegen, die Sie verschieben möchten. Also deshalb:

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

Beachten Sie die DockPanel.Dock = "Bottom" im Grid namens GrdBrowserHost. Sie müssen auch die Spalten-/Zeileneigenschaft grdBrowserHosts entfernen, da das übergeordnete Element das Dockpanel und nicht das Raster sein soll.

ich Ponit soll, dass die Tasten Sie DockPanel.Dock werden standardmäßig haben = „LEFT“, wie dies der Standard ist, wenn nicht