locked
how to stretch the gridviewitems per windows split screen size RRS feed

  • Question

  • Hi,

    I have a vertical grid that will be displayed in snap mode for win8 apps. Now I've retargeted my app to Win8.1 and when i put my app in snap state, this veritcal grid view appears properly at 320px .

    If i increase screen size a bit more, the items in the gridview are not stretching per the split screen. I mean items stay where they are . Please let me know how to stretch my gridview items across as and when pull the windows screen.

    I've just posted a partial XAML code here.

    <ScrollViewer
                    x:Name="itemListScrollViewer"
                    AutomationProperties.AutomationId="ItemListScrollViewer"
                    Grid.Row="1" 
                    Margin="0,10,0,10"
                    Style="{StaticResource VerticalScrollViewerStyle}"
                    VerticalAlignment="Top"
                    HorizontalAlignment="Center">
                    <ScrollViewer.Resources>
                        <CollectionViewSource x:Name="verticalGroupView" IsSourceGrouped="true" ItemsPath="ItemGroups"/>
                    </ScrollViewer.Resources>
                    <Grid>
                        <GridView 
                            x:Name="verticalitemGridView"
                            ItemsSource="{Binding Source={StaticResource verticalGroupView}}"
                            ItemTemplate="{StaticResource Standard80ItemTemplate}"
                            SelectionMode="None"
                            IsItemClickEnabled="True"
                            Visibility="Collapsed">
                            <GridView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <VirtualizingStackPanel Orientation="Vertical"/>
                                </ItemsPanelTemplate>
                            </GridView.ItemsPanel>

                </ScrollViewer>

      Thanks !!
    Friday, October 25, 2013 3:44 AM

Answers

  • Can you explain in more detail what you are trying to do here? What is the expected behavior and how does that differ from the actual behavior.

    You might want to consider switching to a ListView in narrow modes rather than making a vertical GridView. The ListView is designed for vertical display while the GridView is designed for horizontal display.

    You can bind both to the same data and set up VisualStates for Landscape (GridView), Portrait (ListView) and Narrow (ListView) and set the state based on the CoreWindow.SizeChanged event.

    --Rob

    Friday, October 25, 2013 7:25 PM
    Moderator

All replies

  • I think a viewport would work nicely for this.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Friday, October 25, 2013 7:13 PM
    Moderator
  • Can you explain in more detail what you are trying to do here? What is the expected behavior and how does that differ from the actual behavior.

    You might want to consider switching to a ListView in narrow modes rather than making a vertical GridView. The ListView is designed for vertical display while the GridView is designed for horizontal display.

    You can bind both to the same data and set up VisualStates for Landscape (GridView), Portrait (ListView) and Narrow (ListView) and set the state based on the CoreWindow.SizeChanged event.

    --Rob

    Friday, October 25, 2013 7:25 PM
    Moderator
  • Actually there is a vertical grid that was designed exclusively for snapped state. Now that in Win8.1, we've the ability to expand split screen sizes, i'm wondering if there is a property that would let the the grid view items expand as the split screen size expands.

    As of now, grid and its items stays as such and they dont adapt (i mean flow) per the split screen. I tried setting horizontalcontentalignment propery, that didnt work either. I also tried increasing the width of grid, that works, but then my whole point is to understand if there is a property that would let the controls scale across freely as such.

    Thanks !!

    Saturday, October 26, 2013 4:08 AM
  • The Grid will expand to fill the full width by default. If yours isn't doing so then you have a setting or other container blocking that. If you need help tracking it down please post the Grid definition you're having trouble with. Even better would be to share a minimal sample demonstrating the problem on your SkyDrive.

    --Rob

    Wednesday, October 30, 2013 5:10 AM
    Moderator
  • Thanks Rob. I've got this one. I corrected grid width and my controls were scaling by default.

    Is there a way to control split screen setting. I mean a split screen automatically appears at half the screen size, and down till minimum width supported by app.

    I just wanted to know if its possible to show the split screen only at certain sizes instead allowing the user to resize throughout.

    Lets say if we've a split screen at 30% (or 320px), i want to have the next one shown only at 70% not anywhere in between only for a particular page.

    Please let me know if there are any methods to do the same.

    And doing so, please let me know if the app would abide by all microsoft's guidelines as well.

    Thanks !!

    Wednesday, October 30, 2013 8:19 AM
  • The window size is controlled by the user. Apps cannot limit the user to specific sizes.

    --Rob

    Wednesday, October 30, 2013 3:11 PM
    Moderator
  • Thanks Rob. Is blend the only best way to design or correct XAML controls laid out in our store apps. I'm finding it difficult to do through VS. 

    I've a stackpanel which goes out of bounds on shrinking the windows screen size, i have a grid meant for filled state overlapping a snap grid.

    Can you please suggest me best and quick methods to correct UI ? When i open my solution in blend, it throws an error for few pages stating that a particular class is not under the common namespace.

    Thanks !!

    Thursday, October 31, 2013 4:54 PM
  • Blend is a very good way to lay out your Xaml controls. It isn't the only way.

    If you need help please provide more details of what you are doing (show code), what the actual results are, and how they differ from the expected results.

    --Rob       

    Thursday, October 31, 2013 10:14 PM
    Moderator
  • Can you please tell me the other ways.

    By the way, let me put the code sample here.

    <Grid x:Name="Maingrid" Visibility="Collapsed" Height="900" Width="Auto">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="20"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.365*"/>
                    <ColumnDefinition Width="10"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="10"/>
                    <ColumnDefinition Width="0.36*"/>
                </Grid.ColumnDefinitions>

    This is my outer grid, i have different items placed at different rows and i am just posting the control that i'm having trouble with

                                          

     <StackPanel Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="3" x:Name="formpanel"  Orientation="Vertical" SizeChanged="CreateFormPanel_SizeChanged">

                        <Grid x:Name="loggird">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="9"/>
                                <ColumnDefinition Width="0.5*"/>
                                <ColumnDefinition Width="0.5*"/>
                            </Grid.ColumnDefinitions>

                            <TextBlock x:Name="NameTitle" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" x:Uid="AccountLabel" Foreground="#FF888888" Style="{StaticResource FormTitleContentTextStyle}"/>
                            <StackPanel x:Name="acfeatures" Grid.Row="1" Grid.Column="1" Orientation="Vertical" Width="500">
                                <TextBlock x:Name="inst" TextWrapping="Wrap" x:Uid="labl" Style="{StaticResource FormNormalContentTextStyle}"/>
                                <TextBlock TextWrapping="Wrap" x:Uid="tag" Style="{StaticResource FormNormalContentTextStyle}" />
                            </StackPanel>
                            <StackPanel x:Name="acccontrols" Grid.Row="1" Grid.Column="2" Orientation="Vertical" Margin="0,12,0,0">
                                  <TextBlock x:Name="emaillabel" x:Uid="NonEmailLabel" Style="{StaticResource FormNormalContentTextStyle}"/>
                                <TextBox x:Name="emailtextbox" Style="{StaticResource StandardTextBoxStyle}" KeyUp="Email_TextKeyup" TextChanged="Email_TextChanged" MaxLength="128" BorderThickness="2" BorderBrush="LightGray" />
                                <StackPanel x:Name="change" Orientation="Horizontal" Visibility="Collapsed">
                                    <HyperlinkButton Style="{StaticResource BlueStandardLinkStyle}" Margin="0,12,0,12" Click="Forgot_PointerReleased">
                                        <TextBlock x:Uid="pwd" />
                                    </HyperlinkButton>
                                    <HyperlinkButton Style="{StaticResource BlueStandardLinkStyle}" Click="ChangeEmail_PointerReleased">
                                        <TextBlock x:Uid="link" />
                                    </HyperlinkButton>
                                </StackPanel>
                                <Button x:Name="next" Style="{StaticResource StandardButtonStyle}" Click="Button_Click">
                                    <TextBlock x:Uid="nextb" />
                                </Button>

                        </StackPanel>
                       </Grid>
                    <!--</ScrollViewer> -->
                </StackPanel>
               <!-- </ScrollViewer>-->

    The outer stack panel is looking weird when the screen is split somewhere between 500px and 1024. I am trying to make it look better . I already have a vertical layout for widths down 500px. 

    Thanks !!

    Friday, November 1, 2013 4:35 AM
  • CAn you also please tell me if this logic for state determination is sensible ?

    if (width <= 500)
    return "Snapped";
    else if (width > 500 || width <= 1024)
    return "Filled";
    else if (height > width)
    return "FullScreenPortrait";
    else return "FullScreenLandScape";

    Is it always better to test metro apps on 1366*768 resolution ? I've used 1440*900 while perfecting UI and tested it, but its kinda of improper in 1366*768 ? Any best practices or thoughts on this as well.

    Thank you all for helping newbies out.

    Friday, November 1, 2013 6:26 PM
  • Your logic looks reasonable. You should test in a variety of resolutions. The simulator can help with this.

    Without knowing what you mean by "looking weird" or what you want your app to look like we cannot help with your Xaml snippet. If you need help with it then please post enough code that we can reproduce the problem (or better: link a minimal project from your SkyDrive) and explain clearly what you want the actual results to be and how they differ from what you get.

    --Rob


    Thursday, November 7, 2013 2:46 AM
    Moderator