sbaeumlisberger/VirtualizingWrapPanel

The items appears stacked vertically in custom control template

Closed this issue · 2 comments

Here i am trying to make a style template for a custom control inherits from list view using VirtualizingWrapPanel
but the items appear stacked vertically not in tiles as shown in the image below even though i set a fixed item size .

`

//public class ShellListView : System.Windows.Controls.ListView
<Style x:Key="ShellListViewStyle" TargetType="{x:Type controls:ShellListView}">
      <Setter Property="Background" Value="{StaticResource ListBox.Static.Background}" />
      <Setter Property="BorderBrush" Value="{StaticResource ListBox.Static.Border}" />
      <Setter Property="BorderThickness" Value="1" />
      <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
      <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
      <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
      <Setter Property="ScrollViewer.CanContentScroll" Value="true" />
      <Setter Property="ScrollViewer.PanningMode" Value="Both" />
      <Setter Property="Stylus.IsFlicksEnabled" Value="False" />
      <Setter Property="VirtualizingPanel.VirtualizationMode" Value="Recycling" />
      <Setter Property="VerticalContentAlignment" Value="Center" />
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="{x:Type controls:ShellListView}">
                  <Border
                      Background="{TemplateBinding Background}"
                      BorderBrush="{TemplateBinding BorderBrush}"
                      BorderThickness="{TemplateBinding BorderThickness}">
                      <ScrollViewer
                          x:Name="PART_ScrollViewer"
                          CanContentScroll="True"
                          HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                          VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                          <ItemsPresenter />
                      </ScrollViewer>
                  </Border>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
      <Setter Property="ItemsPanel">
          <Setter.Value>
              <ItemsPanelTemplate>
                  <vwp:VirtualizingWrapPanel
                      ItemSize="115,155"
                      Orientation="Horizontal"
                      StretchItems="False" 
                      SpacingMode="Uniform"/>
              </ItemsPanelTemplate>
          </Setter.Value>
      </Setter>
      <Setter Property="ItemTemplate" Value="{StaticResource TileItemTemplate}" />
      <Setter Property="ItemContainerStyle" Value="{StaticResource TileItemTemplateItemStyle}" />

      <Style.Triggers>
          <Trigger Property="ViewType" Value="List">
              <Setter Property="Template" Value="{StaticResource ListTemplate}" />
              <Setter Property="ItemTemplate" Value="{StaticResource ListItemTemplate}" />

          </Trigger>
      </Style.Triggers>
  </Style>
  <DataTemplate x:Key="TileItemTemplate" DataType="{x:Type slv:ShellItem}">
      <Grid
          x:Name="Gd"
          Width="110"
          Height="150"
          Margin="5">
          <Grid.RowDefinitions>
              <RowDefinition Height="100" />
              <RowDefinition Height="50" MaxHeight="50" />
          </Grid.RowDefinitions>
          <Image
              Width="96"
              Height="96"
              Stretch="Uniform">
              <Image.Style>
                  <Style TargetType="Image">
                      <Setter Property="Opacity" Value="1" />
                      <!--  Default opacity  -->
                      <Style.Triggers>
                          <DataTrigger Binding="{Binding IsHidden}" Value="True">
                              <Setter Property="Opacity" Value="0.3" />
                              <!--  Opacity when IsHidden is true  -->
                          </DataTrigger>
                      </Style.Triggers>
                  </Style>
              </Image.Style>
              <Image.Source>

                  <Binding Path="LargeIcon" />

              </Image.Source>
          </Image>
          <controls:EditableTextBlock
              x:Name="NameTextBlock"
              Grid.Row="1"
              MinHeight="25"
              MaxWidth="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Border}}}"
              FontFamily="{Binding FontFamily, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource AncestorType={x:Type controls:ShellListView}}}"
              FontSize="{Binding FontSize, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource AncestorType={x:Type controls:ShellListView}}}"
              FontStretch="{Binding FontStretch, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource AncestorType={x:Type controls:ShellListView}}}"
              FontStyle="{Binding FontStyle, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource AncestorType={x:Type controls:ShellListView}}}"
              Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type controls:ShellListView}}}"
              Text="{Binding Name}"
              TextAlignment="Center"
              TextTrimming="WordEllipsis"
              TextWrapping="Wrap" />

      </Grid>

  </DataTemplate>

`

Screenshot 2024-05-05 151225

Unfortunately, I was unable to reproduce the problem using the information of this issue. Please provide a minimal project which allows to reproduce the problem.

closing due to inactivity (feel free to open an new issue or discussion if you still have problems using this project)