windows8开发-xaml中实现ComboBox的Item样式
假设想实现ComboBoxItem的Foreground样式，可以在PointerOver或Pressed的状态下呈现不同的效果，那么可以这样实现:
<Style x:Name="DelayClockComboBoxStyle" TargetType="ComboBox"> <Setter Property="Height" Value="48"/> <Setter Property="Width" Value="180"/> <Setter Property="TabNavigation" Value="Once" /> <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" /> <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" /> <Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled" /> <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" /> <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True" /> <Setter Property="HorizontalContentAlignment" Value="Center" /> <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}" /> <Setter Property="ComboBox.ItemTemplate"> <Setter.Value> <DataTemplate> <Border Width="180" Height="48" Background="Transparent" Margin="0" BorderThickness="2" BorderBrush="White"> <!--Foreground直接绑定本身所在的容器ContentPresenter--> <TextBlock Text="{Binding}" FontSize="26" Foreground="{Binding Foreground, ElementName=ContentPresenter}" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> </DataTemplate> </Setter.Value> </Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ComboBox"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="PointerOver"/> <VisualState x:Name="Pressed"> <Storyboard> <!--Pressed时改变ContentPresendter的Foreground，那么item的foreground也跟着改变--> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppAccentBrush}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="White" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Disabled"/> </VisualStateGroup> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Focused"/> <VisualState x:Name="FocusedPressed"/> <VisualState x:Name="Unfocused" /> <VisualState x:Name="PointerFocused" /> <VisualState x:Name="FocusedDropDown"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PopupBorder" Storyboard.TargetProperty="Visibility" Duration="0"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="DropDownStates"> <VisualState x:Name="Opened"> <Storyboard> <SplitOpenThemeAnimation OpenedTargetName="PopupBorder" ContentTargetName="ScrollViewer" ClosedTargetName="ContentPresenter" ContentTranslationOffset="0" OffsetFromCenter="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOffset}" OpenedLength="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOpenedHeight}" ClosedLength="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownClosedHeight}" /> </Storyboard> </VisualState> <VisualState x:Name="Closed"> <Storyboard> <SplitCloseThemeAnimation OpenedTargetName="PopupBorder" ContentTargetName="ScrollViewer" ClosedTargetName="ContentPresenter" ContentTranslationOffset="40" OffsetFromCenter="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOffset}" ContentTranslationDirection="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SelectedItemDirection}" OpenedLength="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOpenedHeight}" ClosedLength="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownClosedHeight}" /> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border x:Name="Background" Background="Transparent" BorderThickness="0"/> <!--此处的ContentPresendter对应着ItemTemplate中的每一个Item--> <ContentPresenter x:Name="ContentPresenter" Margin="{TemplateBinding Padding}" Foreground="White" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> <Popup x:Name="Popup"> <Border x:Name="PopupBorder" Background="Transparent" BorderThickness="3" BorderBrush="White" HorizontalAlignment="Stretch"> <ScrollViewer x:Name="ScrollViewer" Foreground="{StaticResource ComboBoxPopupForegroundThemeBrush}" VerticalSnapPointsType="OptionalSingle" VerticalSnapPointsAlignment="Far" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" ZoomMode="Disabled"> <ItemsPresenter/> </ScrollViewer> </Border> </Popup> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>VisualStateGroup中的每一个VisualState与先后顺序有关的，有可能后一个State会覆盖了前一个State的效果。
同时这样的一个样式动不动就会很长，所以有一些效果没什么必要的话就应该省略从简。