Изменение цвета переднего плана текста при наведении курсора и выделении с помощью Silverlight 4 ListBox

Question

Я пытаюсь выполнить следующий сценарий с помощью списка Silverlight ListBox:

1. Обычные элементы имеют цвет текста переднего плана черный и цвет фона белого
2. Выбранные элементы имеютцвет текста переднего плана белый и цвет фона темно-синий
3. При наведении курсора мыши фон становится оранжевым, а цвет текста переднего плана - черный

У меня все эти части работаютиндивидуально, но не могу заставить их всех работать вместе.Я начал с повторного добавления ListBoxItem, обертывания ContentPresenter в ContentControl и использования визуальных состояний для изменения переднего плана и фона для выбранных состояний и состояний наведения мыши.Но выбранное состояние и состояние при наведении курсора могут применяться одновременно, что вызывает проблемы, когда вы наведите курсор мыши на выбранный элемент, а затем наведите курсор мыши.Рекомендуется избегать изменения одного свойства в состояниях, которые находятся в разных группах состояний.Поэтому я обернул другой ContentControl вокруг первого элемента управления содержимым и попытался изменить передний план родительского ContentControl в одном визуальном состоянии и передний план дочернего ContentControl в другом визуальном состоянии.Но похоже, что ContentControl не наследует свойство переднего плана от своего родителя, так что, похоже, это не сработает (даже если я повторю шаблон ContentControl, чтобы удалить явный установщик свойства переднего плана).

Так что янемного застрял - не знаю, что попробовать дальше.Вот XAML из моей последней итерации

<Style x:Key="SimpleListBoxItem" TargetType="ListBoxItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <ColorAnimation Duration="0" To="Yellow" Storyboard.TargetName="ContentControlChild"
                                                                        Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" />
                                </Storyboard>

                            </VisualState>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Mouse_Over" />
                                    <ColorAnimation Duration="0" To="{StaticResource G360-MainBlack}" Storyboard.TargetName="ContentControlChild"
                                                                        Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Unfocused"/>
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Selected1" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Unselected">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Selected1" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Selected1" />
                                    <ColorAnimation Duration="0" To="White" Storyboard.TargetName="ContentControlParent"
                                                                        Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedUnfocused">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Selected1" />
                                    <ColorAnimation Duration="0" To="White" Storyboard.TargetName="ContentControlParent"
                                                                        Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Rectangle x:Name="Selected1" Opacity="0" Fill="{StaticResource G360-ListSelected}" />
                    <Rectangle x:Name="Mouse_Over" RadiusX="2" RadiusY="2" Stroke="{StaticResource ListBorderSelected}" Opacity="0" Margin="2" Fill="{StaticResource -ListMouseOver}" />
                    <ContentControl x:Name="ContentControlParent">

                        <ContentControl x:Name="ContentControlChild">
                            <ContentControl.Style>
                                <Style TargetType="ContentControl">
                                    <Setter Property="HorizontalContentAlignment" Value="Left"/>
                                    <Setter Property="VerticalContentAlignment" Value="Top"/>
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="ContentControl">
                                                <ContentPresenter
                                                      Content="{TemplateBinding Content}"
                                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                                      Cursor="{TemplateBinding Cursor}"
                                                      Margin="{TemplateBinding Padding}"
                                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </ContentControl.Style>
                            <ContentPresenter x:Name="ContextText" Content="{TemplateBinding Content}" VerticalAlignment="Center" Margin="8,5,4,5"/>
                        </ContentControl>
                    </ContentControl>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

ContentPresenters наследует атрибуты стиля (шрифт, передний план и т. Д.) От родителя, а не ContentControl.

Я согласен с Робом, что наличие двух ContentControls - это решение, которое дает вам максимальный контроль над анимацией. Это также позволяет делать некоторые переходы постепенного появления / исчезновения между состояниями, чего трудно достичь с помощью только одного элемента.

[править] Вы не хотите шаблонизировать ListBoxItem. Вместо этого работайте с ItemContainerStyle. Это лучший способ достичь желаемого с наименьшими головными болями.

Ура, Laurent

Answer 2

Я бы создал два ContentControls в шаблоне, один из которых имеет свой цвет, измененный "выбранной" группой состояний, а другой - всегда оранжевый, но его непрозрачность изменена группой состояний при наведении курсора.

Звучит как пустая трата времени, но дает вам максимальный контроль над анимациями, если вы решите использовать их ...