How to Auto scroll scrollviewer to specefic position

Question

I have a custom user control ExpanderListUC, it contains a list of expanders each expander has a stackpanel which contains a list of labels.

I've added a scrollviewer to scroll up and down through the expanders content.

In some cases I've to automatically select label 4 in expander 4 through code behind.

How can i automatically set the position of the scrollviewer to the selected label ?

 <ScrollViewer x:Name="sv" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Hidden" HorizontalAlignment="Left" Width="205">
        <StackPanel Name="spContentPresenter" Background="Transparent" HorizontalAlignment="Right" >
            <StackPanel.ContextMenu>
                <ContextMenu x:Name ="ExpanderContextMenu" StaysOpen="true">
                    <MenuItem x:Name="collapseAllMenuItem" Header="Collapse All" Foreground="Black" />
                    <MenuItem x:Name="expandAllMenuItem" Header="Expand All" Foreground="Black"  />
                </ContextMenu>
            </StackPanel.ContextMenu>
            <Expander FlowDirection="LeftToRight" IsEnabled="True" IsExpanded="True"  >
                <!--Background="#FF1F5897"-->
                <Expander.Header>
                    <!--<Run Text="Electrical Information" Foreground="Black"/>-->
                    <TextBlock HorizontalAlignment="Right" Foreground="Black"><Run Text="Expander 1"/></TextBlock>
                </Expander.Header>
                <Grid Margin="0" >
                    <StackPanel Width="200" HorizontalAlignment="Right">
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 1" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 2" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 3" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 4" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 5" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 6" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 7" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 8" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 9" Height="26" />
                        <!--Style="{DynamicResource ClickableLabel}"-->
                    </StackPanel>
                </Grid>
            </Expander>
            <Expander FlowDirection="LeftToRight" IsEnabled="True" IsExpanded="True"  >
                <!--Background="#FF1F5897"-->
                <Expander.Header>
                    <!--<Run Text="Electrical Information" Foreground="Black"/>-->
                    <TextBlock HorizontalAlignment="Right" Foreground="Black"><Run Text="Expander 2"/></TextBlock>
                </Expander.Header>
                <Grid Margin="0" >
                    <StackPanel Width="200" HorizontalAlignment="Right">
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 1" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 2" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 3" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 4" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 5" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 6" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 7" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 8" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 9" Height="26" />
                        <!--Style="{DynamicResource ClickableLabel}"-->
                    </StackPanel>
                </Grid>
            </Expander>
            <Expander FlowDirection="LeftToRight" IsEnabled="True" IsExpanded="True"  >
                <!--Background="#FF1F5897"-->
                <Expander.Header>
                    <!--<Run Text="Electrical Information" Foreground="Black"/>-->
                    <TextBlock HorizontalAlignment="Right" Foreground="Black"><Run Text="Expander 3"/></TextBlock>
                </Expander.Header>
                <Grid Margin="0" >
                    <StackPanel Width="200" HorizontalAlignment="Right">
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 1" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 2" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 3" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 4" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 5" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 6" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 7" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 8" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 9" Height="26" />
                        <!--Style="{DynamicResource ClickableLabel}"-->
                    </StackPanel>
                </Grid>
            </Expander>
            <Expander FlowDirection="LeftToRight" IsEnabled="True" IsExpanded="True"  >
                <!--Background="#FF1F5897"-->
                <Expander.Header>
                    <!--<Run Text="Electrical Information" Foreground="Black"/>-->
                    <TextBlock HorizontalAlignment="Right" Foreground="Black"><Run Text="Expander 4"/></TextBlock>
                </Expander.Header>
                <Grid Margin="0" >
                    <StackPanel Width="200" HorizontalAlignment="Right">
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 1" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 2" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 3" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 4" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 5" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 6" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 7" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 8" Height="26" />
                        <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 9" Height="26" />
                        <!--Style="{DynamicResource ClickableLabel}"-->
                    </StackPanel>
                </Grid>
            </Expander>                
        </StackPanel>
    </ScrollViewer>

score 1 · Answer 1 · answered Feb 02 '13 at 10:19

I had a similar problem. Best way to do it is to make your Expander a separated control and use ItemsControl, like this:

<UserControl x:Class="WpfApplication9.UserControl1"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d"
         d:DesignHeight="423" d:DesignWidth="368">
<Grid Background="White">
    <Expander FlowDirection="LeftToRight" IsEnabled="True" IsExpanded="True"  >
        <!--Background="#FF1F5897"-->
        <Expander.Header>
            <!--<Run Text="Electrical Information" Foreground="Black"/>-->
            <TextBlock HorizontalAlignment="Right" Foreground="Black"><Run Text="Expander 1"/></TextBlock>
        </Expander.Header>
        <Grid Margin="0" >
            <StackPanel Width="200" HorizontalAlignment="Right">
                <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 1" Height="26" />
                <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 2" Height="26" />
                <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 3" Height="26" />
                <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 4" Height="26" />
                <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 5" Height="26" />
                <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 6" Height="26" />
                <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 7" Height="26" />
                <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 8" Height="26" />
                <Label Margin="0,0,10,0"  HorizontalAlignment="Right" Content="Label 9" Height="26" />
                <!--Style="{DynamicResource ClickableLabel}"-->
            </StackPanel>
        </Grid>
    </Expander>
</Grid>

    <Grid x:Name="Grid">
    <ScrollViewer x:Name="ScrollViewer" >
        <Grid>
            <ItemsControl x:Name="ItemsControl" ItemsSource="{Binding /*some list*/}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate DataType="/*some type to bind to*/">
                        <my:UserControl1/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Grid>
    </ScrollViewer>
</Grid>


    void ScrollToIndex(int index) {
        UIElement uiElement = (UIElement) ItemsControl.ItemContainerGenerator.ContainerFromIndex(index);
        if (uiElement != null) {
            double y = uiElement.TranslatePoint(new System.Windows.Point(0, 0), Grid).Y;
            ScrollViewer.ScrollToVerticalOffset(y);
        }
    }

I already have a separate control for expander. I tried your code and the provided method didn't work. — Cracker, Feb 03 '13 at 09:57

How to Auto scroll scrollviewer to specefic position

1 Answers1