locked
Custom panels within a grouped ListView or GridView

    Question

  • Hi everyone,

    In a Windows Phone Store app I'm trying to use a custom panel within a ListView (tried it with the GridView, too). The ListView uses grouping. I'm having the following problems:

    • I seem to have to specify both, a GroupStyle.Panel with my custom panel and a ListView.ItemsPanel with a StackPanel or VirtualizingStackPanel. If I omit the ListView.ItemsPanel, my custom panel is not used, why?
    • When I use the above configuration, my group headers will lose their stickiness. Meaning: they are scrolled off the screen.

    Is there any specific way how to use custom panels in a grouped list view?

    Here's my XAML code, the custom panel is similar to a wrap panel.

            <CollectionViewSource
                x:Key="albumsSource"
                Source="{Binding PhotoAlbums}"
                IsSourceGrouped="True"
                ItemsPath="Photos"
                />
    
    
    ...
    
    <ListView 
                    x:Name="albumsListView"
                    ItemsSource="{Binding Source={StaticResource albumsSource}}"
                    SelectedItem="{Binding SelectedPhoto, Mode=TwoWay}"
                    Margin="-5,0,-5,0"
                    SelectionMode="{Binding SelectionMode}"
                    >
                    <ListView.GroupStyle>
                        <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <controls:AlbumHeaderControl Margin="0,5,0,7" />
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <controls:PhotoPanel />
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </ListView.GroupStyle>
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Vertical" />
                            <!--<StackPanel Orientation="Vertical"/>-->
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <controls:PhotoControl Photo="{Binding}" ImageWidth="114" ImageHeight="114" Margin="2"/>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

    Thanks in advance

    yours

       Robert


    Changing the world... bit by bit.

    Thursday, December 04, 2014 1:43 PM

All replies

  • Hi everyone,

    In a Windows Phone Store app I'm trying to use a custom panel within a ListView (tried it with the GridView, too). The ListView uses grouping. I'm having the following problems:

    • I seem to have to specify both, a GroupStyle.Panel with my custom panel and a ListView.ItemsPanel with a StackPanel or VirtualizingStackPanel. If I omit the ListView.ItemsPanel, my custom panel is not used, why?
    • When I use the above configuration, my group headers will lose their stickiness. Meaning: they are scrolled off the screen.

    Is there any specific way how to use custom panels in a grouped list view?

    Here's my XAML code, the custom panel is similar to a wrap panel.

            <CollectionViewSource
                x:Key="albumsSource"
                Source="{Binding PhotoAlbums}"
                IsSourceGrouped="True"
                ItemsPath="Photos"
                />
    
    
    ...
    
    <ListView 
                    x:Name="albumsListView"
                    ItemsSource="{Binding Source={StaticResource albumsSource}}"
                    SelectedItem="{Binding SelectedPhoto, Mode=TwoWay}"
                    Margin="-5,0,-5,0"
                    SelectionMode="{Binding SelectionMode}"
                    >
                    <ListView.GroupStyle>
                        <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <controls:AlbumHeaderControl Margin="0,5,0,7" />
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <controls:PhotoPanel />
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </ListView.GroupStyle>
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Vertical" />
                            <!--<StackPanel Orientation="Vertical"/>-->
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <controls:PhotoControl Photo="{Binding}" ImageWidth="114" ImageHeight="114" Margin="2"/>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

    Thanks in advance

    yours

       Robert


    Changing the world... bit by bit.

    Thursday, December 04, 2014 1:43 PM
  • Hi Robert,

    This information is not enough for me to reproduce your problem. How do you define the custom AlbumHeaderControl, PhotoPanel and PhotoControl, please post a repro sample to help me understand your problem. Use your OneDrive and share a link here.

    Here is a sample shows how to group items in a list or grid. Please refer to see if it can help. http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh780627.aspx.

    Please feel free to let me know if you have any concerns.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

    Friday, December 05, 2014 5:57 AM
    Moderator
  • Hi Herro,

    Thanks for your response. Please find here an reproduction project: http://1drv.ms/1CM3ZpS

    The actual controls are not of any interest, in the reproduction sample I just used TextBlock based data templates.

    While creating this slimmed down version, I have noticed that my problem is actually that I NEED to specify a ListView.ItemsPanel - without that panel I cannot use my custom panel. Whether or not I use a custom panel, I couldn't find a ListView.ItemsPanel that kept my group headings sticky. I tried StackPanel, VirtualizingStackPanel and Grid for the ListView.ItemsPanel - without success.

    So my current questions are:

    • how can I use a custom panel WITHOUT setting a dedicated ListView.ItemsPanel in a grouped ListView?
    • What ListView.ItemsPanel are available that keep my headlines sticky in a grouped ListView?

    Thanks in advance,

    yours

       Robert


    Changing the world... bit by bit.

    Friday, December 05, 2014 11:08 AM
  • Just nudging this issue, any idea how to approach the problem?

    Changing the world... bit by bit.

    Tuesday, December 09, 2014 1:27 PM
  • Hi Herro and all, any idea how I could overcome this problem?

    Changing the world... bit by bit.

    Friday, December 12, 2014 12:58 PM
  • Nudging this issue one more time. If there isn't a solution, please let me know so that I can start thinking about different solutions. Thanks!

    Changing the world... bit by bit.

    Tuesday, December 16, 2014 3:50 PM
  • Hi Robert,

    Sorry for my late. You are looking for keeping the group headings sticky in grouped listview, is that right? If so, I would recommend you take a look at this sample, http://blogs.msdn.com/b/alainza/archive/2014/09/04/listview-basics-and-virtualization-concepts.aspx.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

    Wednesday, December 17, 2014 2:01 AM
    Moderator