Creating the Mobile Application
In our previous installments we created this out of browser Silverlight application..
In our previous installments we created this out of browser Silverlight application (as before you can right click to install it locally to your start menu, though it requires internet access to do it’s magic.
Creating the Windows Phone 7 Project in Expression Blend for Windows Phone..
If you don’t have this tool it’s a free download with the Windows Phone Tools Developer beta which you can download today..
Let’s open Expression Blend 4 for Windows Phone beta (yes it’s free right now for the download).. And let’s make this smaill viewer application..
I am going to choose File –> New Project –>
from the pop open dialog I select Windows Phone as my project type and the simple Windows Phone Application. We don’t need much else to be effective here. The “databound” application goes into views and view controllers since we are only using one page or one view the app may provide..
Keeping things from getting mixed up.. I am going to name my project/application ArticleViewerApp so I differentiate from the original Silverlight version which I called just ArticleViewer..
The first thing I am going to do is add an existing item to my project, a background like the one in our application above..
After adding the asset to my project, I can hover over it with my mouse to see a preview..
Now I am going to click once on it to make it selected and temporarily drop it over to the right directly on the design surface at the moment it doesn’t matter where, because we are going to make it an imagebrush resource then delete the image from the design surface.
next to make it the imagebrush (with the image still SELECTED), go up to the tools menu and select Make Brush Resource –> Make ImageBrushResource
Now we can just select the image we dropped and hit the delete key to remove it..
However what we did hasn’t gone unnoticed by blend..
We can now name our new ImageBrush I am calling it BackgroundImageBrush. If you notice it also let’s you define the scope of the resource.. You can define it as application wide (meaning it is available everywhere), or in the current page only, or a separate resource dictionary file that you can create that is portable between projects. If you have a corporate style guide and color scheme you may want to keep all of this in it’s own resource dictionary so you can port it between applications keeping the same style and consistency.
For now I am making the background available to the entire application globally. This will be stored in a file called “app.xaml”.
Check to see the resource is available
If we go to the right tools pane and select the Resources tab.. you will notice we have copied it to an imagebrush that is embedded in the project that we can we can paint on any control in the project including our page’s LayoutRoot.
Immediately if we expand the drop down on the resource we have just created you will see a lot of different options for placement and fills etc..
Now that we have our background image as a resource, let’s let it fill in the background of our layout control so it will look something like our previous application..
To do this I next select our GRID LayoutRoot from the objects and timelines tab on the left side..
I then switch over to the right side to the Properties tab..
I click on the advance options white divot to allow us to change the background brush to our new BackgroundImageBrush
after selecting this our background will be mapped to this brush for our grid layout control..
Of course not all colors work, the application name and title needs to be changed so I will individually select these TextBox elements on the design surface and then set their property values to match the color of the text in our previous application
(R: 90 G:15 B: 200)- Normally I’d create my own global resource dictionary and assign these resources globally but not for this demonstration.
I will rename the text to support the application name of the previous application.. I do this by editing the Text properties box on the property tab on the right of the design surface for each of the textboxes individually.. Or I can just click into the design surface and edit right there which is most easy..
Adding our Article List
Next we need to add our list of article from our RSS feed. To do this we need to add in a ListBox control.. There are a number of ways to do this, we could drag and drop it directly from our controls toolbox right onto the design surface, but I always prefer to let Blend do most of the work for me.. It’s also a time saver.. Here’s what we are after, but how do we get from there to here?
USING SAMPLE DATA SOURCES WITH Expression Blend
1: private void MainPage_Loaded(object sender, RoutedEventArgs e)
2: {
3: RSSUrl = new Uri("http://feeds.feedburner.com/d4dotnet");
4: GetRSSFeed();
5: }
6:
7: private void GetRSSFeed()
8: {
9: WebClient client = new WebClient();
10: client.DownloadStringAsync(RSSUrl);
11: client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted);
12: }
13:
14: private void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
15: {
16: reader = XmlReader.Create(new StringReader(e.Result));
17: feed = SyndicationFeed.Load(reader);
18:
19: foreach (SyndicationItem item in feed.Items)
20: {
21: HyperlinkButton link = new HyperlinkButton();
22: link.Content = item.Title.Text;
23: link.NavigateUri = item.Links.First().Uri;
24: link.TargetName = "_blank";
25: LinkList.Children.Add(link);
26: }
27: }
28: #endregion
In the previous example we created the RSS data source in code, and we could probably do that here in Expression Blend for Windows Phone the same way (there would be a few minor differences because Windows Phone does not have access to the same System.ServiceModel.Syndication library of functions from the .NET code library..
However it’s safe to say that it would work essentially the same way as we worked before in that you’d be using a WebClient call to download the RSS file before processing it with the system.xml library calls..
There is an easier way though and this one doesn’t require any code thanks to Expression Blend for Phone’s Sample Data..
First we go to the right pane and create an XML based Sample Data Source by clicking on the highlighted in yellow ICON and selecting Import Sample Data from XML.
Unlike code we can actually just enter the URL to the RSS data source directly here..
a dialog will pop-up where we can enter the feed information directly..
Notice that I have entered this here and defined the scope of the data to be available project wide not just in the “Page” we are currently inside of.. Next I click “OK”..
For my trouble Blend has now created a sample XML data source and parsed properly all of the elements and data items in the source as it currently stands..
The two elements I am going to be concerned with the most here are the article title and the link portion.. What is that yellow square doing around your data source picture, when it’s not in mine ? We’ll show you in a moment..
Databinding Tour of the RSS DataSource
There are currently two ways to bind data from this source through drag and drop and they can be switched through the two small icons at the top of the data tab that I have highlighted in yellow..
one creates a container control such as a ListBox around any element or elements that you drag onto the design surface, The second one let’s you bind individual elements to individual controls that you may have already place on your design surface or need to create like a TextBlock..
For our case tonight we will make sure the first icon is selected, so we can put all of our content, in this case the “title” elements of the articles from the RSS feed.
Next from out data source we click on the title from the RSS Sample data source and drag and drop it on the design surface. After we have done so you will start to see all the article titles from RSS feed appear in a ListBox where we dropped it onto the design surface..
We can now see the titles appear in the listbox. They are just textblocks inside the listbox item template at he moment. We are about to edit the ListBox template to make them HyperlinkButtons that we can use to navigate back to the original articles using our webview/web browser..
Next we need to edit the contents of the TextBox.. Most controls either have a single TEXT property or in the case where the control is a container that can contain multiple items such as a list, the control will have a content property will accept one property like the TEXT property does or a TEMPLATE for multiple properties and multiple items. So we need to go in and edit the TEMPLATE that Blend created for us when it made us the ListBox..
First we select the list box on the objects and timelines pad or from the design surface directly. When we do this a bread crumb drop down menu will appear telling us we selected the ListBox.
Next we need to select Edit Additional Templates > Edit Generated Items(ItemTemplate) > Edit Current
When we start editing we have to be careful as you are working with not a copy but exactly what we are seeing..
after this is selected you’ll see a change in the ListBox…
The item template will be editable.. We are actually editing the template for each and every item in the ListBox at that moment. since Blend gave us a TextBlock control we want to change this to a HyperlinkButton control. We can just simply now hit the delete key to remove the TextBlock,
Next Drag the HyperlinkButton control onto the template (Tip: check your breadcrumb at the top to still make sure you are inside the template or this won’t work). Next from the RSS DataSource drag the link element onto the ListBox template’s HyperlinkButton to set up the databinding to the text property.
Now click on the top-level "ListBox” breadcrumb at the top to back out of the template editing. You’ll also see now the ListBox now has a HyperlinkButton inside of it on the breadcrumb menu. It’s also a good idea now to save your work..
We now have set up our binding to the title. Next we set up our binding to the LINK from the RSS feed.. If the text binding was done correctly you should be able to access it from the properties tab under the binding’s advanced options divot.. From the breadcrum menu first click on the HyperlinkButton menu crumb to select it, it will turn white.
Next look over on the properties tab.. under Common Properties you will notice a yellow circle around the content property and the little yellow advanced options binding divot.
Click on the yellow divot.. Next select Databinding from the context menu that pops up.
The databinding screen will appear.. You will notice that the “title” rss feed element is connected and bound to the HyperlinkButton element.
If it looks like this (note title is highlighted in white) you are all set with this binding.. You just have one left the link itself..
If it looks okay, click “ok” or “cancel”
We’ll now go to the hyperlink part which will navigate us to the single content item itself.
Under the properties tab under common properties with us still inside the ListBox template item template click on the divot square under NavigateURI (advanced options) so we can create a databinding for the navigation for our HyperlinkButton as well. Select Databinding from the pop-up context menu for NavigateUri.
Next from the databinding menu we need to set databinding for this..
from the Data Context tab we need to select link.. So NavigateUri binds to the current value (or context) of whatever the value of the LINK RSS data item is.. Next click “OK” and check the two bindings under properties..
Both should have yellow circles around them to indicate they are databound..
Our screen should start looking like this..Notice we have hyperlink buttons and happy databound items..
Next Entry: navigating our Hyperlinks to the web page where the content is located..