XAML Layout- how to add a WebKitBrowser below buttons inside a <Grid>

Question

I have the following XAML markup, which I am trying to use to display a WebKitBrowser below some buttons on the the GUI of my application:

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

Basically, what I want to do, is display the buttons in a row above the WebKitBrowser , (which will be displayed inside the grdBrowserHost , to create a sort of 'navigation bar' inside the <DockPanel>

But for some reason, with what I'm doing above, I get the buttons displayed in the first few columns of the <grid> , and the browser displayed in the last column, but it's displayd 'next to' the buttons, rather than 'underneath, so the layout looks messy:

How can I fix the layout so that the WebKitBrowser content is displayed below the buttons, and not next to them? As you can see, I tried putting the grdBrowserHost grid (where the WebKitBrowser is displayed) inside the second row of the layout (ie one row below the row where the buttons are displayed), but this doesn't make any difference... anyone have any suggestions?

Edit

I tried setting the DockPanel.Dock="Bottom" , as suggested in the answer, but this just seemed to cause the WebKitBrowser to be displayed 'on top' of some of the other elements being displayed on my GUI, so that the layout now looks like:

As you can see, the browser is now displayed 'on top' of a couple of the buttons that I had previously added to my GUI, instead of underneath them, like I want it to, or beside them, like it was before...

I have set all of the buttons to: DockPanel.Dock="Top" , and the browser to DockPanel.Dock="Bottom" ... but for some reason, the browser is displayed on top of the right-most couple of buttons...

The line I'm now using to add the browser to the GUI is:

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

If I remove the grdBrowserHost 's Row & Column , then the web browser takes up the whole GUI, and completely hides the buttons I've added:

Any other suggestions?

Answer 1

You need to set the Dock property of the controls you want to move around. So therefore:

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

Note the DockPanel.Dock = "Bottom" in the grid named grdBrowserHost. You will also need to remove the grdBrowserHosts column/row property as you want its parent to be the dockpanel, not the grid.

I should ponit out that the Buttons you have will default to DockPanel.Dock="Left" as this is the default when not defined