wpf - 创建动画的非重复方式

Question

我的应用程序中有五个标签。即lbl1 , lbl2 , lbl3 , lbl4 , lbl5

何时 mouse去over lbl1 fontsize的lbl1变成24来自16 。 同时layout width and height还有increases 。 还有color的lbl1更改为red来自white .

何时 Mouse leaves lbl1 在 reverse 中重复了所有上述过程订单。

我想对 all the labels 做同样的事情上面提到过。

我正在使用expression blend , wpf , vb.net .

至少有人可以给我推荐一个 tutorial或query搜索google ？

编辑:

<Window ....>
    <Window.Resources>
        <Storyboard x:Key="MenuItem_MouseOver">
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.FontWeight)" Storyboard.TargetName="lblCompany">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.2">
                    <DiscreteObjectKeyFrame.Value>
                        <FontWeight>Bold</FontWeight>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.FontSize)" Storyboard.TargetName="lblCompany">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="26.667"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="lblCompany">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="130"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="lblCompany">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="50"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="MenuItem_MouseLeave">
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.FontWeight)" Storyboard.TargetName="lblCompany">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <FontWeight>Bold</FontWeight>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.2">
                    <DiscreteObjectKeyFrame.Value>
                        <FontWeight>Normal</FontWeight>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.FontSize)" Storyboard.TargetName="lblCompany">
                <EasingDoubleKeyFrame KeyTime="0" Value="26.667"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="21.333"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="lblCompany">
                <EasingDoubleKeyFrame KeyTime="0" Value="130"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="102"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="lblCompany">
                <EasingDoubleKeyFrame KeyTime="0" Value="50"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="38"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="lblCompany">
            <BeginStoryboard x:Name="MenuItem_MouseOver_BeginStoryboard" Storyboard="{StaticResource MenuItem_MouseOver}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="lblCompany">
            <BeginStoryboard x:Name="MenuItem_MouseLeave_BeginStoryboard" Storyboard="{StaticResource MenuItem_MouseLeave}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <StackPanel x:Name="StackPanelMenu" Height="65" Margin="122,0,278,0" VerticalAlignment="Top" Orientation="Horizontal">
            <Label x:Name="lblCompany" Content="Company" Margin="0,17,0,18" Width="102" VerticalAlignment="Center" Height="38" Foreground="White" FontSize="21.333" Template="{DynamicResource lblMenuTemplate}"/>
            <Label x:Name="lblMasters" Content="Masters" Width="86" VerticalAlignment="Center" Height="38" Foreground="White" FontSize="21.333" Template="{DynamicResource lblMenuTemplate}"/>
            <Label x:Name="lblTransactions" Content="Transactions" Width="127" VerticalAlignment="Center" Height="38" Foreground="White" FontSize="21.333" Template="{DynamicResource lblMenuTemplate}"/>
            <Label x:Name="lblReports" Content="Reports" Width="82" VerticalAlignment="Center" Height="38" Foreground="White" FontSize="21.333" Template="{DynamicResource lblMenuTemplate}"/>
            <Label x:Name="lblSettings" Content="Settings" Width="88" VerticalAlignment="Center" Height="38" Foreground="White" FontSize="21.333" Template="{DynamicResource lblMenuTemplate}"/>
        </StackPanel>
    </Grid>
</Window>

Answer 1

您好，我已经根据您的要求创建了示例。

XAML
 <Grid Background="Black" >
    <Grid.Resources>
        <Style TargetType="{x:Type Label}">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Label}">
                        <ContentPresenter Content="{TemplateBinding Content}"/>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Foreground" Value="Red"/>
                                <Setter Property="FontSize" Value="24"/>                                  
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>

    <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
        <Label Content="First Text"/>
        <Label Content="Second Text" Margin="30 0"/>
        <Label Content="Third Text" Margin="30 0"/>
    </StackPanel>
</Grid>