locked
ScrollViewer.TopHeader - How to stretch it similar to ScrollViewer.Content

    Question

  • Hi,

    I am using the scrollviewer and templates for ScrollViewer.TopHeader and ScrollViewer.Content to create the following UI design as seen in the screenshot below

     

    The Columns in the header need to be aligned with the fields in the content below and the header needs to be static as well.

    I am unable to make the header stretch similar to the content. Given below is the xaml code.

    <ScrollViewer Grid.Row="1" Grid.Column="1"  ScrollViewer.ZoomMode="Disabled" ScrollViewer.IsHorizontalScrollChainingEnabled="False" 
                              ScrollViewer.IsHorizontalRailEnabled="False" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto">
    
                <ScrollViewer.TopHeader>
                    
                    <Border BorderThickness="2" BorderBrush="Black" Margin="5">
                        <Grid Background="Orange" >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition></ColumnDefinition>
                                <ColumnDefinition></ColumnDefinition>
                                <ColumnDefinition></ColumnDefinition>
                                <ColumnDefinition></ColumnDefinition>
                                <ColumnDefinition></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                           
                            <Border BorderBrush="Blue" BorderThickness="2" Grid.Column="0" >
                                <TextBlock Text="Column1"  HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource  SubheaderTextBlockStyle}"></TextBlock>
                            </Border>
                            <Border BorderBrush="Blue" BorderThickness="2" Grid.Column="1">
                                <TextBlock Text="Column2"  HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource  SubheaderTextBlockStyle}"></TextBlock>
                            </Border>
                            <Border BorderBrush="Blue" BorderThickness="2" Grid.Column="2">
                                <TextBlock Text="Column3"  HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource  SubheaderTextBlockStyle}"></TextBlock>
                            </Border>
                            <Border BorderBrush="Blue" BorderThickness="2" Grid.Column="3">
                                <TextBlock Text="Column4"  HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource  SubheaderTextBlockStyle}"></TextBlock>
                            </Border>
                            <Border BorderBrush="Blue" BorderThickness="2" Grid.Column="4">
                                <TextBlock Text="Column5"  HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource  SubheaderTextBlockStyle}"></TextBlock>
                            </Border>
                        </Grid>
                    </Border>
                </ScrollViewer.TopHeader>
                <ScrollViewer.Content>

    Can someone please clarify the following

    1. How do I achieve what I have explained above. Is it possible with scrollviewer alone or should I create an user control and add another panel above the scrollviewer to achieve the objective ?

    2. I looked at the default control template for the scrollviewer from C:\Program Files\Windows Kits\8.1\Include\winrt\xaml\design\generic.xaml and the relevant part is given below.

    My understanding is that all the scrollviewer content is rendered within the ScrollContentPresenter but I am not sure how and where the xaml within ScrollViewer.TopHeader section is getting rendered. I tried to edit the template in Blend but couldn't understand it.

    Is it possible to modify the template below to achieve the objective and if so what approach needs to be taken ?

    <!-- Default style for Windows.UI.Xaml.Controls.ScrollViewer -->
        <Style TargetType="ScrollViewer">
            <Setter Property="HorizontalScrollMode" Value="Enabled" />
            <Setter Property="VerticalScrollMode" Value="Enabled" />
            <Setter Property="IsHorizontalRailEnabled" Value="True" />
            <Setter Property="IsVerticalRailEnabled" Value="True" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="ZoomMode" Value="Enabled" />
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="VerticalScrollBarVisibility" Value="Visible"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ScrollViewer">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                           
                            <Grid Background="{TemplateBinding Background}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <ScrollContentPresenter x:Name="ScrollContentPresenter"
                                                        Grid.RowSpan="2"
                                                        Grid.ColumnSpan="2"
                                                        ContentTemplate="{TemplateBinding ContentTemplate}"
                                                        Margin="{TemplateBinding Padding}" />
                                <ScrollBar x:Name="VerticalScrollBar"
                                           Grid.Column="1"
                                           IsTabStop="False"
                                           Maximum="{TemplateBinding ScrollableHeight}"
                                           Orientation="Vertical"
                                           Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                           Value="{TemplateBinding VerticalOffset}"
                                           ViewportSize="{TemplateBinding ViewportHeight}"
                                           HorizontalAlignment="Right"/>
                                <ScrollBar x:Name="HorizontalScrollBar"
                                           IsTabStop="False"
                                           Maximum="{TemplateBinding ScrollableWidth}"
                                           Orientation="Horizontal"
                                           Grid.Row="1"
                                           Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                           Value="{TemplateBinding HorizontalOffset}"
                                           ViewportSize="{TemplateBinding ViewportWidth}" />
                                <Border x:Name="ScrollBarSeparator"
                                        Grid.Row="1"
                                        Grid.Column="1"
                                        BorderThickness="0,0,1,1"
                                        Background="{ThemeResource ScrollBarTrackBackgroundThemeBrush}"
                                        BorderBrush="{ThemeResource ScrollBarTrackBorderThemeBrush}" />
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    Wednesday, December 24, 2014 9:50 AM

Answers

  • Hi FortuFavor,

    I am unable to make the header stretch similar to the content.

    -> How about using the binding?

     <Border BorderThickness="2" BorderBrush="Black" Margin="5" Width="{Binding ElementName=scrollviewer,Path=Content.Width}">

    Final result:

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • Marked as answer by FortuFavor Tuesday, January 6, 2015 8:50 AM
    Thursday, December 25, 2014 6:01 AM
    Moderator