WrapPanel ignores Right Padding value of Parent

[michael-hawker]

Describe the bug

WrapPanel doesn't respect the parent padding when in a ListView.

Steps to Reproduce

Steps to reproduce the behavior:

1. Go to WrapPanel sample in toolkit
2. Modified to use padding on ListView parent:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
      mc:Ignorable="d">

  <Page.Resources>
    <DataTemplate x:Key="PhotoTemplate">
      <Grid Width="{Binding Width}"
            Height="{Binding Height}"
            BorderBrush="Red"
            BorderThickness="1"
            Margin="0">
        <Image HorizontalAlignment="Center"
               Stretch="UniformToFill">
          <Image.Source>
            <BitmapImage DecodePixelHeight="200"
                         UriSource="{Binding Thumbnail}" />
          </Image.Source>
        </Image>
        <Border VerticalAlignment="Bottom">
          <Border.Background>
            <LinearGradientBrush EndPoint="0,1">
              <GradientStop Offset="0" Color="Transparent" />
              <GradientStop Offset="1" Color="#33000000" />
            </LinearGradientBrush>
          </Border.Background>
          <TextBlock Margin="5,20,5,5"
                     VerticalAlignment="Bottom"
                     Text="{Binding Category}"
                     Foreground="White" />
        </Border>
      </Grid>
    </DataTemplate>
    <Style TargetType="ListViewItem">
      <Setter Property="Margin" Value="0" />
      <Setter Property="Padding" Value="0" />
    </Style>
  </Page.Resources>

  <Grid Padding="48">
    <ListView Name="WrapPanelContainer"
    Padding="48"
              IsItemClickEnabled="True"
              Background="{ThemeResource Brush-Grey-03}"
              ItemTemplate="{StaticResource PhotoTemplate}">
      <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
          <controls:WrapPanel Background="{ThemeResource Brush-Grey-04}"
                              Padding="0,0,0,0"
                              VerticalSpacing="5"
                              HorizontalSpacing="5" />
        </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
    </ListView>
  </Grid>
</Page>

Expected behavior

Padding to be respected on Right-side of ListView as well.

Screenshots

Environment

Sample App

Additional context

This definitely appears to be some sort of behavior with ListView, as an ItemsStackPanel behaves fine. It must be doing something special in order to grab the padding from it's parent container. We should sync with the WinUI team on this. FYI @ranjeshj

We can see this with just a regular StackPanel as well like this:

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <ListView Padding="32" Height="128" Width="128" BorderBrush="Gray" BorderThickness="1" Margin="32"
                ScrollViewer.HorizontalScrollMode="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="BorderBrush" Value="Cyan"/>
                <Setter Property="BorderThickness" Value="1"/>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical"/> <!-- In Either Orientation Right/Bottom padding is gone -->
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <x:String>Test 1</x:String>
        <x:String>Test 1</x:String>
        <x:String>Test 2</x:String>
        <x:String>Test 1</x:String>
        <x:String>Test 2</x:String>
        <x:String>Test 1</x:String>
        <x:String>Test 2</x:String>
        <x:String>Test 1</x:String>
        <x:String>Test 2</x:String>
        <x:String>Test 2</x:String>
    </ListView>
</Page>

[ghost]

Hello michael-hawker, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[skendrot]

This appears to be an issue with how the scrollviewer is setup. Panels have no knowledge of the parent ItemsControl Padding. Only their own Padding

[michael-hawker]

@skendrot this works fine in the default ListView setup with ItemsStackPanel, so it's doing something special. I mean it may just be reaching up for padding info, but I figured I'd start here and ask the WinUI folks.

[ghost]

This issue has been marked as "needs attention 👋" due to no activity for 15 days. Please triage the issue so the fix can be established.

[michael-hawker]

@ranjeshj can you provide any insights into what makes ItemsStackPanel special in this case for it to respect the padding value of its parent? Does it walk the visual tree or something or is it just tightly coupled somehow to when it's in a ListView?

[ghost]

This issue has been marked as "needs attention 👋" due to no activity for 15 days. Please triage the issue so the fix can be established.

[ranjeshj]

Sorry.

@ranjeshj can you provide any insights into what makes ItemsStackPanel special in this case for it to respect the padding value of its parent? Does it walk the visual tree or something or is it just tightly coupled somehow to when it's in a ListView?

Very likely. I would not be surprised at all if ItemsStackPanel walks up the tree to do this.

[ghost]

This issue has been marked as "needs attention 👋" due to no activity for 15 days. Please triage the issue so the fix can be established.

[ghost]

This issue has been marked as "needs attention 👋" due to no activity for 15 days. Please triage the issue so the fix can be established.

[skendrot]

This still sounds like a core bug. Panels shouldn't need to walk up a visual tree to determine the parent's padding. The size given to the panel in the measure method should be the available space