Making an Image SlideShow in WPF: Part II

Introduction

In part I of this article series we have seen the preview of the application and we created a ListBox that has Customized ItemContainer and ItemPanel. In this article we will see how next and Previous Buttons are added to the ListBox . 

To start with we need to disable the Horizontal Scrollbar in the ListBox.

1.gif
 
Now we will have two images that can be used as Next and Previous Buttons Image.

2.gif
 
I have taken the above images from http://www.iconfinder.net .

Now let's have the Buttons with Image inside it.

3.gif
4.gif
 
 
The above Buttons are placed with an Image in it. The main feature of the Buttons are their Background and BorderBrush properties.

5.gif
 
It has to be set x:Null manually otherwise the default Background and default BorderBrush will be taken.

Now will put it all together: Previous Button, ListBox and Next Button.

6.gif
 
I have put it inside one stack panel and for a little bit of effect I have put the ListBox inside a Border.

The following is the Heirarchical Structure of it.

7.gif
 
In XAML it looks like the following:

8.gif
 
Now we will have some animation to the Previous and Next Buttons so that it would have some Fade-In and Fade-Out effect.

We will create a StoryBoard named "FadeLstBox".

9.gif
 
We can make the animation in Expression Blend or we can just simply write it in XAML.

As you see in the above XAML we have animated three Properties such as FrameworkElement.Wdth, FrameworkElement.HorizontalAlignment and UIElement.Opacity.

So we have made three Animation using Keyframes. 

10.gif
 
When the Button is pressed, it would animate FadeIn, then Horizontal Alignement from Left to Right and then Opacity. It would feel like the ListBox Items are loaded from the side we click the Button.

We will do the same for Next Button.

11.gif
 
As you see in above XAML display we have the same properties we animate. But the values in the KeyFrame are different.

The last but not the lease we will have Triggers that will invoke the StoryBoard to repective Button Clicks.

12.gif
 
In next part we will see how the Window is made fullscreen with Transperency, etc...

Up Next
    Ebook Download
    View all
    Learn
    View all