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

您需要为此 msdn article 中所示的标签创建一个控制模板.
之后，您需要定义触发器来更改字体、大小和颜色。
在 triggers 上查看此论坛帖子

试试这些，如果您需要更多帮助，请告诉我

编辑:

这里不需要使用 Storyboard。我们可以使用控制模板和触发器轻松实现这一点。检查代码

<Window.Resources>
        <Style x:Key="LabelStyle" TargetType="Label">
            <Setter Property="Foreground" Value="Green" />
            <Setter Property="FontSize" Value="16" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Label">
                        <Border>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                           />
                        </Border>
                        <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>
    </Window.Resources>
    <Grid>
        <StackPanel x:Name="StackPanelMenu" Height="65"  VerticalAlignment="Top" Orientation="Horizontal">
            <Label x:Name="lblCompany" Content="Company"  Width="102" VerticalAlignment="Center" Height="38"  Style="{StaticResource LabelStyle}" />
            <Label x:Name="lblMasters" Content="Masters" Width="86" VerticalAlignment="Center" Height="38"  Style="{StaticResource LabelStyle}" />
            <Label x:Name="lblTransactions" Content="Transactions" Width="127" Height="38" Style="{StaticResource LabelStyle}" />
            <Label x:Name="lblReports" Content="Reports" Width="82" VerticalAlignment="Center" Height="38" Style="{StaticResource LabelStyle}"/>
            <Label x:Name="lblSettings" Content="Settings" Width="88" VerticalAlignment="Center" Height="38" Style="{StaticResource LabelStyle}"  />
        </StackPanel>
    </Grid>
</Window>