How to show full webview2 in listview in WinUI 3?

59 Views Asked by At

I have a ListView that contains a DataTemplate that displays a WebView2 for each item. The default behavior of the ListView appears to be smashing the WebView down to a 0 height.

This is the setup for what I have:

<ListView x:Name="MyListView"
          ItemsSource="{x:Bind MyObservableCollection, Mode=OneWay}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="viewmodels:MyViewModel">
            <WebView2 HorizontalAlignment="Stretch"
                      VerticalAlignment="Stretch"
                      Source="https://www.google.com"><WebView2>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

The behavior I would like, is for the WebView to expand vertically to show the entire html content it contains, without scrolling. Thus, the only scrolling is the ListView itself scrolling. Setting a fixed height or a minimum height does force the WebView to display, but this is not a viable solution. I cannot predict the height of the contents in advance, the height may vary, and a minimum height just results in ALL items being exactly that minimum height in the ListView. How can I get this behavior?

The real-world example of this desired behavior (and the inspiration for this) is an email thread in the right-hand pane of the new Outlook app - each email body is shown vertically in full (an item in the ListView) but the whole ListViewstill scrolls.

I have tried manipulating the ItemContainerStyle (as in the example below, modified from this answer) but this does not work to get my desired behavior:

<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
    </Style>
</ListView.ItemContainerStyle>

Additionally, neither VerticalContentAlignment nor VerticalAlignment worked.

I know that ListView uses an ItemsStackPanel to contain the list, and I know that StackPanel has a similar issue like this, if that helps. There is a warning in the official documentation about performance hits to using a different container than the ItemsStackPanel, but I am open to this if it is absolutely necessary.

0

There are 0 best solutions below