CODEWITHSUNDEEP
c#wpffade
chyyran
chyyran

Reputation: 2616

Fade out from one image and fade in another

I'm trying to get one image to fade out completely, then fade in another image with Storyboards, but I can't figure it out. I have the fade out part working, but I can't find a way for it to change the Image and fade back in smoothly. I have yet to figure out a way for it to fade back in with one button press, and have the image change dynamically. Even if I change the source path, the image doesn't update. I'm trying to do all this with as much XAML as possible, rather than code-behind.

EDIT I figured out how to make it fade back in, however, changing the image source doesn't change the image. I need some help on this.

This is what I have right now

<Window.Resources>
    <Storyboard x:Key="FadeOut" Completed="Storyboard1_Completed">
        <DoubleAnimation From="1" To="0" Storyboard.TargetName ="Image1" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0:0:5"/>
    </Storyboard>
    <Storyboard x:Key="FadeIn" Name="FadeIn">
        <DoubleAnimation From="0" To="1" Storyboard.TargetName ="Image1" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0:0:5"/>
    </Storyboard>
</Window.Resources>

<Grid HorizontalAlignment="Center">

    <Image Source="{Binding Path=imagePath}" Margin="0,0,0,28" Name="Image1"/>
    <Button Content="Fade" Height="23" Margin="0,284,341,0" Name="button1" Width="162" Click="button1_Click"/>


</Grid>

C#

public partial class MainWindow : Window
{

    public String imagePath { get; set; }

    public MainWindow()
    {
        imagePath = "1.png";
        InitializeComponent();

    }

    private void Storyboard1_Completed(object sender, EventArgs e)
    {

        imagePath = "2.png";
        Storyboard stbFadeOut = (Storyboard)FindResource("FadeIn");
        stbFadeOut.Begin();
    }

    private void button1_Click(object sender, RoutedEventArgs e)
    {
        Storyboard stbFadeOut = (Storyboard)FindResource("FadeOut");
        stbFadeOut.Begin();

    }
}

Upvotes: 3

Views: 7571

Answers (3)

sa_ddam213
sa_ddam213

Reputation: 43596

You could just set anothet Storyboard to fade in after the first Storyboard finishes by setting the BeginTime to the Duration of the first StoryBoard

<Window x:Class="WpfApplication8.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="199" Width="206" Name="UI">
    <Grid DataContext="{Binding ElementName=UI}">
        <Image Source="{Binding Path=MyImage}" Margin="0,0,0,28" Name="Image1"/>
        <Button Content="Fade" Height="23"  Name="button1" Width="162" Margin="12,136,10,0">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard >
                        <Storyboard Name="Storyboard1" Duration="0:0:1" Completed="Storyboard1_Completed">
                            <DoubleAnimation Storyboard.TargetName="Image1" Storyboard.TargetProperty="Opacity" From="1" To="0"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                    <BeginStoryboard>
                        <Storyboard Name="Storyboard2" BeginTime="0:0:1" Duration="0:0:1" >
                            <DoubleAnimation Storyboard.TargetName="Image1" Storyboard.TargetProperty="Opacity" From="0" To="1"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>

Code:

public partial class MainWindow : Window, INotifyPropertyChanged
{
    public MainWindow()
    {
        InitializeComponent();
        MyImage = new BitmapImage(new Uri(@"Capture.png", UriKind.RelativeOrAbsolute));
    }

    private BitmapImage _image;
    public BitmapImage MyImage
    {
        get { return _image; }
        set { _image = value; NotifyPropertyChanged("MyImage"); }
    }

    private void Storyboard1_Completed(object sender, EventArgs e)
    {
        MyImage = new BitmapImage(new Uri(@"Capture1.png", UriKind.RelativeOrAbsolute));
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(string property)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(property));
        }
    }
}

Upvotes: 2

bic
bic

Reputation: 2281

The Bag of Tricks project has samples of how to do this.

Specifically look at the FadeTransition

Upvotes: 0

Fede
Fede

Reputation: 44028

Take a look at the TransitionPresenter in the WPF Bag of Tricks

Upvotes: 0

Related Questions