- Posted by christhi on March 25, 2010
Microsoft User Experience Kit launched today at SXSW
Today at SXSW, of which Microsoft Silverlight is a major sponsor of the Interactive Festival, Microsoft User Experience Kit is targeted at technical and creative leads who want to better understand the tools, technologies, and scenarios that span Microsoft’s User Experience ecosystem. Key topics range from “Building Immersive Multi-channel Solutions using Expression Studio” to “High fidelity and high Performing Desktop Touch Applications using Windows 7” to “Web Branding and Audience Targeting using SharePoint”. The kit’s contents can be browsed online and/or downloaded for offline use. It includes videos, presentations, sample code, and much more. Get the kit at http://uxkit.cloudapp.net!
The UX Kit is unique because while many technology-specific repositories exist, this is the first kit that helps “map” the Microsoft ecosystem, technology, and tools stack to that of the user experience, agency, and creative world.
Included in the UX Kit is a range of collateral and resources including: videos, reference implementations, sample code, live demos, installable tools, presentations, whitepapers and more. Featured technologies include Silverlight, Windows Presentation Foundation, Windows 7 Touch, Microsoft Surface, Windows Phone, SharePoint, Expression Studio, and Microsoft Advertising. Topics covered on the kit range from Rich Media Delivery using Silverlight and Deep Zoom to Multi-Channel Digital Marketing using Windows 7, SharePoint, Windows Phone, and Surface.
·
FAQ
Why another kit? There are many technology specific repositories but nothing that helps “map” the Microsoft ecosystem, technology, and tools stack to that of the user experience, agency, and creative world.
What is in the kit? Collateral such as videos, reference implementations, sample code, live demos, installable tools, presentations, whitepapers and more.
What technologies and tools are featured? Silverlight, Windows Presentation Foundation, Windows 7 Touch, Microsoft Surface, Windows Phone, SharePoint, Expression Studio, and Microsoft Advertising to name a few.
What topics are covered? Topics range from Rich Media Delivery using Silverlight and Deep Zoom to Multi-Channel Digital Marketing using Windows 7, SharePoint, Windows Phone, and Surface.
How do I “get the kit”? By following the link here! The kit’s browser is fully written in Silverlight and hosted on Microsoft Azure.
When can I “get the kit”? The Microsoft User Experience Kit will be launched on March 15th at South by Southwest in Austin and go live right here. – http://uxkit.cloudapp.net
- Posted by christhi on November 25, 2008
Creating a Simple Line of Business Application in SilverLight 2.0
RSS Feed Reader using the DataGrid and Calendar Controls
In this tutorial we will create an animated RSS Reader in SilverLight using a combination of Visual Studio .NET 2008 SP1 and Expression Blend SP1. Building an RSS reader in WPF is well documented in the Blend 2 Help so I wanted to provide a complimentary example using SilverLight 2. I also wanted to feature two advanced controls in SilverLight 2 that you can leverage in your LOB applications; the DataGrid and the Calendar. In future tutorials I will provide samles featuring the new controls provided in the recently released SilverLight toolkit such as the new charting controls (www.codeplex.com/silverlight). If you don’t have a copy of Visual Studio or Blend you can download an evaluation from our web community site at http://www.microsoft.com/web. This tutorial assumes some level of .NET programming experience. In a coming blog entry I will give this sample a significant facelift as this one <um> looks like a programmer designed it. 
The full sample can be downloaded here --> http://code.msdn.microsoft.com/flyover18/Release/ProjectReleases.aspx?ReleaseId=1682
Other items you will need for this tutorial include the following:
Visual Studio 2008 SP1 http://www.microsoft.com/downloads/details.aspx?FamilyId=FBEE1648-7106-44A7-9649-6D9F6D58056E&displaylang=en.
.NET 3.5 SP1 http://www.microsoft.com/downloads/details.aspx?familyid=AB99342F-5D1A-413D-8319-81DA479AB0D7&displaylang=en.
Expression Blend SP1s now give you the ability to create SilverLight 2 applications in Blend and can be downloaded from http://www.microsoft.com/downloads/details.aspx?FamilyId=EB9B5C48-BA2B-4C39-A1C3-135C60BBBE66&displaylang=en.
SilverLight Tools for Visual Studio .NET 2008 SP1 http://www.microsoft.com/downloads/details.aspx?FamilyId=c22d6a7b-546f-4407-8ef6-d60c8ee221ed&displaylang=en.
1. First create a new SilverLight Application. Select "File/New Project" from Visual Studio (you can start from Blend but we are going to start from Visual Studio in this walkthrough. I’m using C# in this tutorial but VB.NET can also be used. Select the “SilverLight Application” template and call it something like “RSSReader”. Select “Add a new ASP.NET web project and keep the remaining defaults. This will give us a full SilverLight web site template to work from as well as the RSSReader SilverLight control library.
2. Add the following project references to the RSSReader SilverLight project. We will need the Syndication assembly to control parsing of the RSS feed we use in the sample. The other assembly we will need for other objects and controls such as the calendar control.
System.ServiceModel.Syndication
System.Windows.Controls
3. Add the following to the constructor in page.xaml.cs. For the RSS feed I used “http://feeds.reuters.com/reuters/topNews?format=xml”. This snippet uses the WebClient object to communicate with our RSS feed. The remote call to the RSS feed will be an "unblocking" (async) read, firing the event handler rssclient_OpenReadCompleted when complete. Compile the solution (you will need to stub out the handler).
WebClient rssclient = new WebClient();
rssclient.OpenReadCompleted += new OpenReadCompletedEventHandler(rssclient_OpenReadCompleted);
Uri UriFeed = new Uri("enter your favorite RSS feed");
rssclient.OpenReadAsync(UriFeed);
4. Double-click the page.xaml file in the solution explorer (designer should now open) and drag the DataGrid control from the toolbox in between the Grid (<grid></grid>) container (you may need to place a cursor between the grid container first and then drag). Name the DataGrid “feedContent”. Your XAML should look like the following:
<Grid x:Name="LayoutRoot" Background="White">
<data:DataGrid x:Name="feedContent">
</data:DataGrid>
</Grid>
5. Now add the actual handler contents. This code reads the result of the RSS feed request, uses the SyndicationFeed object to parse the XML (in RSS format) and bind it to our datagrid. Don’t forget to add the appropriate namespaces (System.Xml and System.ServiceModel.Syndication). You solution should build and run however the columns will not yet be formatted correctly. You should see something like the following figure 1.
void rssclient_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
XmlReader rssreader = XmlReader.Create(e.Result);
SyndicationFeed feed = SyndicationFeed.Load(rssreader);
this.feedContent.ItemsSource = feed.Items;
}
Figure 1: Initial RSS Reeder without Column Formatting
6. Add the following data column definitions to bind to the SyndicationFeed items data template to your page.xaml file. DataGridTextColumn is one of many element types used to format the DataGrid and provide it with a control template on which to present data. In this case that data comes from our RSS feed and each data binding path e.g. Title.Text is driven by the schema of the SyndicationFeed object.
<data:DataGrid x:Name="feedContent" AutoGenerateColumns="False" Margin="8,8,8,8" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<data:DataGrid.Columns>
<data:DataGridTextColumn Header="Title" Binding="{Binding Path=Title.Text}"/>
<data:DataGridTextColumn Header="Summary" Binding="{Binding Path=Summary.Text}"/>
<data:DataGridTextColumn Header="Publication Date" Binding="{Binding Path=PublishDate}"/>
</data:DataGrid.Columns>
</data:DataGrid>
7. Run the application. The grid should now bind to the feed with only 3 columns and should look like the following:
Figure 2: Initial RSS Reeder with Column Formatting
8. Ok that is it for part 1 and our simple RSS feed example. I wanted to demonstrate one way of data binding to a DataGrid control that was very straight forward. However in order to use the drag and drop data binding features of Blend 2 SP1 and the DataGrid we need to take a slightly different approach altogether. In order to take this approach we need to create what is called an ObservableCollection. There are several tutorials out there on creating ObservableCollections so no use rehashing that subject. Refer to http://msdn.microsoft.com/en-us/library/ms748365.aspx for details.
9. We are going creating our own ObservableCollection that will act a middle layer between our RSS Feed (using the same code we just used above) and our DataGrid. Before you create the collection however we first need to comment out the code you added in the page.xaml.cs code behind including the handler (we will use the following observable collection class code instead to talk to our RSS Feed); we will keep the xaml as is for now. Add two class files to the project one called “FeedItem.cs” and the other called “FeedLibrary.cs” and copy the code listings below into each new class file.
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.ComponentModel;
namespace RSSReader
{
public class FeedItem : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public FeedItem()
{
}
public FeedItem(string title, string summary, DateTime pubDate)
{
this.Title = title;
this.Summary = summary;
this.PubDate = pubDate;
}
private string privateTitle;
public string Title
{
get
{
return privateTitle;
}
set
{
privateTitle = value;
NotifyPropertyChanged("Title");
}
}
private string privateSummary;
public string Summary
{
get
{
return privateSummary;
}
set
{
privateSummary = value;
NotifyPropertyChanged("Summary");
}
}
private DateTime privatePubDate;
public DateTime PubDate
{
get
{
return privatePubDate;
}
set
{
privatePubDate = value;
NotifyPropertyChanged("PubDate");
}
}
private void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
Figure 3: FeedItem.cs code listing
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Xml;
using System.ServiceModel.Syndication;
using System.Collections.Generic;
using System.ComponentModel;
using System.Collections.ObjectModel;
using System.Windows.Browser;
using System.Net;
using System;
namespace RSSReader
{
public class FeedLibrary : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public FeedLibrary()
{
// if internet connection use -->
PrivateURIFeed = http://feeds.reuters.com/reuters/topNews?format=xml";
PrivateFeedItems = new ObservableCollection<FeedItem>();
if (HtmlPage.IsEnabled == false)
{
GenerateDummyData();
}
}
public void GenerateDummyData()
{
FeedItems = new ObservableCollection<FeedItem>();
FeedItem newFeedItem = new FeedItem("Feed Title 1", "Feed Summary 1", new DateTime());
FeedItems.Add(newFeedItem);
FeedItems.Add(new FeedItem("Feed Title 2", "Feed Summary 2", new DateTime()));
FeedItems.Add(new FeedItem("Feed Title 3", "Feed Summary 3", new DateTime()));
FeedItems.Add(new FeedItem("Feed Title 4", "Feed Summary 4", new DateTime()));
}
private string PrivateURIFeed;
public string URIFeed
{
get { return PrivateURIFeed; }
set
{
PrivateURIFeed = value;
PrivateFeedItems.Clear();
GetData();
NotifyPropertyChanged("URIFeed");
}
}
private bool PrivateDataAvailable;
public bool DataAvailable
{
get { return PrivateDataAvailable; }
set
{
PrivateDataAvailable = value;
NotifyPropertyChanged("DataAvailable");
}
}
private ObservableCollection<FeedItem> PrivateFeedItems;
public ObservableCollection<FeedItem> FeedItems
{
get
{
if (PrivateFeedItems.Count < 1)
{
GetData();
}
return PrivateFeedItems;
}
set
{
PrivateFeedItems = value;
NotifyPropertyChanged("FeedItems");
}
}
public void GetData()
{
DataAvailable = false;
WebClient client = new WebClient();
Uri uri = new Uri(URIFeed);
client.OpenReadCompleted += new OpenReadCompletedEventHandler(client_OpenReadCompleted);
client.OpenReadAsync(uri);
}
void client_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
if (PrivateFeedItems.Count < 1)
{
XmlReader r = XmlReader.Create(e.Result);
SyndicationFeed feed = SyndicationFeed.Load(r);
foreach (SyndicationItem item in feed.Items)
{
FeedItems.Add(new FeedItem(item.Title.Text, String.Format("{0} ...", item.Summary.Text.Substring(0, 15)), item.PublishDate.DateTime));
}
DataAvailable = true;
NotifyPropertyChanged("FeedItems");
}
}
private void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
Figure 4: FeedLibrary.cs code listing
10. FeedItem.cs above represents our individual feed item for the RSS feed we point to. There will be one FeedItem instance for each item in the RSS Feed we use in the collection (one tiem per row in the datagrid). The collection (and in this case one that is Observable is contained by the FeedLibrary class. This class also represents our datasource and we will be binding it directly to your DataGrid; only this time using Blend and the designer. The FeedItem class is a simple entity class where each time a property is set we will fire a event back to its container. The FeedLibrary acts in the same manner only in this case it also calls “GetData()” every time the FeedItems property is retrieved. The GetData method code should look very familiar as it is nearly the identical code we used in steps 1-6 which actually retrieves the data. FeedItems will be retrieved as soon as we are bound to the DataGrid at runtime and thus call GetData appropriately. At design time, however, we will generate dummy data so we can get a preview of what the data will look like at runtime. This is accomplished using the following constructor code and leverage the HTMLPage class to determine whether we are running in a web page or in the designer:
public FeedLibrary()
{
// if internet connection use -->
PrivateURIFeed = http://feeds.reuters.com/reuters/topNews?format=xml";
PrivateFeedItems = new ObservableCollection<FeedItem>();
if (HtmlPage.IsEnabled == false)
{
GenerateDummyData();
}
}
11. We are almost ready to re-run the application. But first we need to wire up the collection to our DataGrid again but this time we will use Blend.
12. Open solution from Blend 2 SP1, open the page.xaml, and make the grid wider (about double). Feel free to add a color background and do whatever formatting you want. Optionally remove the width and height properties and value from the user control to make the background fill the browser window. Create one row in the grid container just enough to fit a textbox (this will be the top row and will be used for the RSS input). Drag the DataGrid to the second row and align as needed.
13. Add a textblock control above the DataGrid in the first row of the grid container and label it “RSS Feed”
14. Add a textbox control to the right of the textblock and name it “rssInput”
15. Your RSS Reader should look something like this in Blend
Figure 5: RSSReader in Blend 2 SP1 – Prior to Databinding
16. Now we are ready to bind data. To add the FeedLibrary as a data source, go to the "Data" tab in Blend below the "Project" tab and click “add CLR object” and select "FeedLibrary" from the choices of objects. FeedLibrary should now appear in Data tab. Expand FeedLibrary and drag the FeedItems collection over to the DataGrid in the designer. When prompted bind it to the DataGrid using the "ItemsSource" property. This is the way to bind the ObservableCollection we created earlier to the DataGrid using the same property we use in steps 1-6 only using the designer. Now drag the URIFeed property from the FeedLibrary over to the TextBox (rssInput), and when prompted, bind it to the "Text" property. This binds whatever we enter into the RSS input box so that we can set/get that property accordingly. Change the DataGridTextColumn definitions to the following (dummy data should show in the designer after changing). Notice we changed the binding path below in the DataGridTextColumn defs. This is because we are binding to the FeedItem class and its properties through the FeedLibrary and no longer binding directly to the SyndicationFeed class as we did in steps 1-6. Title, Summary, and PubData are all properties in FeedItem.cs.
<data:DataGridTextColumn Header="Title" Binding="{Binding Path=Title}"/>
<data:DataGridTextColumn Header="Summary" Binding="{Binding Path=Summary}"/>
<data:DataGridTextColumn Header="Publication Date" Binding="{Binding Path=PubDate}"/>
17. Build and Run the solution from Blend (if you get a blank page make sure your startup page is not set to default.aspx but the startup page containing the SilverLight control). The result should look something like the following:
Figure 7: RSS Reader with binding set from Blend
Close down the browser and return to Blend. Select the TextBox control in the designer and go the properties tab and select events. Double-click on the KeyDown event. Visual Studio should open up setting the cursor the event handler for KeyDown. If not, find that event handler in page.xaml.cs. Add a data member to the page class such as:
public FeedLibrary feedLib; // add to page class
and add the following code to the constructor. This will grab the data source member that Blend added for us when we dragged FeedLibrary over allowing us to update the URI on key down event (in this case the enter key). We could optionally call “GetData” in our collection but I’m giving you the explicit way of doing this as an option.
feedLib = ((FeedLibrary)this.Resources["FeedLibraryDS"]); // add to constructor
18. Now add the following to the Key Down event, checking if the enter key was hit and if so updating the URIFeed property. Once updated, this property will notify the DataGrid to update itself with the new RSS feed ala the ObservableCollection. That is one of the benefits of using the collection. Once that event is wired up run and test using another RSS feed URL. Note: The RSS Feed on the server MUST allow anonymous access either through a cross domain policy file using SilverLight's format or a Flash policy file. Refer to http://msdn.microsoft.com/en-us/library/cc645032(VS.95).aspx for details.
private void rssInput_KeyDown(object sender, KeyEventArgs e)
{
if (e.Key == Key.Enter)
feedLib.URIFeed = this.rssInput.Text;
}
19. OPTIONAL STEP: We added the KeyDown event to the TextBox to denote we changed the RSS Feed. We can also add a button to the right of the textbox used to activate the RSS feed change. To spruce up the button I chose to edit the button template. Right click and edit a copy of the template. Delete everything but the last button frame. Drag button left and right until button is a square instead of a rectangle. I added an rss button image to the project and drug over to the center of button. The image should be centered in the button frame.
To give it a hover effect, in the Visual State Manager click on the mouseover event and change the size of the image a bit. Click on the button pressed state and change opacity to 20% and make the image the same size of what you made it in the mouseover event. The affects are up to you so this is only one option. Go back to page.xaml in the designer and realign the button so it looks good. Select the button and select the projects tab and click on the events button. Double click on the “click” event and add the following in VStudio:
private void Button_Click(object sender, RoutedEventArgs e)
{
feedLib.URIFeed = this.rssInput.Text;
}
Run the application – you should be able to change the RSS Feed with the animate button now. Click the button (to see the effects) and the grid should change to the new RSS feed.
20. Now we are ready to add our second advanced control; the calendar control. The calendar will be used to show the date of the feed item as each item is selected in the DataGrid. In my animation I choose to have the calendar fly out from nowhere each time I select a row. You can add any animation you want. I use a fly-out animation by initially making the calendar opacity set to zero and fading the calendar into focus making it appear its normal size in about 2/3 of a second. Place a calendar control (from the asset library) on the DataGrid somewhere near the second column. Create and name a storyboard “ShowCalendar”. Test out your animation by scrubbing the timeline.
21. Select the DataGrid and select events from the properties tab. Double click the "SelectionChanged" event and add the following in Visual Studio.
private void feedContent_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (feedContent.SelectedIndex != -1)
{
this.ShowCalendar.Begin();
this.calendar.SelectedDate = feedLib.FeedItems[this.feedContent.SelectedIndex].PubDate;
}
}
and that's it -- an anminate RSS Reader you can now spruce up using the goodness of SilverLight.
Figure 8: Final RSS Reader with Calendar
Figure 9: Final RSS Reader (formatted)