What is the correct default style to use for ListBoxItem, why does Blend not match MSDN?

Question

When using the default style found in blend, a developer will get a warning from visual studio about HorizontalContentAlignment and VerticalContentAlignment upon removing items from a list or scrolling in a large list.

Alternatively when you call default template in Visual studio you receive a much simpler control template, which does not contain the suspect bindings.

But if you look into C:\Program Files (x86)\Windows Kits\8.0\Include\WinRT\Xaml\Design\generic.xaml. You will find a Much larger more complex style and Template, which aslo does not contain the suspect bindings.

Also MSDN has a Style with a template similar to that in the Windows kit.

So basically my assumption would be to use the style found in the Windows Kit. I am confused though why blend would give such a different template and why those two bindings exist in it as they will throw xaml warnings?

The following is all the respected styles and templates

Blends default Style and template

<Window x:Class="WpfApplication17.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="Padding" Value="2,0,0,0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="Selector.IsSelectionActive" Value="false"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}}"/>
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <ListBoxItem Content="ListBoxItem" HorizontalAlignment="Left" Margin="218.388,129.223,0,0" VerticalAlignment="Top" Style="{DynamicResource ListBoxItemStyle1}"/>

    </Grid>
</Window>

Visual Studios default template

<?xml version="1.0" encoding="utf-16"?>
<ControlTemplate TargetType="ListBoxItem" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Border BorderThickness="{TemplateBinding Border.BorderThickness}" Padding="{TemplateBinding Control.Padding}" BorderBrush="{TemplateBinding Border.BorderBrush}" Background="{TemplateBinding Panel.Background}" Name="Bd" SnapsToDevicePixels="True">
    <ContentPresenter Content="{TemplateBinding ContentControl.Content}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
  </Border>
  <ControlTemplate.Triggers>
    <Trigger Property="Selector.IsSelected">
      <Setter Property="Panel.Background" TargetName="Bd">
        <Setter.Value>
          <DynamicResource ResourceKey="{x:Static SystemColors.HighlightBrushKey}" />
        </Setter.Value>
      </Setter>
      <Setter Property="TextElement.Foreground">
        <Setter.Value>
          <DynamicResource ResourceKey="{x:Static SystemColors.HighlightTextBrushKey}" />
        </Setter.Value>
      </Setter>
      <Trigger.Value>
        <s:Boolean>True</s:Boolean>
      </Trigger.Value>
    </Trigger>
    <MultiTrigger>
      <MultiTrigger.Conditions>
        <Condition Property="Selector.IsSelected">
          <Condition.Value>
            <s:Boolean>True</s:Boolean>
          </Condition.Value>
        </Condition>
        <Condition Property="Selector.IsSelectionActive">
          <Condition.Value>
            <s:Boolean>False</s:Boolean>
          </Condition.Value>
        </Condition>
      </MultiTrigger.Conditions>
      <Setter Property="Panel.Background" TargetName="Bd">
        <Setter.Value>
          <DynamicResource ResourceKey="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" />
        </Setter.Value>
      </Setter>
      <Setter Property="TextElement.Foreground">
        <Setter.Value>
          <DynamicResource ResourceKey="{x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}" />
        </Setter.Value>
      </Setter>
    </MultiTrigger>
    <Trigger Property="UIElement.IsEnabled">
      <Setter Property="TextElement.Foreground">
        <Setter.Value>
          <DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
        </Setter.Value>
      </Setter>
      <Trigger.Value>
        <s:Boolean>False</s:Boolean>
      </Trigger.Value>
    </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

Windows Kit Default template

    <!-- Default style for Windows.UI.Xaml.Controls.ListBoxItem -->
    <Style TargetType="ListBoxItem">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="TabNavigation" Value="Local" />
        <Setter Property="Padding" Value="8,10" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border x:Name="LayoutRoot"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemPointerOverBackgroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemPointerOverForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemDisabledForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="PressedBackground"
                                                         Storyboard.TargetProperty="Opacity"
                                                         To="1"
                                                         Duration="0" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemPressedForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected" />
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerGrid"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedBackgroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedUnfocused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerGrid"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedBackgroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedDisabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerGrid"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedDisabledBackgroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedDisabledForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedPointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerGrid"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedPointerOverBackgroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedPressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerGrid"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedBackgroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="FocusVisualWhite"
                                                         Storyboard.TargetProperty="Opacity"
                                                         To="1"
                                                         Duration="0" />
                                        <DoubleAnimation Storyboard.TargetName="FocusVisualBlack"
                                                         Storyboard.TargetProperty="Opacity"
                                                         To="1"
                                                         Duration="0" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused" />
                                <VisualState x:Name="PointerFocused" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid x:Name="InnerGrid"
                              Background="Transparent">
                            <Rectangle x:Name="PressedBackground"
                                       Fill="{StaticResource ListBoxItemPressedBackgroundThemeBrush}"
                                       Opacity="0" />
                            <ContentPresenter x:Name="ContentPresenter"
                                              Content="{TemplateBinding Content}"
                                              ContentTransitions="{TemplateBinding ContentTransitions}"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              Margin="{TemplateBinding Padding}" />
                            <Rectangle x:Name="FocusVisualWhite"
                                       Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
                                       StrokeEndLineCap="Square"
                                       StrokeDashArray="1,1"
                                       Opacity="0"
                                       StrokeDashOffset=".5" />
                            <Rectangle x:Name="FocusVisualBlack"
                                       Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
                                       StrokeEndLineCap="Square"
                                       StrokeDashArray="1,1"
                                       Opacity="0"
                                       StrokeDashOffset="1.5" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

[C# MSDN ListBox Styles and Templates](https://msdn.microsoft.com/en-us/library/cc278062%28v=vs.95%29.aspx) — MethodMan, Jan 30 '15 at 16:37
You do know you are comparing a WinRT style to a WPF style? The Blend and VS styles don't differ, the VS one is just more explicit with setting values. As for the errors from the *ContentAlignment properties, see http://stackoverflow.com/questions/3958173/listboxitem-produces-system-windows-data-error-4-binding-error — Roel van Westerop, Feb 11 '15 at 15:53
For reference this link contains the ListBoxItem Style for WPF, the above link is for Silverlight and the style referred to in the Answer is for Windows Store Apps. https://msdn.microsoft.com/en-us/library/ms754242(v=vs.110).aspx — ndonohoe, Feb 11 '15 at 15:58
@RoelvanWesterop Yes I recognize I am comparing WinRT and WPF. But the problem is you will not get the error when using a template. Also I am questioning if the RT style should be used in place of the WPF template. Also I have seen that referenced stack overflow post already. It suggests explicitly redefining the style. Which in my eyes is the same as removing the suspect binding all together. Thus making me question why that binding is generated at all. — Bob, Feb 11 '15 at 16:10
@Bob If I'm correct, removing it doesn't work since it will revert to the base style (bug iirc) and the error will still popup. Changing it to another value will fix the error. Using the WinRT style might work, but not for all visualstates since those are not all 'implemented' in WPF. — Roel van Westerop, Feb 11 '15 at 16:40

score 1 · Answer 1 · answered Feb 13 '15 at 00:36

All the default styles are correct. You just need to pick the right one for your case.

Let's first take a look at why you are getting those warnings in the output window.

<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>

The binding is like saying, "I want the my ListBoxItem's HorizontalContentAlignment to be the same as my parent ItemsControl's HorizontalContentAlignment."

But in your xaml, you defined the ListBoxItem without a parent! A ListBoxItem should always live with a ListBox (which inherits from ItemsControl) and this is why the default style is defined this way - it assumes the ListBoxItem's AncestorType is an ItemsControl.

So, to fix the warnings, simply wrap it with a ListBox like this.

<ListBox>
    <ListBoxItem Content="ListBoxItem" HorizontalAlignment="Left" Margin="218.388,129.223,0,0" VerticalAlignment="Top" Style="{DynamicResource ListBoxItemStyle1}" />
</ListBox>

score 0 · Answer 2 · answered Feb 12 '15 at 22:42

The warning is probably caused by ItemsControl.ItemContainerGenerator. It generates items asynchronously. ItemsContainers (ListBoxItems) may not be attached to visual three, when the binding is evaluated, so the binding cannot find ancestor, thus generates the warning. However, if ListBoxItem is used correctly in an ItemsControl, the binding works despite the warning
you should not use the template from winrt. Actually, you don't have to modify template at all. You can just modify implicit ListBoxItem style and specify only Horizonal/VerticalContentAligment properties to remove the binding.
Content aligment in ListBoxItems is affected by ItemsControl's content aligment properties by default. If you remove the binding, you will break this connection. However, it should not be a big deal.

What is the correct default style to use for ListBoxItem, why does Blend not match MSDN?

2 Answers2