Silverlight:A Simple Image ZoomIn Animation

The article describes how we can create a simple Image zoom in and zoom out animation using Silverlight. The interesting thing in Silverlight is most of the animation control we can handle from markup language called XAML.  In order to achieve this we  have to use the StoryBoard & DoubleAnimation class. I am going to write a little XAML code on below.  You can download the  article source code from the bottom of the page.

Click here to view the “Live Demo”

<UserControl.Resources>
<Storyboard x:Name=”storyboard” Storyboard.TargetName=”image1″>
<DoubleAnimation Storyboard.TargetProperty=”Width” To=”600″ Duration=”0:0:2″></DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty=”Height” To=”600″ Duration=”0:0:5″></DoubleAnimation>
</Storyboard>
</UserControl.Resources>

In the Storyboard mark up you can see a attribute called Storyboard.TargetName which is the target control name. Here I am going to use the Image control because that is the target control which we are doing the animation.  The next markup is DoubleAnimation we should mention what attribute we want to animate may be width or height or opacity that depends on the Target Control attributes. Here I am going to ZoomIn  the Image so I have to use width and height properties and finally duration will control the time delay.

<Grid x:Name=”LayoutRoot” Width=”610″ Height=”610″>
<Image Height=”40″ Source=”Tulips.jpg” HorizontalAlignment=”Left”   Name=”image1″  VerticalAlignment=”Top” Width=”50″ />
<Button Content=”Zoom In” Height=”23″ HorizontalAlignment=”Left” Margin=”12,469,0,0″ Name=”btnZoomIn” VerticalAlignment=”Top” Width=”75″ Click=”ZoomIn_Click” />
<Button Content=”Zoom Out” Height=”23″ HorizontalAlignment=”Left” Margin=”97,468,0,0″ Name=”btnZoomOut” VerticalAlignment=”Top” Width=”75″ Click=”ZoomOut_Click” />
</Grid>

The above XAML has a Image cotrol which simply binds the Image name to the source attribute and two buttons for zoomIn and zoomOut functionaly.

XAML code behind

private void ZoomIn_Click(object sender, RoutedEventArgs e)
{
storyboard.Begin();
}

private void ZoomOut_Click(object sender, RoutedEventArgs e)
{
storyboard.Stop();
}

=====
The above method will have the functionality to start and stop the story board class.

That’s all we are ready to go now.. Live Demo

You can download the entire article from here or copy paste this URL

http://www.4shared.com/file/231292567/f6cf7ffe/ImageZoonInAnimations.html  in to your browser.

Hope this help and If you have any comments, please feel free to write your feedback.

Thanks
Deepu

Url Routing in Asp.Net Web Forms

One of the coolest features in Asp.Net 3.5  SP1 is web form URL  Routing (thanks for asp.net team). URL routing would really help in Search Engine based websites. You can download the article source code from the bottom of the page

How to Implement URL Routing

1) Create a web site using VS 2008 C#.
2) Right click the project and add reference to System.Web.Routing dll (make sure you have Asp.Net 3.5 Service Pack 1 installed in your machine)
3) Add the following lines to web.config file

Web.conifg  Configuration

The application resides in IIS 6.0 and IIS 7.0 you should  add the UrlRoutingModule class to the httpModules

<httpModules>
<add name=”UrlRoutingModule” type=”System.Web.Routing.UrlRoutingModule,System.Web.Routing,Version=3.5.0.0,Culture=neutral,PublicKeyToken=31BF3856AD364E35″ />
</httpModules>

For IIS 7.0 only

<system.webServer>
<modules>
<remove name=”UrlRoutingModule” />
<add name=”UrlRoutingModule” type=”System.Web.Routing.UrlRoutingModule,System.Web.Routing,Version=3.5.0.0,Culture=neutral,PublicKeyToken=31BF3856AD364E35″ />
</modules>
<handlers>
<add name=”UrlRoutingHandler” preCondition=”integratedMode” verb=”*” path=”UrlRouting.axd” type=”System.Web.HttpForbiddenHandler, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a” />
</handlers>
</system.webServer>

