ListBox 样式和模板
更新:2011 年 4 月
本主题介绍 ListBox 控件的样式和模板。 您可以修改默认的 ControlTemplate,以便为控件提供一个独特的外观。 有关更多信息,请参见通过创建 ControlTemplate 自定义现有控件的外观。
ListBox 部件
ListBox 控件没有任何命名部件。
在为 ListBox 创建 ControlTemplate 时,模板可能在 ScrollViewer 中包含 ItemsPresenter。 (ItemsPresenter 显示 ListBox 中的每一项;通过 ScrollViewer 可以在控件内滚动)。 如果 ItemsPresenter 不是 ScrollViewer 的直接子级,则您必须为 ItemsPresenter 提供名称 ItemsPresenter。
ListBox 状态
下表列出了 ListBox 控件的可视状态。
VisualState 名称 |
VisualStateGroup 名称 |
说明 |
Valid |
ValidationStates |
控件有效。 |
InvalidFocused |
ValidationStates |
控件无效,但具有焦点。 |
InvalidUnfocused |
ValidationStates |
控件无效并且没有焦点。 |
ListBoxItem 部件
ListBoxItem 控件没有任何命名的部件。
ListBoxItem 状态
下表列出了 ListBox 控件的可视状态。
VisualState 名称 |
VisualStateGroup 名称 |
说明 |
正常 |
CommonStates |
默认状态。 |
MouseOver |
CommonStates |
鼠标指针悬停在控件上。 |
Disabled |
CommonStates |
该项被禁用。 |
Focused |
FocusStates |
该项有焦点。 |
Unfocused |
FocusStates |
该项不具有焦点。 |
未选定 |
SelectionStates |
该项当前被选定。 |
已选定 |
SelectionStates |
该项未被选定。 |
SelectedUnfocused |
SelectionStates |
该项被选定,但没有焦点。 |
Valid |
ValidationStates |
该控件使用 Validation 类,Validation.HasError 附加属性为 false。 |
InvalidFocused |
ValidationStates |
当 Validation.HasError 附加属性为 true 时,控件具有焦点。 |
InvalidUnfocused |
ValidationStates |
当 Validation.HasError 附加属性为 true 时,控件没有焦点。 |
ListBox ControlTemplate 示例
下面的示例演示如何为 ListBox 和 ListBoxItem 控件定义 ControlTemplate。
<Style x:Key="{x:Type ListBox}"
TargetType="ListBox">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility"
Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll"
Value="true" />
<Setter Property="MinWidth"
Value="120" />
<Setter Property="MinHeight"
Value="95" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border Name="Border"
BorderThickness="1"
CornerRadius="2">
<Border.Background>
<SolidColorBrush Color="{StaticResource ControlLightColor}" />
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="{StaticResource BorderMediumColor}" />
</Border.BorderBrush>
<ScrollViewer Margin="0"
Focusable="false">
<StackPanel Margin="2"
IsItemsHost="True" />
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled"
Value="false">
<Setter TargetName="Border"
Property="Background">
<Setter.Value>
<SolidColorBrush Color="{StaticResource DisabledControlLightColor}" />
</Setter.Value>
</Setter>
<Setter TargetName="Border"
Property="BorderBrush">
<Setter.Value>
<SolidColorBrush Color="{DynamicResource DisabledBorderLightColor}" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsGrouping"
Value="true">
<Setter Property="ScrollViewer.CanContentScroll"
Value="false" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type ListBoxItem}"
TargetType="ListBoxItem">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="Border"
Padding="2"
SnapsToDevicePixels="true">
<Border.Background>
<SolidColorBrush Color="Transparent" />
</Border.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource SelectedBackgroundColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource SelectedUnfocusedColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
上面的示例使用下面的一个或多个资源。
<!--Control colors.-->
<Color x:Key="WindowColor">#FFE8EDF9</Color>
<Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
<Color x:Key="ContentAreaColorDark">#FF7381F9</Color>
<Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
<Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
<Color x:Key="DisabledForegroundColor">#FF888888</Color>
<Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
<Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>
<Color x:Key="ControlLightColor">White</Color>
<Color x:Key="ControlMediumColor">#FF7381F9</Color>
<Color x:Key="ControlDarkColor">#FF211AA9</Color>
<Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
<Color x:Key="ControlPressedColor">#FF211AA9</Color>
<Color x:Key="GlyphColor">#FF444444</Color>
<Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>
<!--Border colors-->
<Color x:Key="BorderLightColor">#FFCCCCCC</Color>
<Color x:Key="BorderMediumColor">#FF888888</Color>
<Color x:Key="BorderDarkColor">#FF444444</Color>
<Color x:Key="PressedBorderLightColor">#FF888888</Color>
<Color x:Key="PressedBorderDarkColor">#FF444444</Color>
<Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>
<Color x:Key="DisabledBorderDarkColor">#FF888888</Color>
<Color x:Key="DefaultBorderBrushDarkColor">Black</Color>
<!--Control-specific resources.-->
<Color x:Key="HeaderTopColor">#FFC5CBF9</Color>
<Color x:Key="DatagridCurrentCellBorderColor">Black</Color>
<Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color>
<Color x:Key="NavButtonFrameColor">#FF3843C4</Color>
<LinearGradientBrush x:Key="MenuPopupBrush"
EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="{DynamicResource ControlLightColor}"
Offset="0" />
<GradientStop Color="{DynamicResource ControlMediumColor}"
Offset="0.5" />
<GradientStop Color="{DynamicResource ControlLightColor}"
Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill"
StartPoint="0,0"
EndPoint="1,0">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#000000FF"
Offset="0" />
<GradientStop Color="#600000FF"
Offset="0.4" />
<GradientStop Color="#600000FF"
Offset="0.6" />
<GradientStop Color="#000000FF"
Offset="1" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
有关完整示例,请参见 Styling with ControlTemplates Sample(使用 ControlTemplates 设置样式的示例)。
请参见
参考
概念
通过创建 ControlTemplate 自定义现有控件的外观
其他资源
修订记录
日期 |
修订记录 |
原因 |
---|---|---|
2011 年 4 月 |
包括了有关在 ControlTemplate 中包括 ItemsPresenter 和 ScrollViewer 的备注。 |
信息补充。 |
2010 年 8 月 |
添加了 ControlTemplate 示例。 |
信息补充。 |