- 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 December 16, 2008
MS Live Labs Releases Seadragon Mobile iPhone app
There are have been rumors of us creating solutions for the iPhone and I've had many folks approach me with questions of its validity. I think this is a great move for us and in no way invalidates the importance of the Windows Mobile platform. "Playing nicely" with other platforms is something we are doing very well as of late and this is, in my opinion, aonther giant step in that direction!
To summarize, Microsoft Live Labs released a demonstration of Seadragon Mobile, http://livelabs.com/seadragon-mobile for its first mobile platform, the iPhone, on Saturday Dec 13. For background, Microsoft Live Labs has been experimenting with Seadragon technology on different platforms to validate the experience for as broad an audience as possible. This technology is an experiment from Live Labs, and in the future the group intends to bring it to Windows Mobile as well. Seadragon is a way to see incredible detail from graphics and photos, regardless of the size of the screen, size of the file, or bandwidth of the network. At the core of its mission, Microsoft Live Labs is an applied research organization which advances the state of the art of Internet technologies and enables new scenarios for users. Bringing Seadragon technology to other platforms including Photosynth, Deep Zoom in Silverlight, Microsoft Surface, the recent release of Seadragon Ajax http://livelabs.com/seadragon-ajax/, and now the Seadragon Mobile viewer for the iPhone, are examples of Live Labs delivering on its mission and continuing to release and test the validity of its experiments with end users to collect feedback on the models and influence the next generation of Microsoft products and services.
While the Seadragon Deep Zoom technology used in Live Labs’ application for the iPhone has the same technological roots as Silverlight Deep Zoom, Silverlight Deep Zoom was not used for the Seadragon application for the iPhone. There is yet no comment on whether SilveLight will or will not be ported to the iPhone at this point.
FAQ
What is Seadragon Mobile? Seadragon Mobile is an experiment from Microsoft Live Labs in bringing Deep Zoom imagery to new platforms. Deep Zoom imagery is a way to see incredible detail from graphics and photos, no matter the size of the screen or size of the file—a multi-gigabyte image would display just as fast as one taken with a camera phone.
What specifically can end users do with the Seadragon Mobile viewer on the iPhone? The Seadragon Mobile iPhone app is a demonstration which will allow end users to view a collection of approximately 50 sample images using Seadragon technology zooming capabilities as well as view Photosynth collections in 2D on their iPhone.
Why is Microsoft Live Labs developing for the iPhone? As part of the Microsoft Live Labs core mission, we aim to test the validity of new technologies and models with end users. We have been experimenting with Seadragon for some time now on a variety of different platforms and have already developed versions for the PC, and for Microsoft Surface. The iPhone is just one of many platforms we are experimenting with to deliver the power of Seadragon technology to as many people as possible.
Why isn’t Microsoft Live Labs developing Seadragon Mobile apps for Windows Mobile? The Seadragon Mobile iPhone app is a demonstration from Live Labs, and the technology requires the GPU processors supported by the iPhone. This release is meant to be an experiment on Seadragon’s first mobile platform and does not mean Microsoft intends to productize this specific experiment. Since initial prototyping of GPU on the iPhone, Windows Mobile has brought popular phones to market with GPU such as the HTC Diamond. GPUs on the HTC phones represent continual innovation in the Windows Mobile space by our OEM partners. Similar to other Live Labs experiments and to demonstrate the validity of the technology on mobile platforms, in the future, Live Labs intends to bring Seadragon technology to Windows Mobile. As we’ve seen in the past, Live Labs has developed other technologies for Windows Mobile including Deepfish, a mobile browsing experience.
How do you compare Seadragon Mobile to other technologies available such as Apple’s ZUI in the iPhone or their Opera Mini browser; the zoom technology for phone interface Zumobi? Seadragon Mobile is a zooming interface which essentially solves the problem of searching and scrolling through reams of information on the Web by fluidly moving through large amounts of data as fast as possible. In contrast, other domain-specific applications and Web browsers aren’t optimized for displaying large images over slow connection or allowing for quick and intuitive manipulation that the Seadragon Mobile experience delivers.
Does this mean that Microsoft Live Labs will continue to look for ways to develop apps for the iPhone in the future? Live Labs has no commitments at this time to develop future iPhone apps. For this specific iPhone app release, bringing Seadragon technology to a variety of other platforms including Photosynth, Deep Zoom in Silverlight, Microsoft Surface, the recent release of Seadragon Ajax http://livelabs.com/seadragon-ajax/, and now the Seadragon Mobile viewer for the iPhone, are examples of Live Labs continuing to release and test the validity of experiments and demonstrations with end users to collect feedback on the models and influence the next generation of Microsoft products and services.
How can I get Seadragon Mobile? You can install Seadragon Mobile two ways, either by accessing the App Store on the iPhone or on your computer through iTunes at http://www.itunes.com/app/seadragonmobile.
Does Microsoft’s efforts to build an application for the iPhone over Windows Mobile mean the company does not believe in future success of the platform?
We’re very excited about where we’re at today; several anticipated Windows Mobile phones hit the market in Q3 and Q4, including the Sony Ericsson Xperia X1 and Samsung Omnia, and we expect them to drive strong sales across the holiday season and into 2009.
Windows Mobile has launched 30 new phones this year alone from different handset makers, mobile operators featuring various form factors, including the Samsung BlackJack II, HTC Touch Diamond, and Palm Treo 800w.
Live Labs is a research organization that has always experimented on multiple platforms. Their offering for a competitor to Microsoft does not represent a shift in their strategy or the company’s.
- Posted by christhi on December 1, 2008
In the coming months I will be blogging about how one can incorporate ALM or Application Lifecycle Management practices to world of User Experience design and development. Until now there really has not been a windfall of material on this topic so I thought I would address it a bit given the fact I just spent the past year completely focused in this world. I will also be speaking about it at Mix 2009 in Vegas alongside Chris Bernard so I hope you will join us (http://2009.visitmix.com) in person or online.
ALM means different things to different people so I will be addressing UX and ALM from several angles, from human process implementation to workflow to its manifestations in tooling. ALM's benefits are just becoming clear as the tools mature alongside that of software engineering practices. With UX becoming so important in software development we have now reached an empass where we must also include those processes specfically geared towards producing better user experiences into the overall lifecycle. Afterall, UX is as important as implementing and testing the software itself.
For my first passage in this series, I am briefly introducing a solution to one of the reasons ALM has not been as accessible in the UX world: change management or at its most basic level source control. Although Visual Studio and its IDE extensions have allowed almost any third party source control software to play nicely in the interface what has been missing is source control for Microsoft's UX tools. Not until Expression version 3.0 will source control extensions be added to Expression Studio and thus the general concensus has been to either only use Visual Studio or use something like the Team Foundation Server Explorer as a stand alone tool to get your SilverLight solutions into the source control repository. SilverLight and WPF designers and developers had to first launch TFS explorer or go to VStudio if they wanted to check-in any source or do any form of "work item management" or "task/bug management". Well I have good news! Now with the updated release of the TFS 2008 Power Tools for October you can now get source control and work item access straight from Expression Studio. In fact any common dialog provides the context menu to do so! The new power tool provides a windows shell extension that will allow to you check-in/check-out and even manage work items right from common dialogs and ergo right from Expression Blend itself for example.
To download the power tools simply go to: http://msdn.microsoft.com/en-us/tfs2008/bb980963.aspx - NOTE: make sure and select custom install and select the shell extension otherwise it won't get installed and you won't see the following context menu from Expression Studio. Enjoy. Later I will go into more detail on how this can be leveraged in your day to day UX design and development activities. UX can now take a front seat in the world of ALM!!
- 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)