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.
Now we will have two images that can be used as Next and Previous Buttons Image.
I have taken the above images from http://www.iconfinder.net .
Now let's have the Buttons with Image inside it.
The above Buttons are placed with an Image in it. The main feature of the Buttons are their Background and BorderBrush properties.
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.
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.
In XAML it looks like the following:
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".
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.
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.
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.
In next part we will see how the Window is made fullscreen with Transperency, etc...