Problem with control template on listbox item

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>
    开发者_Python百科                            <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?

---

What you have done is mix ItemContainerStyle with ItemTemplate.

What you need to do is:

1. Extract ListBoxItem template using Blend or ShowMeTheTemplate and add a Trigger to change it's Background color when it is selected.
2. Move your data bindings into a DataTemplate assigned to ItemTemplate property of the ListBox.