Как мне вставить элементы управления внутри ScrollViewer

Question

Можно ли вообще избежать перемещения некоторых элементов управления во время прокрутки?

В частности, можно ли прикрепить первую строку (со светлым голубым фоном) в следующем примере кода:

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

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

Так что если вы хотите, чтобы вертикальная полоса прокрутки прошла до самого верха, выМожно создать стиль для ScrollViewer, немного сдвинуть сетку контейнера (20 пикселей) и выделить верхнюю часть прямоугольником.

Надеюсь, это то, чего вы хотите достичь ...

Answer 2

Если элемент управления находится в ScrollViewer, он будет прокручиваться.Если вы не хотите, чтобы он прокручивался, его не должно быть в ScrollViewer.Предложение Xin о том, чтобы заставить ScrollViewer вести себя как «слой» или «наложение» сверху или снизу Canvas, является единственным способом сохранить Canvas на месте и все же позволить ему расширяться до всего окна.* По крайней мере, из вашего описания, кажется, что вы не можете легко или практически сделать то, что вы хотите сделать.