Set in Silverlight an image to specific location

Question

I am working on a WP7 app. Well on one of the pages I would like to have a question mark available for users to select. Only trouble I am having is keeping it in a set location. If real estate is available, I want it to be at the bottom right corner all the time. But if the user should need to scroll, I want that item to have to be scrolled to as well.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    ....
    <StackPanel Grid.Row="1">
        <Image Source="/Images/question_mark.png" Stretch="None" 
            VerticalAlignment="Bottom" HorizontalAlignment="Right" />
    </StackPanel>
</Grid>

So how can I keep an image/button at the bottom of the page? Do I need to change anything so that it will always be at the bottom if the user needs to scroll? I appreciate your help!

Answer 1

It sounds like you want the image to be on the bottom of the scrollable content. To do so, place a StackPanel inside of a ScrollViewer

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <ScrollViewer x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <StackPanel>
            <Rectangle Height="400" Fill="Brown" />
            <Rectangle Height="400" Fill="Green" />
            <Image Source="/Images/question_mark.png" Stretch="None"  
                VerticalAlignment="Bottom" HorizontalAlignment="Right" />
        </StackPanel>
    </ScrollViewer>
</Grid>