日期:2014-05-17  浏览次数:20640 次

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"/>