How to position a border outside of hubsections but scrolling with the hub

Question

Hi,

I would like to Position a border element over the hubsections but the border element must scroll with the hub sections.

How can I do this?

Answer 1

Which language are you using so we can help you find an appropriate forum? Is this an HTML or a Xaml hub control? Are you writing in JavaScript? C#? VB? C++?

Answer 2

I try to do this in XAML and VB.

Answer 3

To allow the TextBlock to scroll with the Hub you'll need to include it in the Hub's ScrollViewer. The easiest way to do this is probably to create a new Template for the Hub. Select the Hub in the designer, right click, and choose Edit Template... Edit a copy. This will create a copy of the Hub template in the Page's resources.

Go into that template and find the Grid's ScrollViewer. It will contain an ItemsStackPanel named "Panel" in which the HubSections will be placed. Add a Grid around the ItemsStackPanel and your TextBock in the Grid.

Here's a quick mock-up to give you the idea:

                                <ScrollViewer x:Name="ScrollViewer" HorizontalScrollMode="Auto" HorizontalSnapPointsAlignment="Near" HorizontalSnapPointsType="Optional" HorizontalScrollBarVisibility="Auto" Grid.RowSpan="2" VerticalSnapPointsType="Optional" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalSnapPointsAlignment="Near" ZoomMode="Disabled">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="500"/>
                                            <ColumnDefinition Width="*"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition />
                                            <RowDefinition />
                                        </Grid.RowDefinitions>
                                        <ItemsStackPanel Grid.ColumnSpan="2" Grid.RowSpan="2"  x:Name="Panel" CacheLength="20" Orientation="{TemplateBinding Orientation}"/>
                                        <TextBlock Grid.Column="0" Grid.Row="1" Foreground="Red" Text="Lorem ipsum" FontSize="72" TextAlignment="Right"/>
                                    </Grid>
                                </ScrollViewer>

--Rob

Answer 4

Thank you for your help.

I've got it now, I worked with negative margins.