Проблема с шаблоном управления на элементе списка - PullRequest
Новая
       38

Проблема с шаблоном управления на элементе списка

0 голосов
/ 17 января 2011

У меня есть собственный стиль элемента списка, вот он: 

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

В приложении выглядит так:

alt text

Мне нужно изменить цвет элемента списка, когда он выбран, поэтому я пытаюсь записать шаблон элемента управления для элемента списка и использовать в стиле списка:

Вот шаблон элемента управления для элемента списка: 

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

Применить в стиле listBox: 

        <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}"/>

Я запускаю приложение и список выглядит как здесь:

alt text

Также элементы в списке не могут быть выбраны, поэтому я не могу выбрать элемент в списке. Что плохого?

1 Ответ

0 голосов
/ 18 января 2011

То, что вы сделали, это смешали ItemContainerStyle с ItemTemplate.

Что вам нужно сделать:

  1. Извлечь ListBoxItem шаблон с использованием Blend или ShowMeTheTemplate и добавить Trigger, чтобы изменить его цвет фона, когда он выбран.
  2. Переместите привязки данных в DataTemplate, назначенный для ItemTemplate свойства ListBox.
...