How to have Popup go to the bottom left of the screen when scrolling, Windows 8 App

Question

Hello i am trying to have a Grid that is always visible even when the user is scrolling in the application. This will allow me to always so information to my user, its a bit like a mini player instead i am showing information.

I would like to always have the Orange Grid visible when scroll, i tried using the popup control but this didn't seem to do the trick. Does anyone have an idea how i could do this? And on how i could create the transition?

First Page

what i would like when I scroll in the first page: enter image description here

Here is my code:

 <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid
            Background="Red"
            Row="0" />

        <Grid
            Background="Blue"
            Row="1">

            <ScrollViewer
                x:Name="scrollviewer"
                HorizontalScrollBarVisibility="Visible"
                HorizontalScrollMode="Enabled"
                VerticalScrollBarVisibility="Disabled"
                VerticalScrollMode="Disabled"
                ZoomMode="Disabled"
                >

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid
                        Width="600"
                        Background="Chartreuse"
                        Column="0">
                        <Popup IsOpen="True" VerticalOffset="300" HorizontalOffset="10">
                            <Popup.Transitions>
                                <TransitionCollection>
                                    <PopupThemeTransition />
                                </TransitionCollection>
                            </Popup.Transitions>
                            <Grid
                        Height="281"
                                Width="498"
                                Background="DarkOrange"
                                />
                        </Popup>
                    </Grid>

                    <Hub Grid.Column="1">
                        <HubSection>
                            <DataTemplate>
                                <Grid
                                    Height="700"
                                    Width="400"
                                    Background="IndianRed" />
                            </DataTemplate>
                        </HubSection>
                        <HubSection>
                            <DataTemplate>
                                <Grid
                                    Height="700"
                                    Width="400"
                                    Background="LightBlue" />
                            </DataTemplate>
                        </HubSection>
                        <HubSection>
                            <DataTemplate>
                                <Grid
                                    Height="700"
                                    Width="400"
                                    Background="DarkOrange" />
                            </DataTemplate>
                        </HubSection>
                        <HubSection>
                            <DataTemplate>
                                <Grid
                                    Height="700"
                                    Width="400"
                                    Background="HotPink" />
                            </DataTemplate>
                        </HubSection>
                    </Hub>
                </Grid>
            </ScrollViewer>
        </Grid>

    </Grid>

score 0 · Accepted Answer · answered Sep 02 '14 at 15:04

No sweat, you'll just use your DOM to plop that smaller orange square right over the top of your ScrollViewer area as the easiest route. Something like this (see where I literally just pulled it out and slapped it on top.)

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid
            Background="Red"
            Row="0" />

        <Grid
            Background="Blue"
            Row="1">

            <ScrollViewer
                x:Name="scrollviewer"
                HorizontalScrollBarVisibility="Visible"
                HorizontalScrollMode="Enabled"
                VerticalScrollBarVisibility="Disabled"
                VerticalScrollMode="Disabled"
                ZoomMode="Disabled"
                >

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Grid
                        Width="600"
                        Background="Chartreuse"
                        Column="0"/>

                    <Hub Grid.Column="1">
                        <HubSection>
                            <DataTemplate>
                                <Grid
                                    Height="700"
                                    Width="400"
                                    Background="IndianRed" />
                            </DataTemplate>
                        </HubSection>
                        <HubSection>
                            <DataTemplate>
                                <Grid
                                    Height="700"
                                    Width="400"
                                    Background="LightBlue" />
                            </DataTemplate>
                        </HubSection>
                        <HubSection>
                            <DataTemplate>
                                <Grid
                                    Height="700"
                                    Width="400"
                                    Background="DarkOrange" />
                            </DataTemplate>
                        </HubSection>
                        <HubSection>
                            <DataTemplate>
                                <Grid
                                    Height="700"
                                    Width="400"
                                    Background="HotPink" />
                            </DataTemplate>
                        </HubSection>
                    </Hub>

                </Grid>

            </ScrollViewer>

            <!-- Just had to pull it out, and slap it on top -->            
            <Grid Height="281" Width="498"
                  Background="DarkOrange" 
                  VerticalAlignment="Bottom" HorizontalAlignment="Left"
                  Margin="10"/>

        </Grid>

    </Grid>

Hope this helps, cheers!

Thx, the problem is that i need my grid to be nested in there at first when my user arrives on the page, is there a way for me to use a transition property to set it at the bottom afterwards? — Damien, Sep 02 '14 at 22:40
Probably, can you be a bit more specific with your requirements? Like when the user first enters they see what, and what invokes your little box to appear at the bottom left? etc. — Chris W., Sep 03 '14 at 03:33
Le in the Orange Grid i will have information related to the article people a reading, when they scroll they see releated article to this article. First Page: http://i.imgur.com/TteTnnY.png what i would like when I scroll in the first page: http://i.imgur.com/6sp79mY.png — Damien, Sep 03 '14 at 08:07
So they start with img1, then when they start scrolling it turns into img 2? That will require a bit more finesse, if I have time later I'll take another look. — Chris W., Sep 03 '14 at 14:23

How to have Popup go to the bottom left of the screen when scrolling, Windows 8 App

1 Answers1