RSS Feed Widget in XAML using Expression Blend 3

No.of Views940
Bookmarked0 times
Downloads 
Votes0
By  dpatra   On  16 Feb 2010 00:02:00
Tag : Silver Light and XAML , How to
RSS Feed Widget in XAML using Expression Blend 3
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 

Introduction


This is a new widget of my recent posts in codegain.com. This widget is called RSS Feed Widget. The basic functionality of this widget is to display the Links when the RSS Feed is provided. The following figure will describe you everything.

Image Loading...

Figure 1.1 RSS Feed Widget

Steps

To begin with we need the following requirements:
1. Silverlight 3
2. Visual Studio 2008 SP1
3. Expression Blend 3

Creating a Silverlight Project with or without RIA enabled.

1. Create project in Visual Studio and open the solution in Expression Blend 3.
2. The following figure will guide you for that.

Image Loading...

Figure 1.2 Create a new Silverlight project

Iamge loading...

Figure 1.3 Uncheck the bottom checkbox to create the project without RIA support


Designing the User Control in Expression Blend 3


The User Control we are going to make should contain a background which matches a RSS Feed. I am taking a simple .png file which is looking simple.

Imaeg loading...

Figure 1.4 RSS Feed Background.

Now our task is to add textbox, datagrid and image to fulfill our requirement. The following figure describes the design of the grid.

Image loadingImage laoding..

Figure 1.5 Designing the grid and placing the required controls.

The XAML will look like the following after all the design changes above.

{codecitation class="brush: xml; gutter: true;" width="650px"}

<Grid x:Name="LayoutRoot" Width="280" Height="280">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.043*"/>
<ColumnDefinition Width="0.614*"/>
<ColumnDefinition Width="0.114*"/>
<ColumnDefinition Width="0.043*"/>
<ColumnDefinition Width="0.186*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.086*"/>
<RowDefinition Height="0.057*"/>
<RowDefinition Height="0.086*"/>
<RowDefinition Height="0.045*"/>
<RowDefinition Height="0.64*"/>
<RowDefinition Height="0.086*"/>
</Grid.RowDefinitions>
<Canvas Grid.ColumnSpan="5" Grid.RowSpan="6">
<Image Source="image/rss.png" Width="270" Height="270" Canvas.Left="5" Canvas.Top="5"/>

</Canvas>
<Image x:Name="btnFetch" Source="image/rssButton.png" Grid.Column="2" Grid.Row="2" MouseLeftButtonDown="btnFetch_MouseLeftButtonDown" ToolTipService.ToolTip="Click To get all RSS Feeds" Curser="Hand" />
<TextBlock HorizontalAlignment="Center" Grid.Column="1" Grid.Row="1" Text="Enter RSS Feed URL" TextWrapping="NoWrap"/>
<TextBox x:Name="txtFeedLoc" Grid.Column="1" Grid.Row="2" Height="20" FontSize="9" Text="" TextWrapping="NoWrap" Margin="0,2,0,2" ToolTipService.ToolTip="Copy and Paste the URL of the RSS feed"/>

<data:DataGrid x:Name="dGrid" Grid.Column="1" Grid.Row="4" AutoGenerateColumns="False"
IsReadOnly="True" CanUserSortColumns="True" AlternatingRowBackground="{x:Null}" Background="{x:Null}" Grid.ColumnSpan="3"
HeadersVisibility="Column" GridLinesVisibility="Horizontal"
FontSize="10" FontWeight="Normal" BorderBrush="{x:Null}">
<data:DataGrid.Columns>
<data:DataGridTemplateColumn IsReadOnly="True">
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel>
<HyperlinkButton Foreground="Black" Content="{Binding Path=Title}" NavigateUri="{Binding Path=NavURL}" TargetName="_blank"/>
</StackPanel>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
</data:DataGrid.Columns>
</data:DataGrid>
<TextBlock x:Name="lblError" FontSize="8" Foreground="Red" Grid.Column="1" Grid.Row="3" Text="" HorizontalAlignment="Center" TextWrapping="Wrap"/>
</Grid>

{/codecitation}

Getting RSS Feed from a particular RSS URI


For now we are collecting the rss feed URIs and pasting into our RSS Feed textbox, but in further enhancement we are planning to make use of the concept of caching. The following code is for a basic rss feed getter.


{codecitation class="brush: csharp; gutter: true;" width="650px"}

namespace RSSFeedSilverlightWidget
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
protected void LoadRSS(Uri uriFeed)
{
WebClient wc = new WebClient();

wc.DownloadStringCompleted += new DownloadStringCompletedEventHandler(wc_DownloadStringCompleted);
wc.DownloadStringAsync(uriFeed);
}

void wc_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Error != null)
{
lblError.Text = "*URL has no Authentication";
return;
}

lblError.Text = "";
string xml = e.Result;
if (xml.Length == 0)
return;
StringReader stringReader = new StringReader(xml);
XmlReader reader = XmlReader.Create(stringReader);
List<SyndicationItem> feedItems = new List<SyndicationItem>();
SyndicationFeed feed = SyndicationFeed.Load(reader);
foreach (SyndicationItem feedItem in feed.Items)
{
feedItems.Add(feedItem);
}
var posts = from item in feedItems
select new RSSFeed()
{
Title = item.Title.Text,
NavURL = item.Links[0].Uri.AbsoluteUri,
Description = item.Summary.Text
};
dGrid.ItemsSource = posts;
dGrid.Visibility = Visibility.Visible;
}

private void txtFeedLoc_GotFocus(object sender, RoutedEventArgs e)
{
lblError.Text = string.Empty;
}

#region Requesting for RSS Feed
private void btnFetch_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
Uri feedUri;
Uri.TryCreate(txtFeedLoc.Text, UriKind.Absolute, out feedUri);

#region URI Validations
if (feedUri == null)
{
if (txtFeedLoc.Text == "")
{
lblError.Text = "*URL Field should not empty";
}
else
{
lblError.Text = "*Invalid RSS feed URL";
}
return;
}
#endregion

LoadRSS(feedUri);
}
#endregion

}

#region RSS Feeds class
public class RSSFeed
{
public string Title { get; set; }
public string NavURL { get; set; }
public string Description { get; set; }
}
#endregion

}


{/codecitation}

Enjoy the RSS Feed Widget, hope you like it.
Thank you


About the Author


Diptimaya Patra

Description :I am a Master in Computer Application (MCA) from SRM University, Chennai. I am MCTS in ASP.Net Web Development, and MOSS 2007 Administration. I have extreme exposure to Microsoft Technologies in recent times like Silverlight 2, Silverlight 3. I am from Cuttack, Orissa. You can reach me using this mail (diptimaya.patra@gmail.com). Currently I am working as a Software Engineer in UST Global Inc in Trivandrum Center.

Occupation :Software Engineer
Company : UST Global.
Location : India
Follow me at twitter : http://twitter.com/dpatra


 
Sign Up to vote for this article
 
About Author
 
dpatra
Occupation-Not Provided
Company-Not Provided
Member Type-Expert
Location-Not Provided
Joined date-13 Jul 2009
Home Page-Not Provided
Blog Page-Not Provided
 
 
Other popularSectionarticles
Comments
There is no comments for this articles.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top