ScrollViewer 左右的 WPF 按钮答案

【问题标题】：WPF Buttons to Left and Right of ScrollViewerScrollViewer 左右的 WPF 按钮
【发布时间】：2014-11-06 05:35:09
【问题描述】：

我正在使用 ScrollViewer，它位于 Grid 控件内，它的对齐方式是 center to screen 。 Scrolllviewer 内部有一个 Web 浏览器控件，其高度和宽度会根据网页的大小而有所不同。如果高度太大scrollviewer会出现scroller 粗略的xaml是这样的

<Grid>
 <ScrollViewer HAlign="Center" RAlign="Center">
   <Browser/>
 </ScrollViewer/>
</Grid>

现在我需要一个按钮，其位置始终位于 scrollviewer 左侧，另一个按钮始终位于 scrollviewer 右侧并垂直居中于屏幕

如果我将按钮放在滚动查看器中，如果浏览器的高度太长，按钮也会下降。示例布局可能看起来像

【问题讨论】：

您是否尝试过使用停靠面板？

标签： .net wpf xaml

【解决方案1】：

这就是我将如何使用 DockPanel 来实现相同

<Grid>
    <DockPanel LastChildFill="True" HorizontalAlignment="Center" VerticalAlignment="Center" MaxWidth="500">
        <Button Content="Prev page" DockPanel.Dock="Left"/>
        <Button Content="Next page" DockPanel.Dock="Right"/>
        <ScrollViewer>
            <WebBrowser Source="http://www.google.com"/>
        </ScrollViewer>
    </DockPanel>
</Grid>

结果

以上只是展示DockPanel使用的一个例子

使用网格

您可以使用带有列定义的网格来启用 stretch to available space 或 * 宽度

例子

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="4*"
                          MaxWidth="500" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
    <Button Content="Prev page"
            DockPanel.Dock="Left" />
    <ScrollViewer Grid.Column="1">
        <WebBrowser Source="http://www.google.com" />
    </ScrollViewer>
    <Button Content="Next page"
            DockPanel.Dock="Right"
            Grid.Column="2" />
</Grid>

以上示例将网格划分为 3 列，宽度比例为 1:4:1。因此这将能够使用定义的比例分配可用空间。另外，我将浏览器列的最大宽度设置为 500 像素，这将在达到定义的宽度后启用按钮的拉伸。

【讨论】：

如何确保左右按钮占用浏览器控件左右两侧的所有可用空间。在上面的示例中，MaxWidth 设置为 500 像素。但是如果没有设置它的值，那么我怎样才能使按钮拉伸