Search code examples
c#windows-phone-7windows-phone-8expression-blend

Animating the background image of a button?


I was very impressed of how The wikipedia app looks in wp7 and facinated on how the moving background of the buttons work.

I wanted to do a similar thing, any ideas on how i can do it?


Solution

  • Here's a pretty simple way to do it:

    <Image Source="/Assets/ApplicationIcon.png" VerticalAlignment="Top" Margin="0">
        <Image.Resources>
            <Storyboard x:Name="Shift">
                <DoubleAnimation From="0" To="100" Duration="0:0:2"
                                    Storyboard.TargetName="Translation"
                                    Storyboard.TargetProperty="TranslateY"
                                    AutoReverse="True"
                                    RepeatBehavior="Forever"/>
                <DoubleAnimation From="0" To="100" Duration="0:0:5"
                                    Storyboard.TargetName="Translation"
                                    Storyboard.TargetProperty="TranslateX"
                                    AutoReverse="True"
                                    RepeatBehavior="Forever"/>
            </Storyboard>
        </Image.Resources>
        <Image.RenderTransform>
            <CompositeTransform x:Name="Translation"/>
        </Image.RenderTransform>
    </Image>
    

    With MainPage.xaml.cs:

    public MainPage()
    {
        InitializeComponent();
    
        Shift.Begin();
    }