c# - How do I stick Controls inside of ScrollViewer

Question

Is it generally possible to avoid moving some controls while Scrolling?

In particular is it possible to stick the first row (with lightblue background) in the following code example:

<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

Maybe try something like this?

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

UPDATE:

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

So if you want Vertical ScrollBar to go all the way to the top you can create a style for the ScrollViewer, push the container Grid down a bit (20px), and highlight the top part with a Rectangle.

Hope this is what you wanna achieve...