none
Out of the boundaries control

    Question

  • What control do I have to use to show content that goes beyond the window boundaries?

    If I use a Gridview that is bigger than the window itself, farthest elements are not reachable even when scrolling all to the right.

    Thanks,

    Luca

    Sunday, October 28, 2012 6:49 PM

Answers

  • Hi Luca,

    Thanks for providing more detail. I had misunderstood that the GridView itself was all on screen, but that the items within it couldn't scroll into view, not that the GridView itself was offscreen.

    To fix that you will need to make sure that the GridView itself is on-screen. The easiest way is probably to wrap your entire stack of controls in a ScrollViewer so the user can scroll them left to right. If you are only slipping a little bit off of the screen then that would look kind of ugly, and you would be better off rearranging the items so that they fit. You can set up the items in Grid columns to have more control over where they are on the screen.

    --Rob

    Monday, October 29, 2012 5:00 PM
    Owner

All replies

  • You cannot show content outside of the window boundaries. You will need to provide some way to scroll into view.

    Can you explain in more detail what you mean by your GridView elements not being reachable? They should be scrollable into view. Can you provide a minimal code snippet and steps to reproduce the problem?

    If you will let us know which language and UI you are using (JavaScript/HTML, C#/Xaml, C++/Xaml) we can move you to an appropriate forum.

    --Rob

    Sunday, October 28, 2012 8:21 PM
    Owner
  • I'm sorry for the incomplete question but it was my first time here. I'm coding in C#. In the following xaml fragment, the last Gridview is outside boundaries and, depending on resolution, could be unreachable:

    <Grid Style="{StaticResource LayoutRootStyle}">
            <Grid.RowDefinitions>
                <RowDefinition Height="100"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="100"/>
            </Grid.RowDefinitions>
    
            <Grid x:Name="ControlBar" Visibility="Collapsed" Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <ProgressBar x:Name="Progress" Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                <TextBlock x:Name="Counter" Text="RWND" TextAlignment="Center" TextWrapping="Wrap" FontSize="80" HorizontalAlignment="Center" VerticalAlignment="Top"/>
                <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch" HorizontalAlignment="Left" >
                    <Button x:Name="RWNDButton" VerticalAlignment="Center" Content="RWND" Height="50" HorizontalAlignment="Left" Click="RewindButton_Click" BorderThickness="0" Background="Blue" Margin="20,0,0,10"/>
                    <Button x:Name="PlayButton" VerticalAlignment="Center" Content="PLAY"  Height="50" HorizontalAlignment="Center" Click="PlayButton_Click" BorderThickness="0" Background="Green" Margin="0,0,0,10"/>
                    <Button x:Name="FFWDButton" VerticalAlignment="Center" Content="FFWD"  Height="50" HorizontalAlignment="Right" Click="ForwardButton_Click" BorderThickness="0" Background="Blue" Margin="0,0,20,10"/>
                </StackPanel>
            </Grid>
    
            <TextBlock x:Name="pageTitle" Margin="50,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Row="0" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
            <Grid x:Name="MainGrid" Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition x:Name="ControlColumn" Width="30*"/>
                    <ColumnDefinition Width="70*"/>
                </Grid.ColumnDefinitions>
                
                <MediaElement x:Name="MediaPlayer" Width="100" Grid.Column="0" HorizontalAlignment="Left" Height="67" Margin="20,156,0,0" Grid.Row="0" VerticalAlignment="Top" Volume="5" Grid.ColumnSpan="1"/>
                <StackPanel x:Name="EpisodeInfo" Visibility="Visible">
                    <TextBlock x:Name="EpTitle" TextWrapping="Wrap" Grid.Column="0" TextAlignment="Left" VerticalAlignment="Center" FontSize="28" Margin="30,10,30,10" />
                    <WebView x:Name="WebContent" Height="400" Grid.Column="0" Margin="30,30,30,30" />
                </StackPanel>
    
                <!--Parte destra - Elenco Episodi-->
                <StackPanel x:Name="stackPanel" Orientation="Horizontal" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Column="1">
                    <StackPanel Margin="0,0,60,0">
                            <TextBlock Width="300" Text="Novità" VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="54" TextAlignment="Left" />
                            <StackPanel Orientation="Horizontal" Height="550">
                                <Canvas x:Name="LatestEpisode" Width="300" Height="300" VerticalAlignment="Top" Margin="0,4,5,0" Tapped="LatestEpisode_Tapped" />
                                <ListView x:Name="Recent" Width="200" SelectionChanged="Recent_SelectionChanged" >
                                    <Canvas x:Name="Episode1" Width="180" Height="180" VerticalAlignment="Top" />
                                    <Canvas x:Name="Episode2" Width="180" Height="180" VerticalAlignment="Top" />
                                </ListView>
                            </StackPanel>
                    </StackPanel>
                    <StackPanel>
                            <TextBlock Width="500" Text="Archivio" VerticalAlignment="Top" HorizontalAlignment="Left" FontSize="54" TextAlignment="Left" />
                            <GridView x:Name="Archive" Height="500" SelectionChanged="Archive_SelectionChanged" >
                                    <!--<GridViewItem Background="Blue" Width="180" Height="180"></GridViewItem>
                                    <GridViewItem Background="Blue" Width="180" Height="180"></GridViewItem>-->
                            </GridView>
                    </StackPanel>
                </StackPanel>
            </Grid>

     

    Sunday, October 28, 2012 8:55 PM
  • Hi Luca,

    Thanks for providing more detail. I had misunderstood that the GridView itself was all on screen, but that the items within it couldn't scroll into view, not that the GridView itself was offscreen.

    To fix that you will need to make sure that the GridView itself is on-screen. The easiest way is probably to wrap your entire stack of controls in a ScrollViewer so the user can scroll them left to right. If you are only slipping a little bit off of the screen then that would look kind of ugly, and you would be better off rearranging the items so that they fit. You can set up the items in Grid columns to have more control over where they are on the screen.

    --Rob

    Monday, October 29, 2012 5:00 PM
    Owner