如何在 ScrollViewer 中粘贴控件答案

【问题标题】：How do I stick Controls inside of ScrollViewer如何在 ScrollViewer 中粘贴控件
【发布时间】：2011-09-14 14:16:22
【问题描述】：

是否通常可以避免在滚动时移动某些控件？

特别是可以在下面的代码示例中粘贴第一行（浅蓝色背景）：

<Grid>
  <ScrollViewer>
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="20" />
        <RowDefinition />
      </Grid.RowDefinitions>
      <Canvas Background="LightBlue" Grid.Row="0" />
      <Grid  Grid.Row="1" >
        <Canvas Background="Beige" Width="100" Height="800" />
      </Grid>
    </Grid>
  </ScrollViewer>
</Grid>

【问题讨论】：

标签： c# wpf silverlight

【解决方案1】：

也许可以试试这样？

<Grid> 
  <ScrollViewer> 
<Grid Height="800" Width="480" > 
  <Canvas Background="Beige" Width="100" Height="800" /> 
</Grid> 
  </ScrollViewer>
  <Canvas Background="LightBlue" Grid.Row="0" Height="20" VerticalAlignment="Top" /> 
</Grid>

更新：

<Style TargetType="ScrollViewer">
  <Setter Property="HorizontalContentAlignment" Value="Left"/>
  <Setter Property="VerticalContentAlignment" Value="Top"/>
  <Setter Property="VerticalScrollBarVisibility" Value="Visible"/>
  <Setter Property="Padding" Value="4"/>
  <Setter Property="BorderThickness" Value="1"/>
  <Setter Property="BorderBrush">
    <Setter.Value>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFA3AEB9" Offset="0"/>
        <GradientStop Color="#FF8399A9" Offset="0.375"/>
        <GradientStop Color="#FF718597" Offset="0.375"/>
        <GradientStop Color="#FF617584" Offset="1"/>
      </LinearGradientBrush>
    </Setter.Value>
  </Setter>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ScrollViewer">
        <Border BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                CornerRadius="2">
          <Grid Background="{TemplateBinding Background}">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*"/>
              <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
              <RowDefinition Height="20"/>
              <RowDefinition/>
              <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <ScrollContentPresenter x:Name="ScrollContentPresenter"
                                    Cursor="{TemplateBinding Cursor}"
                                    ContentTemplate=
                                      "{TemplateBinding ContentTemplate}"
                                    Margin="{TemplateBinding Padding}"
                                    Grid.Row="1"/>
            <Rectangle Grid.Column="1" Fill="#FFE9EEF4" Grid.Row="2"/>
            <ScrollBar x:Name="VerticalScrollBar"
                       Grid.Column="1"
                       IsTabStop="False"
                       Maximum="{TemplateBinding ScrollableHeight}"
                       Margin="0,-1,-1,-1"
                       Minimum="0"
                       Orientation="Vertical"
                       Grid.Row="0"
                       Visibility="{TemplateBinding
                         ComputedVerticalScrollBarVisibility}"
                       Value="{TemplateBinding VerticalOffset}"
                       ViewportSize="{TemplateBinding ViewportHeight}"
                       Width="18"
                       Grid.RowSpan="3"/>
            <ScrollBar x:Name="HorizontalScrollBar"
                       Grid.Column="0"
                       Height="18"
                       IsTabStop="False"
                       Maximum="{TemplateBinding ScrollableWidth}"
                       Margin="-1,0,-1,-18"
                       Minimum="0"
                       Orientation="Horizontal"
                       Grid.Row="2"
                       Visibility="{TemplateBinding
                         ComputedHorizontalScrollBarVisibility}"
                       Value="{TemplateBinding HorizontalOffset}"
                       ViewportSize="{TemplateBinding ViewportWidth}"/>
            <Rectangle Fill="#FF89B1E2"/>
          </Grid>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

因此，如果您希望 Vertical ScrollBar 一直到顶部，您可以为 ScrollViewer 创建一个样式，将容器 Grid 向下推一点（20px），然后用 Rectangle 突出显示顶部。

希望这是您想要实现的目标......

【讨论】：

那么你想要实现什么？我以为你不想让那个控件向右移动？
滚动条应该到达窗口的顶部（如果我把画布放在外面，它们不会）。如果我将 Canvas 放在 ScrollViewer 上，我必须确定 ScrollViewer 内容的剪裁和 LightBlue-Canvas 的大小。我希望我能避免这种方式，当我能坚持下去的时候。
示例：WinWord。显示标尺。标尺在 ScrollViewer 内是光学的，但不会移动。
但是在word中，标尺在scrollviewer上方，没有到达窗口的顶部。
我使用的词，垂直滚动条看起来像水平标尺之外。就我而言，这只是另一个方向；p

【解决方案2】：

如果控件在ScrollViewer 中，它将滚动。如果您不希望它滚动，它不应该在 ScrollViewer 中。 Xin 建议让 ScrollViewer 在 Canvas 的上方或下方表现得像一个“层”或“覆盖层”，这是保持 Canvas 就位并仍然让它扩展到整个窗口的唯一方法。

至少从你的描述来看，听起来你不能轻易或实际做你想做的事。

【讨论】：