The following forum(s) have migrated to Microsoft Q&A (Preview): Developing Universal Windows apps!
Visit Microsoft Q&A (Preview) to post new questions.

Learn More

 locked
[UWP][C++]How to Change ListView Item's Height dynamically in Windows 10 C++ RRS feed

  • Question

  • I'm new to development for Windows 10, and i'm currently developing a Windows 10 app in which there is a ListView containing individual Grids as items with text inside them. Next to the text is an arrow pointing down to expand the grid and show more details.

    The expansion part works well but the grid overall gets cutoff from the bottom and doesn't push the other grids beneath it. I've already tried setting height to Auto, as well as Horizontal/Vertical content alignment to Stretch with no luck. I've seen hints about using SizeChanged event or UpdateLayout function but no real samples of how to use them in this case. Is there a way to make the height of the item expand dynamically and push the items beneath it in a ListView?

    Any help is greatly appreciated. Thanks!

    Wednesday, August 5, 2015 11:16 PM

Answers

  • Hi Ryan,

    I don't know how you implement the expander inside the ListView item, but in my experience, you need to use binding to the outer Grid, with the help of IValueConverter to calculate the desired height is the key point. for example:

    <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid Height="{Binding ActualHeight, ElementName=detailGrid, Converter={StaticResource heightConverter}}" Margin="6">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="10" Height="10">
                                <Image Source="Assets/arrow.png" Stretch="UniformToFill" PointerPressed="Image_PointerPressed"/>
                            </Border>
                            <TextBlock Grid.Column="1" Text="{Binding Title}" TextWrapping="NoWrap"/>
                            <Grid x:Name="detailGrid">
                                <!--Omitted, Show detail information-->
                            </Grid>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>


    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.

    Thursday, August 6, 2015 8:57 AM