0

我正在为 ListBox 创建一个自定义控件模板，但我在视觉状态方面遇到了困难。使用 VisualState MouseOver 时，它会影响包括所选项目在内的所有项目，我希望它们具有单独的样式。

在 Metro 中，有 SelectedPointerOver，在 WPF 或其他替代方案中是否有任何等价物？

编辑：

例如，所有项目最初都有黑色前景。

当一个项目被选中时，它的前景变为白色（未选中的项目保持黑色前景）。

现在，当我将鼠标悬停在未选中的项目上时，我希望它的前景变成蓝色，当我将鼠标悬停在选定的项目上时，我希望它的前景变成红色。

4

1 回答 1

1

据我所知，在 WPF 中没有与该状态等效的东西。

WPF ListBoxItem 具有 states和Unselectedin group以及statesSelected和in group 。每个组中的状态是相互排斥的，但来自不同组的状态可以同时进行。例如，ListBoxItem 可以同时处于状态。SelectedUnfocusedSelectionStatesNormalMouseOverDisabledCommonStatesSelectedMouseOver

由控制模板定义考虑这一事实的可视化。例如，它可以在选中项目时使用不同的背景画笔填充项目，并在鼠标悬停在项目上时绘制外边框。重要的是有独立的可视化同时可见，因为相关的状态是独立的，可以同时进行。当一个选定的列表项看起来不被选中时，用户通常会感到有点困惑，因为他将鼠标移到该项目上。

编辑 - 下面的列表框示例。使用触发器而不是视觉状态可能会更容易完成。

<ListBox SelectionMode="Extended">
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid Background="LightGray" Margin="1">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="Disabled"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="UnselectedText"
                                                            Storyboard.TargetProperty="Foreground.Color"
                                                            To="Blue" Duration="0:0:0.1"/>
                                            <ColorAnimation Storyboard.TargetName="SelectedText"
                                                            Storyboard.TargetProperty="Foreground.Color"
                                                            To="Red" Duration="0:0:0.1"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="UnselectedText"
                                                             Storyboard.TargetProperty="Opacity"
                                                             To="0" Duration="0:0:0.1"/>
                                            <DoubleAnimation Storyboard.TargetName="SelectedText"
                                                             Storyboard.TargetProperty="Opacity"
                                                             To="1" Duration="0:0:0.1"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <TextBlock Name="UnselectedText" Margin="2" Text="{TemplateBinding Content}">
                                <TextBlock.Foreground>
                                    <SolidColorBrush Color="Black"/>
                                </TextBlock.Foreground>
                            </TextBlock>
                            <TextBlock Name="SelectedText" Margin="2" Text="{TemplateBinding Content}" Opacity="0">
                                <TextBlock.Foreground>
                                    <SolidColorBrush Color="White"/>
                                </TextBlock.Foreground>
                            </TextBlock>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.ItemContainerStyle>
    <ListBox.Items>
        <ListBoxItem Content="Item 1"/>
        <ListBoxItem Content="Item 2"/>
        <ListBoxItem Content="Item 3"/>
        <ListBoxItem Content="Item 4"/>
        <ListBoxItem Content="Item 5"/>
        <ListBoxItem Content="Item 6"/>
        <ListBoxItem Content="Item 7"/>
        <ListBoxItem Content="Item 8"/>
        <ListBoxItem Content="Item 9"/>
        <ListBoxItem Content="Item 10"/>
    </ListBox.Items>
</ListBox>
于 2012-06-28T09:41:18.457 回答