Создать анимацию для ComboBoxItem - PullRequest
0 голосов
/ 06 января 2012

Я создал стиль и управляющий шаблон для моего ComboBox, и я хотел бы нарядить его в анимацию.

Как создать анимацию раскадровки, когда при наведении курсора на ComboBoxItem подсветка будет исчезатькак только я наведусь, подсветка тоже исчезнет?Спасибо!

Вот мой код:

<!--Area which contains selected items in the ComboBox-->

<ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
    <!--THIS MUST BE NAMED AS Part_ContentHost-->
    <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}"/>
</ControlTemplate>

<!--ComboBox Style. Uses ComboBoxToggleButton to expand and collapse a Popup control SimpleScrollViewer to all items to be scrolled and SimpleComboBoxItem to define the look of each item. The Popup shows a list of items in a StackPanel-->
    <Style TargetType="ComboBox">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBox">
                    <Grid>
                        <!--The ToggleButton is databound to the ComboBox itself to toggle IsDropDownOpen-->
                        <ToggleButton Grid.Column="2" Template="{DynamicResource ComboBoxToggleButton}" x:Name="ToggleButton" Focusable="False" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
                        <ContentPresenter HorizontalAlignment="Left" Margin="3,3,23,3" x:Name="ContentSite" VerticalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" IsHitTestVisible="True"/>

                        <!--The TextBox must be named PART_EditableTextBox or ComboBox will not recognize it-->
                        <TextBox Visibility="Hidden" Template="{DynamicResource ComboBoxTextBox}" HorizontalAlignment="Left" Margin="3,3,23,3" x:Name="PART_EditableTextBox" Style="{x:Null}" VerticalAlignment="Center" Focusable="True" IsReadOnly="{TemplateBinding IsReadOnly}" />            

                        <!-- The Popup shows the list of items in the ComboBox. IsOpen is databound to IsDropDownOpen which is toggled via the ComboBoxToggleButton -->
                    <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide">
                        <Grid MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">
                            <Border x:Name="DropDownBorder" Background="{DynamicResource ComboBoxWindowBackgroundBrush}" BorderBrush="{DynamicResource ComboBoxSolidBorderBrush}" BorderThickness="1"/>

                            <ScrollViewer Margin="4,6,4,6"  SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
                                <!-- The StackPanel is used to display the children by setting IsItemsHost to be True -->
                                <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained"/>
                            </ScrollViewer>
                        </Grid>
                    </Popup>
                    </Grid>

                    <ControlTemplate.Triggers>                      
                        <!-- This forces the DropDown to have a minimum size if it is empty -->
                        <Trigger Property="HasItems" Value="false">
                            <Setter Property="MinHeight" Value="95" TargetName="DropDownBorder"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{DynamicResource ComboBoxDisabledForegroundBrush}"/>
                        </Trigger>
                        <Trigger Property="IsGrouping" Value="true">
                            <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                        </Trigger>
                        <Trigger Property="AllowsTransparency" SourceName="Popup" Value="true">
                            <Setter Property="CornerRadius" Value="4" TargetName="DropDownBorder"/>
                            <Setter Property="Margin" Value="0,2,0,0" TargetName="DropDownBorder"/>
                        </Trigger>
                        <Trigger Property="IsEditable" Value="true">
                            <Setter Property="IsTabStop" Value="false"/>
                            <Setter Property="Visibility" Value="Visible" TargetName="PART_EditableTextBox"/>
                            <Setter Property="Visibility" Value="Hidden" TargetName="ContentSite"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

        <!--This is used for each item inside of the ComboBox. You can change the selected color of each item below-->
<Style TargetType="ComboBoxItem">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                <Grid SnapsToDevicePixels="true">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.004*"/>
                        <ColumnDefinition Width="0.996*"/>
                    </Grid.ColumnDefinitions>

                    <Border x:Name="BorderItem" Grid.Column="1" Grid.ColumnSpan="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>     

                    <Border x:Name="BorderSelectedItem" Grid.Column="1" Grid.ColumnSpan="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">

                    <Path x:Name="ItemSelectedArrow" Data="M0.5,0.25 L0.5,22.25 19.5,22.25 z" Fill="#FFFFB14C" HorizontalAlignment="Left" Width="10.248" Height="10" Stretch="Fill" StrokeThickness="0" Margin="-0.376,-0.168,0,-0.332" Grid.Column="1" Visibility="Hidden">
    </Path>
                    </Border>               

                    <ContentPresenter x:Name="ContentSite" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="2,2,0,2"/>
                </Grid>
                <ControlTemplate.Triggers>

                    <!-- Change IsHighlighted SelectedBackgroundBrush to set the selection color for the items -->
                    <Trigger Property="IsSelected" Value="True">
                        <!--<Setter Property="Background" Value="{DynamicResource ComboBoxSelectedBackgroundBrush}"  TargetName="BorderSelectedItem"/>-->
                        <Setter Property="Visibility" Value="Visible" TargetName="ItemSelectedArrow"/>
                        <Setter Property="Margin" Value="10,2,0,2" TargetName="ContentSite"/>
                        <Setter Property="FontWeight" Value="Bold"/>            
                    </Trigger>
                    <Trigger Property="IsHighlighted" Value="true">
                        <Setter Property="Background" Value="{DynamicResource ComboBoxHighlightBackgroundBrush}" TargetName="BorderItem"/>

                    </Trigger>

                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource ComboBoxDisabledForegroundBrush}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

1 Ответ

0 голосов
/ 09 января 2012

Итак, открыв шаблон элемента в blend, перейдите на вкладку «Состояния» (или просто сделайте это прямо в XAML VisualStateManager для вашего состояния MouseOver) и для начала настройте длительность времени на более длительное время, чтобы уменьшить скорость перехода и заставить эффект исчезать появляться. Вы также можете настроить эффект перехода и функцию ослабления, чтобы придать простоту вашему переходу дополнительной прохлады. Проще всего просто использовать blend, но вот быстрый и грязный пример xaml, который может дать лучшую идею. Надеюсь, это поможет, удачи!

<VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition From="Normal" **GeneratedDuration="0:0:0.15"** To="MouseOver">
                                        <VisualTransition.GeneratedEasingFunction>
                                            <ExponentialEase EasingMode="EaseIn" Exponent="7"/>
                                        </VisualTransition.GeneratedEasingFunction>
                                    </VisualTransition>
                                    <VisualTransition From="MouseOver" **GeneratedDuration="0:0:0.15"** To="Normal">
                                        <VisualTransition.GeneratedEasingFunction>
                                            <CircleEase EasingMode="EaseIn"/>
                                        </VisualTransition.GeneratedEasingFunction>
                                    </VisualTransition>
                                    <VisualTransition GeneratedDuration="0:0:0.15"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverBorder">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                            <SplineDoubleKeyFrame KeyTime="00:00:00.0500000" Value="1.0" KeySpline="0,0,0.0299999993294477,0.920000016689301"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ColorAnimation Duration="0" To="{StaticResource BaseColor2}" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/>
                                    </Storyboard>
                                </VisualState>
...