locked
How align Grouped Items vertically

    Question


  • I couldn't find a way to put 2 groups items align vertically according window size (one bellow the other) :(

    Here is my xaml code:

            <SemanticZoom x:Name="semanticZoom" Grid.RowSpan="2">
                <SemanticZoom.ZoomedInView>
                    <!-- Horizontal scrolling grid used in most view states -->
                    <GridView 
                        IsEnabled="{Binding ItemGridViewEnabled}"
                        Background="#F1F1F5"
                        x:Name="itemGridView"
                        AutomationProperties.AutomationId="ItemsGridView"
                        AutomationProperties.Name="Items"
                        TabIndex="1"
                        Grid.RowSpan="2"
                        Padding="120,200,116,100"
                        ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                        ItemTemplateSelector="{StaticResource TypeSelector}"
                        SelectionMode="Multiple"
                        IsSwipeEnabled="true"
                        IsItemClickEnabled="True"
                        SelectionChanged="itemGridView_SelectionChanged"
                        ItemClick="ItemView_ItemClick">
                        <GridView.ItemContainerStyle>
                            <Style TargetType="FrameworkElement">
                                <Setter Property="Margin" Value="0 0 15 15"/>
                            </Style>
                        </GridView.ItemContainerStyle>

                        <GridView.GroupStyle>
                            <GroupStyle HidesIfEmpty="True">
                                <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <Button Style="{StaticResource TextBlockButtonStyle}" Click="Button_Click" >
                                            <StackPanel Orientation="Vertical">
                                                <TextBlock Text='{Binding Key}' Margin="0,10" FontSize="28" FontFamily="Segoe UI" FontWeight="Normal" Foreground="#EC1C29"/>
                                                <Border Height="2" Background="#A9A9A9" VerticalAlignment="Top" Margin="0,0,0,10" Width="300"/>
                                            </StackPanel>
                                        </Button>
                                    </DataTemplate>
                                </GroupStyle.HeaderTemplate>
                                
                            </GroupStyle>
                        </GridView.GroupStyle>

                    </GridView>
                </SemanticZoom.ZoomedInView>
                <SemanticZoom.ZoomedOutView>
                    <GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False"
                              Grid.RowSpan="2"
                              SelectionMode="None"
                              IsSwipeEnabled="false"
                              Padding="120,200,116,100">
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <TextBlock
                                    TextAlignment="Center"
                                    Width="180"
                                    Text="{Binding Group.Key}"
                                    Foreground="#A9A9A9"
                                    FontFamily="Segoe UI" FontWeight="Normal"
                                    FontSize="30"/>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <ItemsWrapGrid MaximumRowsOrColumns="4"/>
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                        <GridView.ItemContainerStyle>
                            <Style TargetType="GridViewItem">
                                <Setter Property="Margin" Value="4" />
                                <Setter Property="Padding" Value="10" />
                                <Setter Property="BorderBrush" Value="Gray" />
                                <Setter Property="BorderThickness" Value="1" />
                                <Setter Property="VerticalAlignment" Value="Center"/>
                                <Setter Property="HorizontalContentAlignment" Value="Center" />
                                <Setter Property="VerticalContentAlignment" Value="Center" />
                                <!--Setter Property="Background" Value="#A9A9A9" /-->
                            </Style>
                        </GridView.ItemContainerStyle>
                    </GridView>

                </SemanticZoom.ZoomedOutView>
            </SemanticZoom>

    Here is my app:

    I want to align like this:


    Anyone have some idea?

    Thank you very much.


    Gustavo

    Monday, April 28, 2014 9:52 PM

Answers

  • Hi Gustavo,

    There is not good way to merge multiple groups in the same column in a Xaml GridView. You would need to implement your own custom layout.

    The start screen is not based on the Xaml GridView code. While it has the same basic design patterns, the exact details are different.

    --Rob

    Tuesday, April 29, 2014 3:33 AM
    Owner

All replies

  • Hi Gustavo,

    By setting some code as I did you can do this:

                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <ItemsWrapGrid GroupHeaderPlacement="Top" MaximumRowsOrColumns="1" Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>

    The result can be as below, however I cannot figure out how to make it display as multiple lines:

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, April 29, 2014 2:04 AM
    Moderator
  • Hi Gustavo,

    There is not good way to merge multiple groups in the same column in a Xaml GridView. You would need to implement your own custom layout.

    The start screen is not based on the Xaml GridView code. While it has the same basic design patterns, the exact details are different.

    --Rob

    Tuesday, April 29, 2014 3:33 AM
    Owner
  • Thank you James!

    Actually I'm searching for a vertical group and items solution as you can see at print of start screen. 
    Currently my app align the items vertically, but the group items align the items horizontally. 

    Using your solution I have (just 1 column):

    

    And the ZoomedInView, ZoomedOutView doesn't work anymore.

    Anyway, thank you very much for your help!
    Best regards,


    Gustavo


    Tuesday, April 29, 2014 1:56 PM
  • Hi Rob,

    I understand, but, I want to use the same pattern of start screen. 

    I'm a little frustrated that I can't do the recommend layout from microsoft (http://msdn.microsoft.com/en-us/library/windows/apps/hh465319.aspx#examples)

    using the microsoft sample or quickstart guide.
    How can I do that using a custom layout?

    Thank you very much Rob. 
    BR,


    Gustavo

    Tuesday, April 29, 2014 2:08 PM
  • There isn't anything built in for this, so you'll need to write the code yourself. It's beyond what I can provide as a sample.

    --Rob

    Saturday, May 3, 2014 3:26 AM
    Owner
  • I understand! Thank you!

    Gustavo

    Monday, May 5, 2014 2:08 PM