C# – WPF – centering content in a scrollviewer

cscrollviewerwpf

I have a scrollviewer that contains a stackpanel of textblock items (actually, these are probably tabitems, I'm using a stackpanel inside a scrollviewer to override the default tabpanel in a tabcontrol template). What I'd like to be able to do is, when the selected tab is changed, move the newly selected tab to the center of the scrollviewer's visible area. Ideally this would work for all the tabs, even those on the far sides, but I would settle for being able to tell the scrollviewer to scroll such that a particular element is as close to centered as possible.

Are there any obvious ways to achieve this in WPF? All the solutions I can think of right now involve a lot of work on custom controls.

enter image description here

Best Answer

You can easily set the content to the center using the following code;

scrollviewer.ScrollToVerticalOffset(scrollviewer.ScrollableHeight / 2);
scrollviewer.ScrollToHorizontalOffset(scrollviewer.ScrollableWidth / 2);

Related Solutions

WPF TabControl Databinding

<TabControl x:Name="_tabControl" ItemsSource="{Binding PageModels}">
    <TabControl.ItemContainerStyle>
        <Style TargetType="TabItem">
            <Setter Property="Header" Value="{Binding TabCaption}"/>
            <Setter Property="Content" Value="{Binding TabContent}"/>
        </Style>
    </TabControl.ItemContainerStyle>
</TabControl>
<TextBlock Text="{Binding SelectedItem.Title, ElementName=_tabControl}"/>

WPF: Center TabItems in a TabControl

Internally, the TabControl uses a TabPanel to layout the tabs. Using the default template, you just need to set the HorizontalAlignment of the TabPanel through a style:

<TabControl>
    <TabControl.Resources>
        <Style TargetType="{x:Type TabPanel}">
            <Setter Property="HorizontalAlignment" Value="Center" />
        </Style>
    </TabControl.Resources>

    <TabItem Header="Test 1" />
    <TabItem Header="Test 2" />
    <TabItem Header="Test 3" />
    <TabItem Header="Test 4" />
</TabControl>

Related Topic

Wpf – way to touch-enable scrolling in a WPF ScrollViewer