locked
GridView inside GridView Music and Album List

    Question

  • Hi, i'm try to create view like in the picture. I have a problem with GridView inside GridView - i can not set his up to stretch in horizontal instead of add scroll. How can i resolve this?

    XAML:

        <GridView Margin="0,30,0,0" ItemsSource="{Binding Album, Mode=OneTime}" SelectionMode="None" ItemContainerStyle="{StaticResource ItemSkin}">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid MaximumRowsOrColumns="1"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="2*" MinHeight="150"/>
                            <RowDefinition Height="8*"/>
                        </Grid.RowDefinitions>
                        <Grid Grid.Row="0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="1*"/>
                                <ColumnDefinition Width="1*"/>
                            </Grid.ColumnDefinitions>
                            <Image Grid.Column="0" HorizontalAlignment="Left" Stretch="Uniform" Source="{Binding Image}"/>
                            <TextBlock Grid.Column="1" Text="{Binding Title}" FontSize="20"/>
                        </Grid>
                        <GridView Grid.Row="1" MinWidth="500" ScrollViewer.HorizontalScrollBarVisibility="Disabled" MaxWidth="1000"
                              VerticalAlignment="Stretch" ItemsSource="{Binding MusicFiles, Mode=OneTime}" SelectionMode="None" ShowsScrollingPlaceholders="False">
                            <GridView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <ItemsWrapGrid HorizontalAlignment="Stretch"/>
                                </ItemsPanelTemplate>
                            </GridView.ItemsPanel>
                            <GridView.ItemTemplate>
                            <DataTemplate>
                                <Grid Width="250" Height="50" Margin="10">
                                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Center" FontSize="16" Text="{Binding}"/>
                                </Grid>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                    </GridView>
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>


    Tuesday, March 25, 2014 8:55 AM

All replies

  • I'm not sure exactly what you're trying to stretch that you can't, but the outer control looks like a good fit for a hub control rather than a Grid View. For the internal you may want a ListView, as nesting regions that scroll in the same direction can be confusing.

    If you can clarify the differences between the actual and the desired results I may be able to provide more specific help. Can you share a minimal repro so we don't have to regenerate your data model to run your Xaml?

    --Rob

    Wednesday, April 02, 2014 2:40 PM
    Owner
  • Unfortunately i  can't use hub control because i can predict how many hubsection I will need. In internal i don't want to be able to scroll - I want to stretch section to accommodate all item.

    In this moment i have gridView in gridView so i have a fixed size of section and if items in second section is more then in the first internal gridView doesn't stretch up and show only a part of all items

    Monday, April 07, 2014 3:16 PM