Question

我为我的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>

Answer 1

因此，在混合中打开你的项目模板转到你的状态选项卡（或者直接在你的MouseOver状态的VisualStateManager XAML中直接执行），并且对于初学者来说，将你的时间持续时间调整到更长的时间以降低转换的速度和使淡入淡出效果出现。您还可以设置过渡效果和缓动功能，为您的简单过渡提供更多的乐趣。这是最容易使用混合，但这是一个快速的脏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>

为ComboBoxItem创建动画

1 个答案: