Search code examples
c#.netwpfitemspanelitemspaneltemplate

ItemsPanel Template has no effect


I'm trying to swap the ItemsPanel in a ListBox for a WrapPanel but the ItemsPanelTemplate on the style doesn't seem to be having an effect. The style is found and applied because the border and background colours change, but inspecting with snoop shows no WrapPanel.

<Style x:Key="CocktailGrid" TargetType="ListBox" BasedOn="{StaticResource {x:Type ListBox}}">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="Background" Value="White" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="BorderBrush" Value="Black" />
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Setter Property="SelectionMode" Value="Single" />
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <WrapPanel
                     IsItemsHost="True"
                     Width="{Binding
                              Path=ActualWidth,
                              RelativeSource={RelativeSource
                                  Mode=FindAncestor,
                                  AncestorType=
                                     {x:Type ScrollContentPresenter}}}" />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="80" />
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Image Grid.Row="0" Source="{Binding ImageName}" Height="80" Stretch="Uniform"/>
                    <TextBlock Grid.Row="1" Text="{Binding Name}" TextWrapping="Wrap" TextTrimming="CharacterEllipsis"/>
                </Grid>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

The ListBox is declared as:

<ListBox x:Name="lstCocktails" PreviewKeyDown="dg_PreviewKeyDown" ItemsSource="{Binding Source={StaticResource drinksSource}}" SelectedItem="{Binding SelectedItem,ElementName=root,Mode=TwoWay}" Style="{StaticResource CocktailGrid}"
             SelectionMode="Single" MouseDoubleClick="lstCocktails_MouseDoubleClick">

Snoop visual tree: Snoop visual tree

I've overridden ItemsPanels in other parts of the app but for some reason this one is eluding me


Solution

  • Use this instead of ItemsTemplate

            <Setter Property="Template">
               <Setter.Value>
                  <ControlTemplate TargetType="ListBox">
                     <Border Background="{TemplateBinding ListBox.Background}" CornerRadius="5">
                        <WrapPanel IsItemsHost="True"/>
                     </Border>
                  </ControlTemplate>
               </Setter.Value>
            </Setter>
    

    It works