CODEWITHSUNDEEP
wpfvb.netexpression-blend
Khushi
Khushi

Reputation: 1051

Non-repeating way of creating animations

I have five labels in my application. namely lbl1, lbl2, lbl3, lbl4, lbl5

When mouse goes over lbl1 the fontsize of lbl1 becomes 24 from 16. At the same time the layout width and height also increases. Also the color of lbl1 changes to red from white.

When Mouse leaves the lbl1 all the above procedure is repeated in reverse order.

I want to do the same thing with all the labels mentioned above.

I am using expression blend, wpf, vb.net.

At least can any one suggest me a tutorial or a query to search on google?

EDIT :

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

Upvotes: 2

Views: 237

Answers (2)

Jasti
Jasti

Reputation: 947

You need to create a control template for label as shown in this msdn article . After that you need to define triggers to change font, size and color. Check this forum post on triggers

Try these and let me know if you need more help on this

EDIT:

No need to use storyboard here. We can achieve this easily using Control Template and Triggers. Check the code

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

Upvotes: 1

Ravuthasamy
Ravuthasamy

Reputation: 599

Hi i have created sample based on your requirement.

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>

Upvotes: 2

Related Questions