Silverlight - 在列表框上停止突出显示答案

【问题标题】：Silverlight - Stop highlights on a listboxSilverlight - 在列表框上停止突出显示
【发布时间】：2009-02-10 22:39:44
【问题描述】：

我有一个 silverlight 列表框，我想删除当用户在列表框中选择一个项目时发生的颜色变化突出显示。

默认情况下，当一个项目被选中时，它会以浅蓝色突出显示该项目。

我怎样才能阻止这种情况发生？

作为一个附带问题，我如何将其自定义为任意颜色？

谢谢。

【问题讨论】：

标签： silverlight

【解决方案1】：

您可以通过自定义列表框项的现有控件模板来做到这一点。执行此操作的简单方法是启动 Expression Blend，右键单击 ListBoxItem，转到 Edit Control Parts (Template) 并选择 Edit a Copy... 然后根据需要自定义 fillColor 和 fillColor2 矩形的填充颜色。

下面的 Xaml 将 ListBoxItem 鼠标悬停颜色设置为透明，将选定颜色设置为亮绿色，但您可以根据需要进行自定义：

<UserControl x:Class="SilverlightApplication2.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    Width="400" Height="300" Background="#FF000000">
  <UserControl.Resources>
    <Style x:Key="ListBoxItemStyleTransparent" TargetType="ListBoxItem">
      <Setter Property="Padding" Value="3"/>
      <Setter Property="HorizontalContentAlignment" Value="Left"/>
      <Setter Property="VerticalContentAlignment" Value="Top"/>
      <Setter Property="Background" Value="Transparent"/>
      <Setter Property="BorderThickness" Value="1"/>
      <Setter Property="TabNavigation" Value="Local"/>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ListBoxItem">
            <Grid Background="{TemplateBinding Background}">
              <vsm:VisualStateManager.VisualStateGroups>
                <vsm:VisualStateGroup x:Name="CommonStates">
                  <vsm:VisualState x:Name="Normal"/>
                  <vsm:VisualState x:Name="MouseOver">
                    <Storyboard>
                      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity">
                        <SplineDoubleKeyFrame KeyTime="0" Value=".35"/>
                      </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                  </vsm:VisualState>
                  <vsm:VisualState x:Name="Disabled">
                    <Storyboard>
                      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity">
                        <SplineDoubleKeyFrame KeyTime="0" Value=".55"/>
                      </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                  </vsm:VisualState>
                </vsm:VisualStateGroup>
                <vsm:VisualStateGroup x:Name="SelectionStates">
                  <vsm:VisualState x:Name="Unselected"/>
                  <vsm:VisualState x:Name="Selected">
                    <Storyboard>
                      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity">
                        <SplineDoubleKeyFrame KeyTime="0" Value=".75"/>
                      </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                  </vsm:VisualState>
                </vsm:VisualStateGroup>
                <vsm:VisualStateGroup x:Name="FocusStates">
                  <vsm:VisualState x:Name="Focused">
                    <Storyboard>
                      <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0">
                          <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                          </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                      </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                  </vsm:VisualState>
                  <vsm:VisualState x:Name="Unfocused"/>
                </vsm:VisualStateGroup>
              </vsm:VisualStateManager.VisualStateGroups>
              <Rectangle x:Name="fillColor" IsHitTestVisible="False" Opacity="0" RadiusX="1" RadiusY="1" Fill="Transparent"/>
              <Rectangle x:Name="fillColor2" IsHitTestVisible="False" Opacity="0" Fill="#FF00FF00" RadiusX="1" RadiusY="1"/>
              <ContentPresenter HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
              <Rectangle x:Name="FocusVisualElement" Visibility="Collapsed" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="1" RadiusY="1"/>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </UserControl.Resources>
  <Grid x:Name="LayoutRoot" Background="White">
    <ListBox x:Name="ListBoxTest">
      <ListBoxItem Content="Some String" Style="{StaticResource ListBoxItemStyleTransparent}" />
    </ListBox>
  </Grid>
</UserControl>

fillColor Rectangle 指定当用户将鼠标悬停在 ListBoxItem 上时要使用的颜色。在上面的代码中，我将其设置为透明，因此当您将鼠标悬停在 ListBoxItem 上时不会出现颜色。

fillColor2 指定选择 ListBoxItem 时使用的颜色。在上面的代码中，我指定了#FF00FF00，所以当一个 ListBoxItem 被选中时，颜色会变成亮绿色。

在您的情况下，您可以将 fillColor2 Rectangle 的 Fill 属性设置为透明，以在用户选择项目时模拟无颜色。

【讨论】：

这是一个很好的答案，不幸的是，当我用各种不同的项目填充列表框时，我需要以编程方式设置样式。也许我需要使用一些数据模板 hrmm...
您的回答与我一起添加 myListItem.Style = (Style) this.Resources["ListBoxItemStyleTransparent"];会将您的答案标记为已接受的答案:)
是的，这就是您以编程方式引用样式的方式。如果您在多个 .xaml 文件中使用样式，要考虑的另一件事是在 App.xaml 的中声明它。然后您可以通过 Application.Current.Resources["ListBoxItemStyleTransparent"] 引用它。
我所做的一项更改是将fillColor2 和FocusVisualElement 设置为Transparent，否则它会显示为霓虹绿。

【解决方案2】：

如果您不想选择，您可以考虑使用 ItemsControl 而不是 ListBox。
（ItemsControl 是同一控件的更简单版本）。

来自 http://forums.silverlight.net/post/140375.aspx

【讨论】：

【解决方案3】：

<ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem">
        <Setter Property="Focusable" Value="false"></Setter>
    </Style>
</ListBox.ItemContainerStyle>

【讨论】：

"Focusable 不是 ListBoxItem 的属性"