Global.asax file Configuration

Add Import directive to Import System.Web.Routing name space

<%@ Import Namespace=”System.Web.Routing” %>

Register Routes in Application_Start method

void Application_Start(object sender, EventArgs e)
{
RegisterRoutes(RouteTable.Routes);
}

public static void RegisterRoutes(RouteCollection routes)
{
routes.Add(“MemberList”, new Route
(
“member/{name}”,
new MemberRouteHandler(“~/member/userlist.aspx”)
));
}

The first parameter member/{name} which denote the url structure, here the url which starts /member/{name} (ex : /member/deepu/) will point physically to the following path ~/member/userlist.aspx

The above RegisterRoutes method register a class called MemberRouteHandler.cs

using System.Web.Compilation;
using System.Web.UI;
using System.Web;
using System.Web.Routing;

public interface IRoutablePage
{
RequestContext RequestContext { set; }
}

public class MemberRouteHandler : IRouteHandler
{
public MemberRouteHandler(string virtualPath)
{
this.VirtualPath = virtualPath;
}

public string VirtualPath { get; private set; }

public IHttpHandler GetHttpHandler(RequestContext
requestContext)
{
var page = BuildManager.CreateInstanceFromVirtualPath
(VirtualPath, typeof(Page)) as IHttpHandler;

if (page != null)
{
var routablePage = page as IRoutablePage;

if (routablePage != null) routablePage.RequestContext = requestContext;
}

return page;
}

}

Now we can create the Aspx pages to test the Routing. We need to create two aspx files member listing file and detail file.

Create a folder called member in root of the site.  (you can keep any name but make sure you have to change in global.asx file in Route constructor “member/{name}”)

Create a aspx page inside the member folder called default.aspx

This page will have a list of Members in Tabular format. I am going to use asp.net List view control to achieve this.

<form id=”form1″ runat=”server”>

<asp:ListView ID=”lvUserList” runat=”server”>
<LayoutTemplate>
<table width=”50%” style=”background-color: lightgrey;” cellpadding=”2″ cellspacing=”1″
border=”0″>
<tr style=”background-color: white”>
<td width=”100″ align=”center”>
Member ID
</td>
<td align=”center”>
Name
</td>
<td width=”75″ align=”center”>
Age
</td>
<td width=”50″>
</td>
</tr>
<asp:PlaceHolder ID=”itemPlaceholder” runat=”server” />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr style=”background-color: white”>
<td align=”center”>
<asp:Label ID=”lab” Text='<%# DataBinder.Eval(Container.DataItem, “MemberID”)%>’
runat=”server” />
</td>
<td>
<asp:Label ID=”Label1″ Text='<%# DataBinder.Eval(Container.DataItem, “Name”)%>’ runat=”server” />
</td>
<td align=”center”>
<asp:Label ID=”Label2″ Text='<%# DataBinder.Eval(Container.DataItem, “Age”)%>’ runat=”server” />
</td>
<td align=”center”>
<a href=”<%= ResolveUrl(“~/member/”)%><%# DataBinder.Eval(Container.DataItem, “Name”)%>”>
Detail</a>
</td>
</tr>
</ItemTemplate>
<ItemSeparatorTemplate>
<br />
</ItemSeparatorTemplate>
</asp:ListView>
</form>

Above markup will have a list of members and the hyper link column you can see the url structure which is defined in gloabal.asax file RouteMethod pattern.

<a href=”<%= ResolveUrl(“~/member/”)%><%# DataBinder.Eval(Container.DataItem, “Name”)%>”>

ResolveUrl(“~/member/”) = point to member folder from the root
<%# DataBinder.Eval(Container.DataItem, “Name”)%> = second parameter Member Name.  [for ex: ResolveUrl(“~/member/deepu”) ]

Default.aspx.cs code behind

using System;
using System.Collections.Generic;
using System.Linq;

public partial class Memeber
{
public int MemberID { get; set; }
public string Name { get; set; }
public int Age { get; set; }
}

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindUsers();
}
}

void BindUsers()
{

var items = new List<Memeber>()
{
new Memeber {MemberID = 1,Name = “Arjun”, Age = 1},
new Memeber {MemberID = 2,Name = “Deepu”, Age = 29},
new Memeber {MemberID = 3,Name = “Rakesh”, Age = 31},
new Memeber {MemberID = 4,Name = “Abhilash”, Age = 21},
};

lvUserList.DataSource = items.ToList();
lvUserList.DataBind();
}

We have completed the listing page. The next page will be the detail page which will be rendering the member name from the URL routing.

userlist.aspx page Markup

<form id=”form1″ runat=”server”>
<div>
<asp:Label ID=”labMemberName” runat=”server” />
</div>
</form>

In the code behind file for the detail page you must implement IRoutablePage interface class.

Code behind :

public partial class user_userlist : System.Web.UI.Page, IRoutablePage
{
public System.Web.Routing.RequestContext requestContext;

#region IRoutablePage Members
public System.Web.Routing.RequestContext RequestContext
{
set { requestContext = value; }
}
#endregion
protected object RouteValue(string key)
{
if (requestContext != null && requestContext.RouteData != null)
{
return requestContext.RouteData.Values[key];
}
return null;
}

protected void Page_Load(object sender, EventArgs e)
{
object memberName = RouteValue(“name”);
if (memberName != null)
{
labMemberName.Text = memberName.ToString();
}
}
}

Note : If you are implementing url routing in GoDaddy server and you are using Session variables in the routing pages you should add Session module (manually)

<httpModules>
<add name=”Session” type=”System.Web.SessionState.SessionStateModule”/>
<add name=”UrlRoutingModule” type=”System.Web.Routing.UrlRoutingModule,System.Web.Routing,Version=3.5.0.0,Culture=neutral,PublicKeyToken=31BF3856AD364E35″ />
</httpModules>

<system.webServer>
<modules>
<remove name=”Session” />
<add name=”Session” type=”System.Web.SessionState.SessionStateModule”/>
<remove name=”UrlRoutingModule” />
<add name=”UrlRoutingModule” type=”System.Web.Routing.UrlRoutingModule,System.Web.Routing,Version=3.5.0.0,Culture=neutral,PublicKeyToken=31BF3856AD364E35″ />
</modules>
<handlers>
<add name=”UrlRoutingHandler” preCondition=”integratedMode” verb=”*” path=”UrlRouting.axd” type=”System.Web.HttpForbiddenHandler, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a” />
</handlers>
</system.webServer>

Note : Always use ResolveUrl  for images OR css file or links to get the virtual path of the folder from the web site root  in the routing pages.
for ex :  [ ResolveUrl (“~/images/logo.jpg”) ]

You can download the entire article from here

or copy paste this url  http://www.4shared.com/file/230713773/954be86b/UrlRouting.html  in to your browser.

Hope this help and If you have any comments, please feel free to write your feedback.

Thanks
Deepu

<system.webServer>
<modules>
<remove name=”Session” />
<add name=”Session” type=”System.Web.SessionState.SessionStateModule”/>
<remove name=”UrlRoutingModule” />
<add name=”UrlRoutingModule” type=”System.Web.Routing.UrlRoutingModule,System.Web.Routing,Version=3.5.0.0,Culture=neutral,PublicKeyToken=31BF3856AD364E35″ />
</modules>
<handlers>
<add name=”UrlRoutingHandler” preCondition=”integratedMode” verb=”*” path=”UrlRouting.axd” type=”System.Web.HttpForbiddenHandler, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a” />
</handlers>
</system.webServer>

Silverlight:Change Button Background color

It is really hard when you want to remove the gradient effect in silverlight button control using designer mode.
I have struggled a lot to achieve this and finally I could solve this issue and thought of sharing this to every one.
By Default the if you try to create a button control and change the background color it look some thing like below

<Button x:Name=”btnTest” Content=”Default Background Color” Background=”Orange” Width=”170″ Height=”30″ HorizontalAlignment=”Left”>

I was expecting a orange color as the background of the button and I got in gradient effect..

So how do I get rid of this gradient effect.. The Below code resolve this issue

<Button Width=”100″ Height=”30″ Content=”Click Me !!!” Foreground=”White” >
<Button.Template>
<ControlTemplate TargetType=”Button”>
<Border x:Name=”Border” Background=”Orange”>
<ContentPresenter VerticalAlignment=”Center” HorizontalAlignment=”Center” />
</Border>
</ControlTemplate>
</Button.Template>
</Button>

and produces the following output.

Again if you want to customize some thing like rounded curve button you may need to add a attribute called CornerRadius.

<Button Width=”100″ Height=”30″ Content=”Click Me !!!” Foreground=”White” >
<Button.Template>
<ControlTemplate TargetType=”Button”>
<Border x:Name=”Border” Background=”Orange” CornerRadius=”4″>
<ContentPresenter VerticalAlignment=”Center” HorizontalAlignment=”Center” />
</Border>
</ControlTemplate>
</Button.Template>
</Button>

and produces the following output.

Create button background from codebehind

StringBuilder sb = new StringBuilder();
sb.Append( "<ControlTemplate xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' 
xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' ");
sb.Append("xmlns:data='clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data'
xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006' ");
sb.Append("TargetType='Button' >");
sb.Append("<Border x:Name=\"Border\" Background=\"Orange\" CornerRadius=\"4\"><ContentPresenter VerticalAlignment=\"Center\" HorizontalAlignment=\"Center\" /></Border> ");
sb.Append("</ControlTemplate> ");

Button btn = new Button();
btn.Width = width;
btn.Height = height;
btn.Content = content;
btn.Foreground = new SolidColorBrush(Colors.White);

ControlTemplate ct = XamlReader.Load(sb.ToString()) as ControlTemplate;
btn.Template = ct;
cnvParent.Children.Add(btn);

Hope this help and If you have any comments, please feel free to write your feedback.

Thanks
Deepu

how to consume an Atom RSS Feed using Asp.Net C# with LINQ

This article describes how to consume an Atom RSS Feed using Asp.Net C# with LINQ.
There are many ways to achieve this. But I am using LINQ because LINQ has lot of features to customize with minimum code.

XDocument doc = XDocument.Load(“http://www.asp.net/News/rss.ashx&#8221;); //configure your Url here.

var query =from feed in doc.Descendants(“item”)
orderby DateTime.Parse(feed.Element(“pubDate”).Value) descending
select new
{
Title = feed.Element(“title”).Value,
Description = feed.Element(“description”).Value,
Date = DateTime.Parse(feed.Element(“pubDate”).Value)
};

Using Xdocument object in LINQ will help you to read an xml file from the server.
Once you have the document object you can just take advantage of  linq to xml for customize,
So the above code just read all the rss reader from the given url sort by last publishing date.
If you want more customize to the above code to show only top few items from the list you can try with Take() method.

XDocument doc = XDocument.Load(“http://www.asp.net/News/rss.ashx&#8221;);
var query = (from feed in doc.Descendants(“item”)
orderby DateTime.Parse(feed.Element(“pubDate”).Value) descending
select new
{
Title = feed.Element(“title”).Value,
Description = feed.Element(“description”).Value,
Date = DateTime.Parse(feed.Element(“pubDate”).Value)
}).Take(10).ToList();

Here I am taking Top 10 Feed items from the list and sorting by last publishing date and simply binding to a DataGrid

<asp:DataGrid ID=”dg” runat=”server”></asp:DataGrid>

dg.DataSource = query.ToList();
dg.DataBind();

Note: You may need to replace the attribute name inside the Element tag with your XML node name.

Hope this help and If you have any comments, please feel free to write your feedback.

Thanks
Deepu