Question

我有ListBoxItem的风格如下，并且有一个问题就是失去了“聚焦＆＃39;当listBoxItem保留在提到的VisualState中时的视觉效果。如何强制在'聚焦'ListBoxItem上出现适当的视觉效果？

实现错误的方案：

1）单击ListBoxItem - ＆gt;它收到焦点和样式（好）。

2）将指针移到此ListBoxItem上 - ＆gt;它仍然聚焦并接收'MouseOver'的样式（它在一个单独的VisualStateGroup'CommonStates'中，如下所示：https://msdn.microsoft.com/en-us/library/system.windows.controls.listboxitem%28v=vs.95%29.aspx）（ok）。

3）让鼠标离开ListBoxItem的界限 - ＆gt;它失去了MouseOver的样式（ok）。

4）现在，ListBoxItem处于'CommonStates'的'Normal'状态并且也是'Focused'，但是没有'Focused'的时尚（这是我的问题）。

5）尝试单击此ListBoxItem无效

你能给我一些建议，如何处理它？</ p>

我正在使用Silverlight，因此我禁止使用触发器。

这是我的风格：

    <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="ContentControl.Foreground" Value="{StaticResource ViewModeButtonForeground}" />
    <Setter Property="Focusable" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Border x:Name="RootElement">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(ContentControl.Foreground)">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ViewModeButtonForeground}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterBorder" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ViewModeButtonOuterBorder_MouseOver}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterBorder" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ViewModeButtonBackground_MouseOver}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(ContentControl.Foreground)">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ViewModeButtonForeground_Focused}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterBorder" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ViewModeButtonOuterBorder_Focused}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterBorder" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ViewModeButtonBackground_Normal}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused"></VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid>
                        <Border x:Name="CheckOuterBorder" CornerRadius="2" BorderThickness="1" BorderBrush="Transparent" Background="Transparent">
                        </Border>
                        <Grid x:Name="GridContent" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Width="Auto">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"></ColumnDefinition>
                                <ColumnDefinition Width="Auto"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Image Grid.Column="0" Width="16" Height="16" VerticalAlignment="Center" HorizontalAlignment="Left" Source="{Binding ImgSource, Mode=OneWay}"/>
                            <ContentControl x:Name="Content" Grid.Column="1" Margin="3,0,0,0" Foreground="{TemplateBinding Foreground}" Content="{Binding Title}" ContentTemplate="{TemplateBinding ContentTemplate}"  VerticalAlignment="Center" Width="Auto"/>
                        </Grid>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="ViewModeSelectionListBoxStyle" TargetType="ListBox">
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="IsTabStop" Value="True" />
    <Setter Property="ItemContainerStyle" Value="{StaticResource ListBoxItemStyle1}" />
    <Setter Property="Focusable" Value="True" />
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>

如果我将VisualStateGroup从'FocusStates'更改为SelectionStates，它的行为相同。我希望它与焦点而不是选择相关联，因为如果用户点击某处并且另一个控件也具有相似的边界，则UI中可能存在视觉上的不匹配。

BTW：在另一个msdn网站上我读过： '对于每个在其ControlTemplate中定义的VisualStateGroup，控件始终处于一种状态，并且只有当它从同一个VisualStateGroup进入另一个状态时才会离开状态。从我的代码隐藏，我已经确保listBoxItem仍然关注。此外，我试图在鼠标离开我的listBoxItem后强制进入该状态 - 没有结果（简化：ActiveViewDefinition是列表框中实际聚焦项目的替代）：

        private void It_MouseLeave(object sender, MouseEventArgs e)
        {
            ListBoxItem lbItem = sender as System.Windows.Controls.ListBoxItem;
            if (lbItem != null && lbItem.Content == ActiveViewDefinition)
            {
                VisualStateManager.GoToState(lbItem, "Focused", true);
            }
        }

Answer 1

易。来自不同组的VisualStates操纵相同元素的相同属性。您总是需要具有单独的元素（或使用共享元素的单独属性）来指示来自不同组的状态，否则它们将自然地冲突并混淆彼此的设置（如您所观察到的）。

伪xaml中的一个例子：

<VisualStateGroup x:Name="CommonStates">
    <VisualState x:Name="Normal"><NoChange/></VisualState>
    <VisualState x:Name="MouseOver"><Change What="TheBorder" Color="Red"/></VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
    <VisualState x:Name="Focused"><Change What="TheBorder" Color="Blue"/></VisualState>
</VisualStateGroup>

<Border x:Name="TheBorder" Color="Transparent"/>

最初边框是透明的。现在当我们将鼠标移到边框上时会发生什么？ mouseOver状态将其更改为红色。现在我们点击我们的控件（让我们假设它被选中并且可以被聚焦）。 focusState将其更改为蓝色。现在我们将鼠标移开。 normalState将其更改为其初始状态：Transparent。焦点状态效果丢失。

让我们看一下修改后的例子：

<VisualStateGroup x:Name="CommonStates">
    <VisualState x:Name="Normal"><NoChange/></VisualState>
    <VisualState x:Name="MouseOver"><Change What="TheMouseoverBorder" Color="Red"/></VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
    <VisualState x:Name="Focused"><Change What="TheFocusBorder" Color="Blue"/></VisualState>
</VisualStateGroup>

<Border x:Name="TheFocusBorder" Color="Transparent"/>
<Border x:Name="TheMouseoverBorder" Color="Transparent"/>

最初两个边框都是透明的。现在当我们将鼠标移到它们上面时会发生什么？ mouseOver状态将TheMouseoverBorder更改为红色。现在我们点击我们的控件（让我们假设它被选中并且可以被聚焦）。 focusState将TheFocusBorder更改为蓝色。现在我们将鼠标移开。 normalState将TheMouseoverBorder更改回透明。 focusState仍然可见，因为TheFocusBorder不受其他状态更改的影响，仍然是蓝色。

<强> [编辑]

如果绝对必须从单独的VisualStateGroups修改同一元素的相同属性，则可以使用某种具有结果输出属性的聚合器，或者使用某种直通机制。

我可以想到几种可能的解决方案来从单独的VisualStateGroups修改相同的Foreground属性。您可以尝试这些并查看它们是否有效。

<强>下通

<VisualState x:Name="MouseOver"><Change What="Outer" ForegroundColor="Red"/></VisualState>
...
<VisualState x:Name="Focused"><Change What="Inner" ForegroundColor="Blue"/></VisualState>

<ContentControl x:Name="Outer">
    <ContentControl x:Name="Inner">
    ...
    </ContentControl>
</ContentControl>

理论上说：如果两个状态都处于活动状态，则内部状态获胜（聚焦：蓝色），如果只有鼠标悬停状态处于活动状态，则属性未在内部显式设置，并将从外部继承。没有测试过。试试吧。

<强>聚合

<VisualState x:Name="MouseOver"><Change What="Aggregator" MouseOverColor="Red"/></VisualState>
...
<VisualState x:Name="Focused"><Change What="Aggregator" FocusedColor="Blue"/></VisualState>

<InvisibleAggregator x:Name="Aggregator"/>
<ContentControl Foreground="{Binding ElementName=Aggregator, Path=EffectiveColor}"/>

如何刷新＆＃39;聚焦＆＃39;的风格效果？ VisualStateManager的VisualState？

1 个答案: