locked
How to achieve this effect in Silverlight ? RRS feed

  • Question

  • Hello,
    On this site:
    http://www.qesign.com/templates/template.php?i=28302
    there is effect which I want to reproduce in Silverlight. This effect is when you click button and color line fallen from top through around button and continue go down.
    Additionaly I want to do something like in intro where colored and shined lines flows with different directions.
    I don't know how to achive this in Silverlight using Blend ?
    Can you help me ?

    Hello,

    On this site:

    http://www.qesign.com/templates/template.php?i=28302

    there is effect which I want to reproduce in Silverlight. This effect is when you click button and color line fallen from top through around button and continue go down.

    Additionaly I want to do something like in intro where colored and shined lines flows with different directions.

    I don't know how to achive this in Silverlight using Blend ?

    Can you help me ?

    Saturday, November 6, 2010 4:10 AM

Answers

All replies

  • A good place to start would be the visual state manager. Here is a quick example of something you mind to to a ItemsControl in a template


     <Grid x:Name="RootElement">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
    
                                    <VisualState x:Name="Normal" />
    
    
                                    <!--What Happens on Mouse Over, Size Increases Color Changes-->
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation 
                                                    Duration = "0:0:0.2"           
                                                    To = "1.2"            
                                                    Storyboard.TargetProperty = "(UIElement.RenderTransform).(CompositeTransform.ScaleX)"            
                                                    Storyboard.TargetName = "text"           
                                                     />
                                            <DoubleAnimation 
                                                    Duration = "0:0:0.2"           
                                                    To = "1.2"            
                                                    Storyboard.TargetProperty = "(UIElement.RenderTransform).(CompositeTransform.ScaleY)"            
                                                    Storyboard.TargetName = "text"           
                                                     />
                                            <ColorAnimation
                                                Duration="0:0:0.2"
                                                To="SpringGreen"
                                                Storyboard.TargetProperty="(UIElement.Foreground).(SolidColorBrush.Color)"
                                                Storyboard.TargetName="text"
                                                />
                                        </Storyboard>
                                    </VisualState>
    
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimation 
                                                    Duration = "0:0:0.1"           
                                                    To = "0.9"            
                                                    Storyboard.TargetProperty = "(UIElement.RenderTransform).(CompositeTransform.ScaleX)"            
                                                    Storyboard.TargetName = "text" AutoReverse="True" RepeatBehavior="2x" />
                                            <DoubleAnimation 
                                                    Duration = "0:0:0.1"           
                                                    To = "0.9"            
                                                    Storyboard.TargetProperty = "(UIElement.RenderTransform).(CompositeTransform.ScaleY)"            
                                                    Storyboard.TargetName = "text" AutoReverse="True" RepeatBehavior="2x" />
                                            <ColorAnimation
                                                Duration="0:0:0.2"
                                                To="SpringGreen"
                                                Storyboard.TargetProperty="(UIElement.Foreground).(SolidColorBrush.Color)"
                                                Storyboard.TargetName="text"
                                                />
                                        </Storyboard>
                                    </VisualState>
    
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <TextBlock 
                                    x:Name="text"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Text="{Binding}" 
    	                            Height="35">
                                    <TextBlock.Foreground>
                                        <SolidColorBrush Color="DarkSlateGray"/>
                                    </TextBlock.Foreground>
    				                <TextBlock.RenderTransform>
    					                <CompositeTransform />
    				                </TextBlock.RenderTransform>
                            </TextBlock>
                        </Grid>


    this is a great link to get you started as well


    http://msdn.microsoft.com/query/dev10.query?appId=Dev10IDEF1&l=EN-US&k=k(SYSTEM.WINDOWS.VISUALSTATEMANAGER.VISUALSTATEGROUPS);k(VS.XAMLEDITOR);k(TargetFrameworkMoniker-%22SILVERLIGHT,VERSION%3dV4.0%22)&rd=true

    Saturday, November 6, 2010 9:39 AM
  • Hello,

    I know very good how VisualState works.

    But in my opinion this kind of animation is more complicated then change only view state of controls.

    In this animation this line flows and expand.

    I know how to animate expansion of the line but only in forward. I don't know how to expand line like in this demo.

    1. forward,

    2. arround the button,

    3. forrword

    Saturday, November 6, 2010 6:10 PM
  • Hi,

    I think it's a mask animation, for silverlight, you could use UIElement.Clip property to make this kind of animation

    http://msdn.microsoft.com/en-us/library/system.windows.uielement.clip.aspx

    http://msdn.microsoft.com/en-us/library/ms751584(VS.85).aspx

    Thanks,

    Wednesday, November 10, 2010 10:45 PM