Silverlight 中的 Metro 风格 ListBox
0/5 (0投票)
使用样式和模板创建 Metro 主题的 listbox。
简介
Metro 风格是微软为 Windows Phone 7 设计的。Metro 的一个关键设计原则是更加关注应用程序的内容，更多地依赖排版而非图形。
对于 Metro 风格，开发了专有的原则，微软使用这些原则来创建自己的操作系统和应用程序。Windows 8 操作系统采用 Metro 界面。
之后，许多 Web 应用程序都采用了 Metro 风格。
背景
ListBox 是 Silverlight 中一个非常有用的控件。用户可以通过其样式和模板更改 ListBox 控件的外观。
使用 ControlTemplate 用户可以自定义 ListBox 控件的外观。
使用 DataTemplate，我们可以自定义数据如何显示。
在这篇文章中，我们将通过修改 ListBox ControlTemplate 使其看起来像 Metro 风格（参见下图）。
使用代码
步骤 1
首先，创建一个 ResourceDictionary 文件，其中包含应用程序的资源、样式和模板。
Styles.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:control="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit">
</ResourceDictionary> 如上代码所示，我添加了前缀 xmlns:control 来映射 System.windows.control 的命名空间。
为了水平或垂直排列项目（在 ListBox 中换行显示项目），我们使用 WrapPanel。
WrapPanel 控件在 Silverlight Toolkit 中可用，您可以从 codeplex 下载 Silverlight Toolkit。
如果您使用的是 Silverlight 4，请点击下载链接 Silverlight 4 Toolkit - 2010 年 4 月。
如果您的应用程序是用 Silverlight 5 开发的，请点击下载链接 Silverlight 5 Toolkit - 2011 年 12 月。
下载 Toolkit .msi 并安装它，新的 Dll 将添加到以下路径：
C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Libraries\Client
步骤 2：现在，向应用程序添加 System.Windows.Controls.Toolkit.dll 引用。
这个 Dll 包含以下附加控件：
步骤 3：现在，创建 ListBox 样式。
<Style x:Key="MetroListBox" TargetType="ListBox">
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<control:WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
.......
<!-- Your Data -->
.......
</DataTemplate>
</Setter.Value>
</Setter>
</Style> 要为控件创建样式，您必须设置 TargetType 属性。TargetType 属性用于为给定 TargetType FrameworkElement 的控件设置样式。
基于 targetType，样式会自动为给定的控件提供可用的 setter 属性。Key 用于将特定样式应用于控件。
ItemsPanel 属性设置定义项目布局面板的模板。
ItemsPanelTemplate 定义用于项目布局的面板。ItemsControl 的默认值是一个指定 StackPanel 的 ItemsPanelTemplate。其他选项包括（WrapPanel、VirtualizingStackPanel 等）。
我在 ItemsPanelTemplate 中添加了 WrapPanel，并将 Orientation 属性设置为 Horizontal。如果项目的总宽度超过 ListBox 的宽度，它将使项目在 ListBox 中换行显示。
ItemTemplate 属性用于指定数据的视觉外观。您可以使用 DataTemplate 来定义数据对象的外观。使用 DataTemplate，您可以更改数据的显示结构，例如：
如果您不设置 ItemTemplate，ItemsControl 将显示集合中对象的字符串表示形式。
步骤 4
现在，创建 ListBoxItem 样式。
<Style x:Key="MetroListBoxItem" TargetType="ListBoxItem">
<Setter Property="Height" Value="70" />
<Setter Property="Width" Value="180" />
<Setter Property="Margin" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid>
<Border x:Name="fillBorder"
Background="{StaticResource ListItemBackgroundBrush}"
BorderThickness="0">
<ContentPresenter x:Name="contentPresenter"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</Border>
<Rectangle x:Name="FocusVisualElement"
RadiusX="1"
RadiusY="1"
Stroke="#116690"
StrokeThickness="3"
Visibility="Collapsed" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> 创建了 TargetType=ListBoxItem 的样式，它将应用于 ListBox 中的项目。
ControlTemplate 指定了控件的视觉外观和感受。
使用 ControlTemplate，您可以自定义现有控件的视觉外观（例如：添加动画、缩放/平移/旋转控件、在控件周围添加圆圈等）。
如上代码所示，我在 Border 内放置了 ContentPresenter，并将 Border 放置在 ControlTemplate 内。
它将显示带有边框的项目。
通过设置边框的背景颜色，每个项目都会以给定的颜色突出显示。
添加了带有 Stroke Color 和 StrokeThickness=3 以及 Visibility=Collapsed 的 Rectangle 控件。
当用户选中任何项目（获得焦点）时，此 Rectangle 控件将可见。
步骤 5
接下来，为 ListBoxItem 添加 VisualStates 以应用鼠标悬停样式和选中项样式。
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="fillBorder"
Storyboard.TargetProperty="Opacity" To=".8" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="fillBorder"
Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0:0:0.5" Value="#CC0080AA" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<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>
</VisualState>
<span class="Apple-tab-span" style="white-space: pre;"> </span><VisualState x:Name="Unfocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups> VisualStateManager 在 Silverlight 的动画中起着非常重要的作用。
让我们先简单介绍一下动画。
动画
动画用于创建丰富的用户界面，例如：
- 更改控件的不透明度- 调整控件大小（从小到大，从大到小改变尺寸）
- 将控件从一个位置移动到另一个位置
Storyboard.TargetProperty 附加属性。您可以在动画上设置这些属性
来指定其目标对象和属性。
以下是可用的动画类型：
1. DoubleAnimation
2. ColorAnimation
3. ObjectAnimationUsingKeyFrames / DoubleAnimationUsingKeyFrames / ColorAnimationUsingKeyFrames
VisualStateManager 用于管理控件的状态以及在状态之间转换的逻辑。
VisualStateGroup 是 VisulState 对象的集合，例如（Foucsed、Selected、Normal、MouseOver 等）。
VisualState 代表控件处于特定状态时的视觉外观。
在此示例中，我添加了DoubleAnimation 来更改 ListItem 上鼠标悬停时的不透明度。
在Selected VisualState 上应用了一个 ColorAnimation，当用户选中项目时，它将更改边框（ListItem）的背景颜色。
同样，在获得焦点时，Rectangle 将出现（可见），并在获得焦点的项目周围出现粗边框。
因此，您可以通过这种方式为控件创建动画。
步骤 6
现在将 ResourceDictionary (Style.xaml) 添加到 App.xaml 页面。
<Application x:Class="MetroStyleListBox.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/MetroStyleListBox;component/Resources/Styles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application> 步骤 7
创建 UserControl，将其放在 ListBox 中，并应用 Style & ItemContinerStyle。
<Grid x:Name="LayoutRoot" Background="Transparent">
<ListBox x:Name="lbActiveCall"
Grid.Row="1"
Grid.ColumnSpan="2"
Width="600"
Height="300"
ItemContainerStyle="{StaticResource MetroListBoxItem}"
ItemsSource="{Binding FlowerCollection}"
Style="{StaticResource MetroListBox}" />
</Grid>
在上面的源代码中，为 ListBox Style 和 ListBoxItem Style (ItemContainerStyle) 添加了 StaticResources，这将把样式应用于控件。
这样，您就可以自定义控件的 ControlTemplate 来更改控件的外观。
我还创建了 Scrollviewer 样式，它包含在附加的 zip 文件中。