CODEWITHSUNDEEP
silverlightxamlscrollviewer
Peter
Peter

Reputation: 14098

How to keep elements in ScrollViewer in sight, regardless of scrolling

In Silverlight, is it possible to let certain elements inside a ScrollViewer stay in view? By this I mean that certain elements should always be visible, regardless of where the scroll position currently is.

Take this XAML for example (you can put it in something like KaXaml of XamlPad):

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid>  
    <ScrollViewer Width="250" Height="100" HorizontalScrollBarVisibility="Visible">
      <StackPanel>
        <Grid Width="350" Height="50">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="50" />
          </Grid.ColumnDefinitions>
          <Button Content="1" Grid.Column="0" BorderThickness="2" Width="50" />
          <Button Content="2" Grid.Column="1" BorderThickness="2" Width="50" />
          <Button Content="3" Grid.Column="2" BorderThickness="2" Width="50" />
          <Button Content="4" Grid.Column="3" BorderThickness="2" Width="50" />
          <Button Content="5" Grid.Column="4" BorderThickness="2" Width="50" />
          <Button Content="6" Grid.Column="5" BorderThickness="2" Width="50" />
          <Button Content="X" Grid.Column="6" BorderThickness="2" Width="50" />
        </Grid>
        <Grid Width="350" Height="50">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="50" />
          </Grid.ColumnDefinitions>
          <Button Content="1" Grid.Column="0" BorderThickness="2" Width="50" />
          <Button Content="2" Grid.Column="1" BorderThickness="2" Width="50" />
          <Button Content="3" Grid.Column="2" BorderThickness="2" Width="50" />
          <Button Content="4" Grid.Column="3" BorderThickness="2" Width="50" />
          <Button Content="5" Grid.Column="4" BorderThickness="2" Width="50" />
          <Button Content="6" Grid.Column="5" BorderThickness="2" Width="50" />
          <Button Content="X" Grid.Column="6" BorderThickness="2" Width="50" />
        </Grid>
      </StackPanel>
    </ScrollViewer>
  </Grid>
</Page>

I would like to keep the 'X' buttons in sight, regardless of how much you scroll left or right. Of course, when scrolling down or up, the 'X' buttons should follow the scrolling.

I'm not saying the structure of my XAML is ideal, but each row is a databound to a different item, so each row is a data template. I can't put one big grid in the scrollviewer or have columns instead of rows as templates (at least, I think I can't).

Upvotes: 0

Views: 530

Answers (2)

Chris W.
Chris W.

Reputation: 23270

Ya no sweat, just layer those elements over your Scrollviewer in a Panel like this;

<Grid>

  <ScrollViewer>
     ... Scroll Viewer Embedded Stuff ...
  </ScrollViewer>
  <StackPanel Orientation="Horizontal" 
              HorizontalAlignment="Center" VerticalAlignment="Top" Margin="5">
     <Button Content="Button1"/>
     <Button Content="Button1"/>
     <Button Content="Button1"/>
     <Button Content="Button1"/>
     <Button Content="Button1"/>
  </StackPanel>

</Grid>

You could even go a step further and set a EventTrigger to make your buttons visible on MouseEnter and disappear on MouseLeave if you wanted but this should get you started. Best of luck!

Upvotes: 1

Duncan Matheson
Duncan Matheson

Reputation: 1726

You might have more luck using a DataGrid and have the X buttons as a frozen column.

Upvotes: 0

Related Questions