Tag: MVVM

Developing a RSS Feed Display in Windows Phone 8

Developing a RSS Feed Display in Windows Phone 8

Pretty much any site that has a blog comes with a RSS feed for free use. To display a RSS feed from a web site in your Windows Phone 8 App is fairly straight forward with the help of the SyndicationItem object in the System.ServiceModel.Syndication dll. Since Windows 8 Apps do not reference this automatically, you’ll likely find it at this location: C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Libraries\Client\System.ServiceModel.Syndication.dll

Once you have the dll referenced you will create a List of of SyndicationItem objects. You can also create a property to bind to the SelectedItem of the LongListSelector. In this property example I am using BindableBase as my ViewModel base class. BindableBase comes with SetProperty to implement INotifyPropertyChanged.

private SyndicationItem _selectedSyndicationItem; public SyndicationItem SelectedSyndicationItem { get { return _selectedSyndicationItem; } set { _selectedSyndicationItem = value; SelectionChanged(); } } private IEnumerable<SyndicationItem> _syndicationItems; public IEnumerable<SyndicationItem> SyndicationItems { get { return _syndicationItems; } set { SetProperty(ref _syndicationItems, value); } }

The rest of the code in my ViewModel handles loading the RSS feed and responding to the SelectedItem binding event. The example here uses the RSS feed from the Colorado Technology Association.

public void LoadRss() { string url = "http://www.coloradotechnology.org/members/blog_rss.asp?id=432063&rss=zGF1zZtI"; try { var request = (HttpWebRequest)WebRequest.Create(new Uri(url)); request.BeginGetResponse(ResponseHandler, request); } catch (Exception exception) { ErrorHandling(exception); } } void ErrorHandling(Exception e) { ProgressVisible = false; ErrorMessage = "An error occured loading the news feed. " + e.Message; ErrorVisible = true; } private void ResponseHandler(IAsyncResult asyncResult) { try { var request = (HttpWebRequest) asyncResult.AsyncState; var response = (HttpWebResponse) request.EndGetResponse(asyncResult); if (response.StatusCode == HttpStatusCode.OK) { var reader = XmlReader.Create(response.GetResponseStream()); var feed = SyndicationFeed.Load(reader); SyndicationItems = feed.Items; ProgressVisible = false; ErrorMessage = string.Empty; ErrorVisible = false; } } catch (Exception exception) { ErrorHandling(exception); } } private void SelectionChanged() { AppSession.RSSUrl = _selectedSyndicationItem.Id; AppSession.RSSTitle = _selectedSyndicationItem.Title.Text; if (NavigationEvent != null) NavigationEvent(this, "/WebArticle.xaml"); }

The remaining implementation is in the xaml, which is shown here:

<LongListSelector ItemsSource="{Binding SyndicationItems}" SelectedItem="{Binding SelectedSyndicationItem,Mode=TwoWay}"> <LongListSelector.ItemTemplate> <DataTemplate> <StackPanel> <TextBlock Text="{Binding Title.Text}" Foreground="Chocolate" FontWeight="Bold" FontSize="20" TextWrapping="Wrap"></TextBlock> <TextBlock Text="{Binding PublishDate}" FontSize="14" Margin="0,5,0,8"></TextBlock> </StackPanel> </DataTemplate> </LongListSelector.ItemTemplate> </LongListSelector>

To see how SelectedItem is implemented as a Dependency Property, you can see my article on that here: http://www.new.surfdew.com/?p=181

Upgrading to LongListSelector

Upgrading to LongListSelector

The Windows Phone 8 SDK officially ships with the LongListSelector control.  Microsoft is encouraging developers to use this control instead of the ListBox.  ListBox is still supported, but the control is not optimized for the phone experience.  Read more about the features of the LongListSelector here: http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/05/23/windows-phone-8-xaml-longlistselector.aspx

It’s fairly easy to upgrade your ListBox references to LongListSelector.  You can simply replace ListBox with phone:LongListSelector in your xaml.  There is one thing that Microsoft messed up on though and that is not making SelectedItem a dependency property.  If you’re using MVVM with TwoWay binding, you’re hosed with this out the box control.  Never fear though, the class can be extended to allow for TwoWay binding.  The following is the full implementation of the custom class:

publicclass LongListSelector : Microsoft.Phone.Controls.LongListSelector { public LongListSelector() { SelectionChanged += LongListSelector_SelectionChanged; } void LongListSelector_SelectionChanged(object sender, SelectionChangedEventArgs e) { SelectedItem =base.SelectedItem; } publicstaticreadonly DependencyProperty SelectedItemProperty = DependencyProperty.Register( SelectedItem, typeof(object), typeof(LongListSelector), new PropertyMetadata(null, OnSelectedItemChanged) ); privatestaticvoid OnSelectedItemChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var selector = (LongListSelector)d; selector.SetSelectedItem(e); } privatevoid SetSelectedItem(DependencyPropertyChangedEventArgs e) { base.SelectedItem = e.NewValue; } publicnewobject SelectedItem { get { return GetValue(SelectedItemProperty); } set { SetValue(SelectedItemProperty, value); } } }

Windows 8 Phone Databinding

Windows 8 Phone Databinding

I recently began developing an Windows 8 Phone App.  I’m developing the app with Xaml and C#, using the MVVM development pattern.  I came across a pretty cool class that implements INotifyPropertyChanged that’s built for the .NET 4.5 Framework.  The class is simply called BindableBase, and I’m really liking it so far. The class is implemented as follows:

using System; using System.ComponentModel; using System.Runtime.CompilerServices; using System.Windows; namespace MVVM { /// &<summary&> /// Implementation of &<see cref=&quot;INotifyPropertyChanged&quot;/&> to simplify models. /// &</summary&> [Windows.Foundation.Metadata.WebHostHidden] publicabstractclass BindableBase : INotifyPropertyChanged { publicevent PropertyChangedEventHandler PropertyChanged; protectedbool SetProperty<T>(ref T storage, T value, [CallerMemberName] String propertyName =null) { if (object.Equals(storage, value)) returnfalse; storage = value; this.OnPropertyChanged(propertyName); returntrue; } protectedvoid OnPropertyChanged([CallerMemberName] string propertyName =null) { var eventHandler =this.PropertyChanged; if (eventHandler !=null) { if (Deployment.Current.Dispatcher.CheckAccess()) { eventHandler(this, new PropertyChangedEventArgs(propertyName)); } else { Deployment.Current.Dispatcher.BeginInvoke(() =&gt; { eventHandler(this, new PropertyChangedEventArgs(propertyName)); }); } } } } }

To invoke the PropertyChanged Event, simply call the SetProperty method. It’s nice because you can do it all in one line of code in the setter.

private IEnumerable<SyndicationItem> _syndicationItems; public IEnumerable<SyndicationItem> SyndicationItems { get { return _syndicationItems; } set { SetProperty(ref _syndicationItems, value); } }

Silverlight Binding with the Dynamic Data Type

Silverlight Binding with the Dynamic Data Type

I thought I would share my first experience with the .NET dynamic data type while doing some Silverlight binding.

The scenario is I have a View, ViewModel and Model project. My Model project gets data from a WCF service, and sets the appropriate properties in the ViewModel. There’s an ObservableCollection property in the ViewModel bound to a DataGrid in the View.

The data in the ObservableCollection can be filtered through a search within the application. I want a Label control to display the results of the search, such as “Your search returned 34 results”. So I did something crazy! Binding the updated ObservableCollection to the Label. This could have been done with a separate property, being updated from the set of the ObservableCollection, but that approach was too boring.

So you may ask, how does a Label element bound to an ObservableCollection display text? Through the magic of binding converters…

XAML:

xmlns:conversion="clr-namespace:SampleBuddy"

<controls:ChildWindow.Resources>


<conversion:CollectionConverter x:Key=”collectionConversion”></conversion:CollectionConverter>

</controls:ChildWindow.Resources>

<sdk:Label Content=”{Binding WorkOrders, Converter={StaticResource collectionConversion}}” Foreground=”Blue” Cursor=”Hand”></sdk:Label>

WorkOrders is the ObservableCollection property from the ViewModel class, which implements INotifyPropertyChanged.

Converter Class:

namespace SampleBuddy

{

public class CollectionConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
string text = “Your search returned “;
dynamic collection = value;
if (collection != null)
{
text += collection.Count.ToString() + ” results”;
}

return text;

}

public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

{return value;}

}

}

To better learn how to implement the converter, check out this article.

So I was able to bind to an existing property, and update the display whenever the collection changes from the ViewModel. Since I couldn’t cast the object, because it was referenced from the ViewModel and not the View, the dynamic data type came in very handy.