Change style for all ListBoxItem in a ListBox (Windows phone 8)

Question

I have a Listbox with some Listboxitem and I would like to change the style of all items. I know, it's possible to create a style in resources and bind this style to each item but maybe is there a possibility to do it so easier (without binding)? With ListBox.ItemTemplate?

              <ListBox SelectionChanged="ListBox_SelectionChanged">
                        <ListBoxItem x:Name="ItemAdress">
                                ....
                        </ListBoxItem>

                        <ListBoxItem x:Name="ItemPhone">
                                ....
                        </ListBoxItem>

                        <ListBoxItem x:Name="ItemEmail">
                                ....
                        </ListBoxItem>
              </Listbox>

In fact, my objective is to add Margin bottom 15 for each item. (add a space between items)

Conscientious

Answer 1

Note: This works for WPF; not sure if it will work for Windows Phone also.

You can create a style using TargetType. This would affect all ListBoxItems for this specific ListBox:

<ListBox Height="200" Width="200">
  <ListBox.Resources>
    <Style TargetType="{x:Type ListBoxItem}">
      <Setter Property="Margin" Value="0,0,0,15" />
    </Style>
  </ListBox.Resources>
  <ListBoxItem x:Name="ItemAdress">
    ABC
  </ListBoxItem>
  <ListBoxItem x:Name="ItemPhone">
    DEF
  </ListBoxItem>
  <ListBoxItem x:Name="ItemEmail">
    GHI
  </ListBoxItem>
</ListBox>

If you want to style ListBoxItems for all ListBoxes, you can specify a style at the appropriate parent level.

E.g. following applies style for all ListBoxItems of all ListBoxes under this Grid.

<Grid>
  <Grid.Resources>
    <Style TargetType="{x:Type ListBoxItem}">
      <Setter Property="Margin" Value="0,0,0,15" />
    </Style>
  </Grid.Resources>
  <ListBox x:Name="listBox1" Height="200" Width="200">
    ...
  </ListBox>
  <ListBox x:Name="listBox2" Height="200" Width="200">
    ...
  </ListBox>
</Grid>

Pescara

Thank you. It works. Just a small difference with TargetType. <Style TargetType="ListBoxItem"> – Conscientious

Answer 2

To build on publicgk answer I would like to show how you can do this 'easy', as well as add some more info in RE to styling. If you already knew what I'm about to tell, then I apologize- I'm adding this just in case somebody is looking at this question so not familiar with WP8 or XAML development.

If you want to style the way data is displayed then I would recommend that you create a DataTemplate and set the ListBox.ItemTemplate to that datatemplate (as you suggested yourself above).

You can do that inline, or have the DataTemplate as a resource and reference it by name.

            <!--ItemsSource set in code-->
        <ListBox>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border Background="Blue">
                        <TextBlock Text="{Binding Title}"/>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

        <!--ListOfTitles is a property in the code-->
        <ListBox ItemsSource="{Binding ListOfTitles}" ItemTemplate="{StaticResource redDataTemplateDefinedInResources}">
        </ListBox>

Notice that you need to set the itemssource, this can be done in codebehind by accessing the ListBox by giving it a name (x:name="theName") or using a binding and binding to a property with that name (make sure to set the DataContext as well)

If you want to style how default ListBoxItem (such as interaction, margins etc.) then you can publicgk wrote create a style with the controls targettype and set it as a resource either on parent level, page or app level. For all controls in the whole app, use app level- with a resource dictionary to keep everything neat and tidy :)

This is the easiest way to create a FULL template to override the style in Visual Studio 2012 OR Blend: Right click on the control in the designer or in the Document Outline WIndows and select Edit Template, Edit a Copy, give it a name if you want a named resource, or select apply to all (which basically removes the name).

And since I love show-and-tell, here are some images:

Then go ahead and change it up as you want :)

The template code:

<Style TargetType="ListBoxItem">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Discontinuance

Thank you, this solution is also good for me :). I will try it for next listbox. Nice post with pictures. – Conscientious