按下时如何在列表框项目周围放置边框答案

【问题标题】：How to Place a Border Around a ListBox Item when Pressed按下时如何在列表框项目周围放置边框
【发布时间】：2013-06-23 00:46:01
【问题描述】：

我有一个自定义样式，用于在 ListBox 中的选定项目周围放置边框。但是，我在此 ListBox 中放置了一个 ContextMenu，当按下该项目以获取上下文菜单时，它不会在选定的 ListBox 项目周围放置边框。似乎只有当用户按下项目然后释放时，ListBox 项目才有边框。当用户想要访问 ContextMenu 以及用户执行正常的选择项操作时，如何在这两种情况下在 ListBox 项周围放置边框？

电话应用程序页面资源中的样式

<phone:PhoneApplicationPage.Resources>
    <Style x:Key="MyStyle" TargetType="ListBoxItem">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property ="Foreground" Value="White" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border x:Name="LayoutRoot" Background="{TemplateBinding Background}" 
            HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
            VerticalAlignment="{TemplateBinding VerticalAlignment}" 
            BorderBrush="{TemplateBinding BorderBrush}" 
            BorderThickness="{TemplateBinding BorderThickness}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver" />
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Opacity" Duration="0" To=".5" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="brd"
                                Storyboard.TargetProperty="BorderThickness">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="2" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="brd" CornerRadius="10" BorderBrush="{StaticResource PhoneAccentBrush}" Width="Auto" BorderThickness="{TemplateBinding BorderThickness}">
                            <Image x:Name="recentImage" Source="{Binding Source}" Margin="12" Width="115"/>                                
                        </Border>
                        <toolkit:ContextMenuService.ContextMenu>
                            <toolkit:ContextMenu x:Name="imgListContextMenu" Background="{StaticResource PhoneChromeBrush}">
                                <toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="edit" Click="editContextMenuItem_Click"/>
                                <toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="favorite" Click="favoriteContextMenuItem_Click"/>
                                <toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="delete" Click="deleteContextMenuItem_Click"/>
                            </toolkit:ContextMenu>
                        </toolkit:ContextMenuService.ContextMenu>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:PhoneApplicationPage.Resources>

我的页面网格中的列表框

<ListBox x:Name="Recent" ItemsSource="{Binding Pictures}" Margin="8"
                     SelectionChanged="recent_SelectionChanged" toolkit:TiltEffect.IsTiltEnabled="True"
                     ItemContainerStyle="{StaticResource MyStyle}">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel> 
            </ListBox>

【问题讨论】：

标签： windows-phone-7 xaml listbox windows-phone-8

【解决方案1】：

使用MouseOver状态

<VisualState x:Name="MouseOver">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="brd">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

【讨论】：

我把它放在了 MousedOver VisualState 中，但它无缘无故地破坏了调试器。
这是因为您没有ContentBorder 属性，或者简单地说，您的Border 名称是brd，而在我的情况下它是ContentBorder。无论如何编辑我的答案。
哦，对了，很棒的收获。出于某种原因，它仍然无法正常工作。我还引用了msdn.microsoft.com/en-us/library/cc278062(v=vs.95).aspx 并测试了FocusStates VisualStatesGroup，它也没有任何效果。
我已经在我的代码中测试了它并且它正在工作。我正在为 windows phone 8 开发并在诺基亚 620 设备上进行测试
嗯，是的，我正在使用 WP8 以及诺基亚 920 进行测试。可以肯定的是，当您按住 ListBoxItem 以访问 ContextMenu 时，会出现边框吗？对我来说，ListBoxItem 周围的边框只有在用户选择一个项目然后从屏幕上松开手指时才会出现。