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


Top 5 Contributors of the Month
david stephan

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.
 

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


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


12.gif

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

 Subscribe to Articles

     

Further Readings:

Responses

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