自动向下滚动以查看列表中的选定项目

Question

I am using MVVM.. I am having a List of xml Nodes in property InputTemplates. I want the list to be scrolled down automatically, when i select any item of the list from my view model. I know that i have to use a property "SelectedItem" in my view Model that will help.

<Border BorderBrush="{StaticResource BorderBrush}" 
IsEnabled="{Binding Path=InputTemplateBorderEnabled}" 
BorderThickness="2" CornerRadius="5" Canvas.Left="1" Canvas.Top="84" Height="240" Name="border7" Width="432" >
      <HeaderedContentControl    
                Content="{Binding Path=InputTemplates,Mode=OneTime}"
                Header="{Binding Path=INTemplateLabel}"
                ContentTemplate="{StaticResource FileTabTemplate}"
                Style="{StaticResource MainHCCStyle}" Width="420" Height="237" />
</Border>
 <DataTemplate x:Key="FileTabTemplate">
        <st:ScrollableTabControl Background="#FFF0F9F8"  
          IsSynchronizedWithCurrentItem="True" 
          ItemsSource="{Binding}" 
          ItemTemplate="{StaticResource FileTabItemTemplate}"                 
          Margin="1">
        </st:ScrollableTabControl>
</DataTemplate>
<DataTemplate x:Key="FileTabItemTemplate" >       
        <DockPanel>
            <TextBlock Name="textBlock" Text="{Binding Path=Keyword}" ToolTip="{Binding Path=FileName}"  FontFamily="Microsoft Sans Serif" FontSize="10"  TextWrapping="NoWrap"/>
        </DockPanel>

        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding Path=IsSelected,RelativeSource={RelativeSource TemplatedParent}}" Value="True">
                <Setter TargetName="textBlock" Property="Foreground" Value="Indigo"/>
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>
ObservableCollection<CommonResource.ViewModel.FileTemplateViewModel> inputTemplates;

foreach (XMLTemplateViewModel xmlvm in inputTemplates)
{
   list = xmlvm.XMlRootNodes[iSearchRootNode];
   list.SelectedItem = MyList[iSelectionIndex];// MyList is a list of few items TreeViewWithIcons
}

On setting list.SelectedItem, the selected item should be visible in the screen after automatic scrolling down. Do i have to use any event for this? Please also provide the code for property "SelectedItem".

Answer 1

When you are using a ListBox or ListView you could try this:

public class ScrollIntoViewBehavior:Behavior<ListBox>
{
    protected override void OnAttached()
    {
        AssociatedObject.SelectionChanged += new SelectionChangedEventHandler(AssociatedObject_SelectionChanged);
    }

    void AssociatedObject_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (e.AddedItems.Count > 0)
        {
            (sender as ListBox).ScrollIntoView(e.AddedItems[0]);
        }
    }
}

Change the logic to whatever you want :)

Answer 2

May be this link can help...

http://kiwigis.blogspot.in/2010/12/how-to-add-scrollintoview-to.html

Bascially you would ned to find out the item container of your ItemsControl such as ListBoxItem , TreeViewItem , ComboBoxItem , ListViewItem , DataGridRow etc. and call its BringIntoView() function.

In MVVM, this can be via attached behaviors.

Answer 3

This is the format of data in the XML item view. I want to know that how to add a trigger such that when HeaderTextBlock is selected, the scroll bar moves down to make selected item visible.

                <HierarchicalDataTemplate  DataType="{x:Type cr:TreeViewWithIcons}" ItemsSource="{Binding Path=ChildNodes,Mode=OneTime}">                       
                        <StackPanel Orientation="Horizontal" Name="stackpanel" IsEnabled="False" >
                        <Image Source="{Binding Path=Icon}"/>
                        <TextBlock Name="HeaderTextBlock" Text="{Binding Path=HeaderText}" Background="{Binding Path=BackgroundColor,Mode=TwoWay,NotifyOnSourceUpdated=True}" Foreground="{Binding Path=HeaderColor,Mode=TwoWay,NotifyOnSourceUpdated=True}" IsEnabled="False">
                        </TextBlock>
                    </StackPanel>
                    <HierarchicalDataTemplate.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource= {RelativeSource Mode=FindAncestor, AncestorType= {x:Type TreeViewItem}},Path=IsSelected}" Value="True">
                            <Setter TargetName="HeaderTextBlock" Property="Foreground" Value="Red"/>
                            <Setter TargetName="stackpanel" Property="Background" Value="LightGray"/>
                            <Setter TargetName="HeaderTextBlock" Property="Background" Value="LightGray"/>
                            <Setter Property="BitmapEffect">
                                <Setter.Value>
                                    <OuterGlowBitmapEffect GlowColor="Black" />
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding Path=IsSelected,RelativeSource={RelativeSource TemplatedParent}}" Value="True">
                            <Setter TargetName="HeaderTextBlock" Property="Foreground" Value="Purple"/>
                            <Setter TargetName="HeaderTextBlock" Property="Visibility" Value="Visible"/>
                        </DataTrigger>
                    </HierarchicalDataTemplate.Triggers>
                </HierarchicalDataTemplate>
            </ResourceDictionary>
        </cr:ExtendedTreeView.Resources>