XAML布局-如何在Web瀏覽器內部按鈕下方添加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>的前幾列中，並將瀏覽器顯示在最后一列中，但將其顯示在按鈕的“旁邊”，而不是在下面，因此布局看起來很凌亂：

如何固定布局，使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的Row ＆ Column ，則Web瀏覽器將占用整個GUI，並完全隱藏我添加的按鈕：

還有其他建議嗎？

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列/行屬性，因為您希望其父項成為停靠面板而不是網格。

我應該弄清楚，您擁有的Buttons將默認為DockPanel.Dock =“ Left”，因為這是未定義時的默認值