locked
Help with scollview RRS feed

  • Question

  •   

    I'm trying to build a scrollable list where the list of items scrolls and the selectionbar remains in the same location.  I have wrapped a stack panel in a scrollview and got the list to scroll correctly but I don't know how to handle the selection bar.

    Basically, I need to be able to know what item is selected and i'm not sure how to accomplish this.   I'm not sure if this is the best way to accomplish this look but I've attached the code.


    <Window
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:Class="WpfApplication2.Window1"
     x:Name="Window"
     Title="Window1"
     Width="640" Height="480" Background="#FF000000" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">

     <Window.Resources>
      <Storyboard x:Key="OnMouseDown1">
       <ThicknessAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LstScroll" Storyboard.TargetProperty="(FrameworkElement.Margin)">
        <SplineThicknessKeyFrame KeyTime="00:00:00.3000000" Value="173,154,172,164"/>
       </ThicknessAnimationUsingKeyFrames>
      </Storyboard>
      <SolidColorBrush x:Key="ListBorder" Color="#828790"/>
      <Style x:Key="{x:Static GridView.GridViewScrollViewerStyleKey}" TargetType="{x:Type ScrollViewer}">
       <Setter Property="Focusable" Value="false"/>
       <Setter Property="Template">
        <Setter.Value>
         <ControlTemplate TargetType="{x:Type ScrollViewer}">
          <Grid SnapsToDevicePixels="true" Background="{TemplateBinding Background}">
           <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
           </Grid.ColumnDefinitions>
           <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
           </Grid.RowDefinitions>
           <DockPanel Margin="{TemplateBinding Padding}">
            <ScrollViewer Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" DockPanel.Dock="Top">
             <GridViewHeaderRowPresenter Margin="2,0,2,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" AllowsColumnReorder="{Binding Path=TemplatedParent.View.AllowsColumnReorder, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderContainerStyle="{Binding Path=TemplatedParent.View.ColumnHeaderContainerStyle, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderContextMenu="{Binding Path=TemplatedParent.View.ColumnHeaderContextMenu, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderTemplate="{Binding Path=TemplatedParent.View.ColumnHeaderTemplate, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderTemplateSelector="{Binding Path=TemplatedParent.View.ColumnHeaderTemplateSelector, RelativeSource={RelativeSource TemplatedParent}}" ColumnHeaderToolTip="{Binding Path=TemplatedParent.View.ColumnHeaderToolTip, RelativeSource={RelativeSource TemplatedParent}}" Columns="{Binding Path=TemplatedParent.View.Columns, RelativeSource={RelativeSource TemplatedParent}}"/>
            </ScrollViewer>
            <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" CanContentScroll="{TemplateBinding CanContentScroll}" KeyboardNavigation.DirectionalNavigation="Local"/>
           </DockPanel>
           <ScrollBar Cursor="Arrow" x:Name="PART_HorizontalScrollBar" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Grid.Row="1" Orientation="Horizontal" ViewportSize="{TemplateBinding ViewportWidth}" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0.0" Value="{Binding Path=HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"/>
           <ScrollBar Cursor="Arrow" x:Name="PART_VerticalScrollBar" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Grid.Column="1" Orientation="Vertical" ViewportSize="{TemplateBinding ViewportHeight}" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0.0" Value="{Binding Path=VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"/>
           <DockPanel Background="{Binding Path=Background, ElementName=PART_VerticalScrollBar}" Grid.Column="1" Grid.Row="1" LastChildFill="false">
            <Rectangle Width="1" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Fill="White" DockPanel.Dock="Left"/>
            <Rectangle Height="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Fill="White" DockPanel.Dock="Top"/>
           </DockPanel>
          </Grid>
         </ControlTemplate>
        </Setter.Value>
       </Setter>
      </Style>
      <Style x:Key="ListViewStyle1" TargetType="{x:Type ListView}">
       <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
       <Setter Property="BorderBrush" Value="{StaticResource ListBorder}"/>
       <Setter Property="BorderThickness" Value="1"/>
       <Setter Property="Foreground" Value="#FF042271"/>
       <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
       <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
       <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
       <Setter Property="VerticalContentAlignment" Value="Center"/>
       <Setter Property="Template">
        <Setter.Value>
         <ControlTemplate TargetType="{x:Type ListView}">
          <Microsoft_Windows_Themes:ListBoxChrome x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" RenderMouseOver="{TemplateBinding IsMouseOver}">
           <ScrollViewer Padding="{TemplateBinding Padding}" Style="{DynamicResource {x:Static GridView.GridViewScrollViewerStyleKey}}">
            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
           </ScrollViewer>
          </Microsoft_Windows_Themes:ListBoxChrome>
          <ControlTemplate.Triggers>
           <Trigger Property="IsGrouping" Value="true">
            <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
           </Trigger>
           <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
           </Trigger>
          </ControlTemplate.Triggers>
         </ControlTemplate>
        </Setter.Value>
       </Setter>
      </Style>
     </Window.Resources>
     <Window.Triggers>
     </Window.Triggers>

     <Grid x:Name="LayoutRoot">
      <ScrollViewer Margin="173,139,172,106" x:Name="LstScroll" CanContentScroll="True" VerticalScrollBarVisibility="Hidden">
       <StackPanel Width="279" Height="63.84">
        <Label Foreground="#FFFBF5F5" HorizontalAlignment="Center" Content="RECORDING INFORMATION"/>
        <Label Foreground="#FFFBF5F5" Content="PARTY INFORMATION" HorizontalAlignment="Center" Height="25.96"/>
        <Label Foreground="#FFFBF5F5" Content="SUBDIVISION INFORMATION" HorizontalAlignment="Center" Height="25.96"/>
        <Label Foreground="#FFFBF5F5" Content="TRACT INFORMATION" Height="25.96" HorizontalAlignment="Center"/>
       </StackPanel>
      </ScrollViewer>
      <Rectangle Margin="173,0,192,186" VerticalAlignment="Bottom" Height="23" Fill="#7F0D7086" Stroke="#FF000000" RadiusX="3.5" RadiusY="3.5" x:Name="recSelectionBar"/>
      <Button Margin="247,84,260,0" VerticalAlignment="Top" Height="39" Content="UP" IsCancel="False" x:Name="btnUp" Click="btnUp_Click"/>
      <Button Margin="247,0,260,52" VerticalAlignment="Bottom" Height="38" Content="Down" x:Name="btnDown" Click="btnDown_Click"/>
     </Grid>
    </Window>




    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Shapes;

    namespace WpfApplication2
    {
     /// <summary>
     /// Interaction logic for Window1.xaml
     /// </summary>
     public partial class Window1 : Window
     {
      public Window1()
      {
       this.InitializeComponent();
       
       // Insert code required on object creation below this point.
      }

        private void btnUp_Click(object sender, RoutedEventArgs e)
        {
          LstScroll.LineUp();
        }

        private void btnDown_Click(object sender, RoutedEventArgs e)
        {
          LstScroll.LineDown();
        }
     }
    }


     

    Thursday, April 24, 2008 2:22 PM

All replies