.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Gaurav Pal

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

WPF Image SlideShow : Part II

Posted By:Diptimaya Patra       Posted Date: May 20, 2010    Points: 25    Category: Silverlight    URL: http://www.dotnetspark.com  

Create WPF Image SlideShow : Part II. In this article we will see how next and Previous Buttons are added to the ListBox.


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 Key frames. 


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 respective Button Clicks.


In next part we will see how the Window is made full screen with Transperency, etc...

 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend