In some case, we need to customize the Scrolling functionality in Silverlight depending upon the requirement. The default look of ScrollViewer doesn’t give proper UI effect. In such case, you need to create the whole scroll behavior by modifying XAML and writing a bunch of C# code. 
In this article, I will demonstrate you how to create the above scrolling functionality simply without writing any lines of C# code. You have to use only Expression Blend to create the richness of the Scrolling. Read more to learn about it. BackgroundIn various situation, depending upon the User Experience of your Silverlight application UI, you need to customize the scrolling functionality like the above image either horizontally or vertically. Few years back when I was working in Silverlight 2 Beta 1, I faced the same kind of situation and I implemented this writing my own logic in my main page. I declared some member variables to store the current position, view state, blah blah… which was really very difficult to implement. Recently, I thought to do the same UI functionality but it was to difficult to implement the same again. It requires to think for the algorithm, it requires to write code in xaml.cs, it requires to test properly while developing and also it requires to do thorough testing before integrating in any application. I searched over net and found some good topic there but all described the same logic here and there. I need to write some code to achieve this. Oh no!!! I don’t want it again. So, how to do this? Something stroke my mind. Can I do this using the default Scroll Viewer? Can I do this by just modifying the template of the same? I was not 100% sure but thought to give a try. Let’s see what I can do. At the end, I came up with my design and it was just using the Expression Blend and there was no code written in C#. In this article, I am going to demonstrate the same for you, so that, you can understand it step-by-step. Pretty lengthy article, but you can understand it easily if you follow all the steps properly. And yes, there are huge nos. of screenshots for you to understand it easily.
Part 1: Create the basic UIBefore starting anything, we need to create the basic UI for our sample application. Let’s create a Silverlight application first. As discussed, we will do it using the Expression Blend. Hence open your Expression Blend. Now create a New Project. You can chose between “Silverlight Application “ Website” and “Silverlight Application”. Give a name to your project and click “OK” to continue. Read more: Kunal's Blog
In this article, I will demonstrate you how to create the above scrolling functionality simply without writing any lines of C# code. You have to use only Expression Blend to create the richness of the Scrolling. Read more to learn about it. BackgroundIn various situation, depending upon the User Experience of your Silverlight application UI, you need to customize the scrolling functionality like the above image either horizontally or vertically. Few years back when I was working in Silverlight 2 Beta 1, I faced the same kind of situation and I implemented this writing my own logic in my main page. I declared some member variables to store the current position, view state, blah blah… which was really very difficult to implement. Recently, I thought to do the same UI functionality but it was to difficult to implement the same again. It requires to think for the algorithm, it requires to write code in xaml.cs, it requires to test properly while developing and also it requires to do thorough testing before integrating in any application. I searched over net and found some good topic there but all described the same logic here and there. I need to write some code to achieve this. Oh no!!! I don’t want it again. So, how to do this? Something stroke my mind. Can I do this using the default Scroll Viewer? Can I do this by just modifying the template of the same? I was not 100% sure but thought to give a try. Let’s see what I can do. At the end, I came up with my design and it was just using the Expression Blend and there was no code written in C#. In this article, I am going to demonstrate the same for you, so that, you can understand it step-by-step. Pretty lengthy article, but you can understand it easily if you follow all the steps properly. And yes, there are huge nos. of screenshots for you to understand it easily. Part 1: Create the basic UIBefore starting anything, we need to create the basic UI for our sample application. Let’s create a Silverlight application first. As discussed, we will do it using the Expression Blend. Hence open your Expression Blend. Now create a New Project. You can chose between “Silverlight Application “ Website” and “Silverlight Application”. Give a name to your project and click “OK” to continue. Read more: Kunal's Blog
Posts
0 comments:
Post a Comment