Problem with control template on listbox item - wpf

Question

I have own style on listbox item, here is it:
<Style x:Key="friendsListStyle" TargetType="{x:Type ListBox}">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Grid Name="RootLayout">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.3*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"></RowDefinition>
</Grid.RowDefinitions>
<Image Margin="4,4,4,2" Grid.Column="0">
<Image.Source >
<MultiBinding Converter="{StaticResource avatarConverter}">
<Binding Path="ProfilePhoto"></Binding>
<Binding Path="StatusInfo.IsLogged"></Binding>
</MultiBinding>
</Image.Source>
</Image>
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock
Text="{Binding Path=Nick}"
Margin="2,2,2,2"
FontSize="13"
FontWeight="Medium"
Grid.Column="0" Grid.Row="0">
</TextBlock>
<TextBlock
Text="{Binding Path=StatusMessageInfo.Message}"
FontSize="11"
FontWeight="Normal"
Foreground="DarkGray"
Grid.Column="0" Grid.Row="1" Margin="2,2,2,2"></TextBlock>
<TextBlock
Style="{StaticResource StatusStyle}"
Grid.Column="0" Grid.Row="2" >
<TextBlock.Text>
<MultiBinding Converter="{StaticResource infoConverter}">
<Binding Path="StatusInfo.IsLogged"></Binding>
<Binding Path="StatusInfo.IsChating"></Binding>
<Binding Path="StatusInfo.RoomName"></Binding>
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</Grid>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
In app look like this:
I need change color of listbox item when is selected, so I try wrote control template on listbox item and use in listbox style:
Here is control template on listbox item:
<Style x:Key="FriendListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid Name="RootLayout">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.3*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"></RowDefinition>
</Grid.RowDefinitions>
<Image Margin="4,4,4,2" Grid.Column="0">
<Image.Source >
<MultiBinding Converter="{StaticResource avatarConverter}">
<Binding Path="ProfilePhoto"></Binding>
<Binding Path="StatusInfo.IsLogged"></Binding>
</MultiBinding>
</Image.Source>
</Image>
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock
Text="{Binding Path=Nick}"
Margin="2,2,2,2"
FontSize="13"
FontWeight="Medium"
Grid.Column="0" Grid.Row="0">
</TextBlock>
<TextBlock
Text="{Binding Path=StatusMessageInfo.Message}"
FontSize="11"
FontWeight="Normal"
Foreground="DarkGray"
Grid.Column="0" Grid.Row="1" Margin="2,2,2,2"></TextBlock>
<TextBlock
Style="{StaticResource StatusStyle}"
Grid.Column="0" Grid.Row="2" >
<TextBlock.Text>
<MultiBinding Converter="{StaticResource infoConverter}">
<Binding Path="StatusInfo.IsLogged"></Binding>
<Binding Path="StatusInfo.IsChating"></Binding>
<Binding Path="StatusInfo.RoomName"></Binding>
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsSelected" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="Background" Value="Yellow" />
</MultiTrigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Apply on listBox style:
<Style x:Key="FriendListBoxStyle" TargetType="{x:Type ListBox}">
<Setter Property="ItemContainerStyle" Value="{DynamicResource FriendListBoxItemStyle}" />
</Style>
An finally apply listbox style on control in view:
<ListBox Name="Friends"
SelectedIndex="{Binding Path=SelectedFriendsIndex,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
SelectedItem="{Binding Path=SelectedFriend, Mode=OneWayToSource, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource FriendListBoxStyle}"/>
I run app and listbox look as here:
Also items in listbox are not selectable, so I can’t select item in listbox. What is bad?

Answer 1

What you have done is mix ItemContainerStyle with ItemTemplate.
What you need to do is:
Extract ListBoxItem template using Blend or ShowMeTheTemplate and add a Trigger to change it's Background color when it is selected.
Move your data bindings into a DataTemplate assigned to ItemTemplate property of the ListBox.