locked
ListView with variable height for each row not possible? RRS feed

  • Question

  • Hi,

    I try to display a ListView including one image per row. It works fine when each image have the same pixel height but it does not adjust when images have different size. Each row have the same size. I've tried to force some FrameworkElement height by loading each image height first through the following but without any success.

     <RowDefinition Height="{Binding IconBitmapHeight}"/>
    

    I've searched this forum and StackOverflow one and it seems that's it not possible to have variable row height for a ListView. Is it true? If yes, then which Control should I use to achieve such simple behavior?

    Here after extract of ListView XAML definitions. Notice that ItemTemplate is selected at runtime.

            <ListView x:Name="FileChooser" Grid.Row="1" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalAlignment="Stretch"
              Margin="0,0,0,0"
              Padding="0,0,0,0"
              ItemsSource="{Binding Source={StaticResource ListViewItemsViewSource}}"
              SelectionMode="Multiple"
              IsItemClickEnabled="True"
              SelectionChanged="FileChooserListView_SelectionChanged"
              ItemClick="FileChooserListView_ItemClick"
              IsSynchronizedWithCurrentItem="false"
              SelectedIndex="-1">
    
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                        <Setter Property="VerticalContentAlignment" Value="Top"/>
                        <Setter Property="HorizontalAlignment" Value="Stretch"/>
                        <Setter Property="VerticalAlignment" Value="Top"/>
                        <Setter Property="Padding" Value="0"/>
                        <Setter Property="Margin" Value="0,-3,16,-3"/>
                    </Style>
                </ListView.ItemContainerStyle>
                
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid Orientation="Horizontal" VerticalAlignment="Stretch" VerticalChildrenAlignment="Stretch" ItemWidth="{Binding FileChooserWrapGridItemWidth}" MaximumRowsOrColumns="{Binding FileChooserWrapGridColumns}"/>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
                            
            </ListView>

    And ListViewItem data template style:

        <DataTemplate x:Name="FileChooserDetailsListCellTemplate">
                <Grid Margin="2,0,2,0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid Grid.Column="0" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Center">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Image x:Name="fileIcon" Source="{Binding IconBitmapPath}" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="2,2,2,2"/>
                    </Grid>
                </Grid>
        </DataTemplate>

    Thanks for your help.


    Sunday, January 5, 2014 6:58 PM

Answers

  • Hi,

    In general, creating a listview with variable sized items in XAML does require a few advanced techniques – specifically you have to derive from ListView and then override PrepareContainerForItemOverride. You cannot define the listview item size directly.Try to refer to the link:

    http://social.msdn.microsoft.com/Forums/windowsapps/en-US/966aa897-1413-46f0-bef7-663de36f9423/how-to-create-a-variable-sized-grouped-gridview-like-the-store?forum=winappswithcsharp

    Best Wishes!


    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. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; 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.


    • Edited by Anne Jing Monday, January 6, 2014 6:07 AM edit
    • Marked as answer by LS-Developer Monday, January 6, 2014 9:45 PM
    Monday, January 6, 2014 6:06 AM