列表框项目上的控件模板问题答案

【问题标题】：Problem with control template on listbox item列表框项目上的控件模板问题
【发布时间】：2011-01-17 19:22:01
【问题描述】：

我对列表框项有自己的风格，就是这样：

        <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>

在应用中看起来像这样：

我需要在选中时更改列表框项的颜色，所以我尝试在列表框项上编写控件模板并在列表框样式中使用：

这是列表框项上的控件模板：

        <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>

应用于列表框样式：

        <Style x:Key="FriendListBoxStyle" TargetType="{x:Type ListBox}">
            <Setter Property="ItemContainerStyle" Value="{DynamicResource FriendListBoxItemStyle}" />
        </Style>

在视图中的控件上最终应用列表框样式：

    <ListBox Name="Friends" 
             SelectedIndex="{Binding Path=SelectedFriendsIndex,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
             SelectedItem="{Binding Path=SelectedFriend, Mode=OneWayToSource, UpdateSourceTrigger=PropertyChanged}"
             Style="{StaticResource FriendListBoxStyle}"/>

我运行应用程序和列表框如下所示：

列表框中的项目也是不可选择的，所以我无法选择列表框中的项目。什么不好？

【问题讨论】：

标签： wpf listbox datatemplate styles controltemplate

【解决方案1】：

您所做的是将ItemContainerStyle 与ItemTemplate 混合。

你需要做的是：

使用Blend 或ShowMeTheTemplate 提取ListBoxItem 模板并添加Trigger 以在选中它时更改其背景颜色。
将数据绑定移动到分配给ListBox 的ItemTemplate 属性的DataTemplate。

【讨论】：