Articles

Devlifestyle May 2011 Event Materials

Mohamad Halabi — Thu, 05 May 2011 05:12:00 GMT

WCF Session (by Mohamad Halabi): http://www.devlifestyle.net/media/p/1173/download.aspx

Silverlight 4.0 Tutorial (10 of N): Working with the PathListBox

Mohamed Mosallem — Sat, 19 Feb 2011 09:34:47 GMT

Continuing our RegistrationBooth Application, In this post we will make a change to the way we display the list of attendees. Currently we display them in a standard ListBox, we will replace this with a PathListBox, the PathListBox is a new customized control that comes with Blend SDK.

From its name this control is a list box however its elements are placed on whatever path you draw so instead of having our attendees placed vertically in the ListBox we will have our attendees placed along the path we will draw, let’s start by deleting the existing ListBox.

First thing is to draw the path on which we will display the attendees, we will draw a big arc and place it in the left corner, drag an arc shape from the assets window

Drop it on the left column and set the StartAngle to 0 and the EndAngle to 180 to make the arc like a half ellipse

To convert this into a PathListBox, right click on the arc and select Path->Make Layout Path

A PathListBox will be added to the page, rename it to lstAttendees

We will bind the ItemsSource property of the PathListBox to our attendees DomainDataSource control

Next we will change the ItemTemplate property, we already have a DataTemplate defined for the attendees in the local resources, so we will bind to this template

We will also set the Capacity property to 4, this property determines the number of items shown on the Path.

Set the Start property to 20%, this property determines the distance from the start of the Layout Path to place the first item.

Set the Span property to 80%, this property determines the percentage of the Layout Path that participates in layout.

Let’s run the application and see what we have till now, you will see 4 attendees placed over the layout path we created.

To see the rest of the attendees we need to add scrolling to the PathListBox, this will require some coding but Luckily for us the Expression Blend team has already done this in the PathListBoxUtils library which is a collection of behaviors, controls and extensions for the PathListBox, you can download it from the Expression Blend Codeplex site

First we will add two buttons one above the PathListBox we will name it BackButton and one below the PathListBox we will name it ForwardButton. we need to wire these two buttons to move backward/forward through the PathListBox items. to do this we will use a behavior that comes with the PathListBoxUtils library.

Drag the PathListBoxScrollBehavior and drop it over our PathListBox

From the properties of the PathListBoxScrollBehavior add an EventTrigger for the DecrementCommand, set the SourceObject to the BackButton and set the EventName to Click.

Add an EventTrigger for the IncrementCommand, set the SourceObject to the ForwardButton and set the EventName to Click.

Add an EventTrigger for the ScrollSelectedCommand, set the EventName to SelectionChanged.

We will associate an easing function with this behavior so that the scrolling looks more fancy.

Run the application and click the forward button to see the scrolling in action

You can download the source code from here.

See you in the next post.

Silverlight 4.0 Tutorial (11 of N): Roulette Behavior

Mohamed Mosallem — Sat, 19 Feb 2011 09:33:01 GMT

Continuing our RegistrationBooth Application…

In most of the offline events we hold, there are some giveaways for the audience (most of the time the prize is XBOX). Picking a winner is manual process where we collect the feedback forms, put it in a big box/bag, shake the box/bag and turn it upside down multiple times to make sure that the forms are scrambled enough so that when we pick a form it will be a random one , not the best process I know.

So in this post we will add to our RegistrationBooth application the ability to perform a random draw. we already have our attendees listed in a PathListBox, wouldn’t it be nice if this list can spin like a roulette till it stops at the lucky winner, let’s see how we can implement this. I thought it’s better if we implement this feature as a behavior so that we can easily apply it to any PathListBox, I will call this behavior RouletteBehavior.

To create a behavior we need to derive from the abstract class Bahavior<T> available in the System.Windows.Interactivity assembly, where T is the control or UI Element that you will attach this behavior to. in our case our behavior will derive from Bahavior<PathListBox>

 public class RouletteBehavior : Behavior<PathListBox>
    {
    }
 

What properties this behavior will expose? first there should be a way to start the roulette, for maximum usability we will add a property StartCommand of type ICommand, so that users of this behavior can use any type of trigger to start the roulette

  /// <summary>
        /// Gets a command that starts the roulette animation.
        /// </summary>
        public ICommand StartCommand
        {
            get;
            private set;
        }
 

We need another property to determine how long the roulette will spin, so we will add a property Duration of type Duration, I will make this property a DependencyProperty to make it open for any advanced scenario that the users of this behavior might want to implement.

 /// <summary>
      /// Gets or sets the approximate duration of the roulette.
      /// </summary>
      public Duration Duration
      {
          get { return (Duration)this.GetValue(RouletteBehavior.DurationProperty); }
          set { this.SetValue(RouletteBehavior.DurationProperty, value); }
      }
 
      public static readonly DependencyProperty DurationProperty =
          DependencyProperty.Register("Duration", typeof(Duration), typeof(RouletteBehavior), 
          new PropertyMetadata(new Duration(new TimeSpan(0, 0, 1))));
 

To be able to customize the spinning speed we will expose a property called Speed (of type integer) that determines the speed of spinning it terms of items/second

  /// <summary>
        /// Gets or sets the speed of the roulette (Items/Sec).
        /// </summary>
        public int Speed
        {
            get { return (int)this.GetValue(RouletteBehavior.SpeedProperty); }
            set { this.SetValue(RouletteBehavior.SpeedProperty, value); }
        }
 
        public static readonly DependencyProperty SpeedProperty =
            DependencyProperty.Register("Speed", typeof(int), typeof(RouletteBehavior), 
            new PropertyMetadata(5));
 

There are two protected method that we need to override, OnAttached and OnDetaching these methods are called when attaching and detaching the behavior to a PathListBox, the AssociatedObject property of the Behavior gives you access to the PathListBox you are attaching the behavior to, so what we do is we change the WrapItems property of the PathListBox when attaching the behavior and we set it back to the original value when detaching the behavior

 protected override void OnAttached()
{
    base.OnAttached();
    _originalWrapItems = AssociatedObject.WrapItems;
    AssociatedObject.WrapItems = true;
}
protected override void OnDetaching()
{
    base.OnDetaching();
    AssociatedObject.WrapItems = _originalWrapItems;
}
 

To create the spinning animation we will need a storyboard, so we will add a member variable of type Storyboard to our behavior class and in the constructor we will initialize the storyboard and attach a method called StartRoulette to the StartCommand

  public RouletteBehavior()
        {
            this.StartCommand = new ActionCommand(this.StartRoulette);
            this.rouletteAnimationStoryboard = new Storyboard();
        }
 

The StartRoulette method contains the logic for animating the PathListBox items, we do this by creating a DoubleAnimation to animate the Start property of the LayoutPath of the PathListBox (currently this behavior supports only one layout path), based on the list items count, the Speed property, the Duration and a generated random number we calculate the final value of the Start property that we will assign to the To property of the animation.

We assign a Circle out easing function to the animation so that the speed of spinning is decreased over the duration of the animation till it stops.

 private void StartRoulette()
        {
            PathListBox pathListBox = this.AssociatedObject as PathListBox;
            int itemsCount = pathListBox.Items.Count;
            if (pathListBox == null || pathListBox.Items == null || itemsCount <= 1)
            {
                return;
            }
            
            //Support one layout path only?
            PropertyPath propertyPath = new PropertyPath(String.Format("(ec:PathListBox.LayoutPaths)[{0}].(ec:LayoutPath.Start)", 0));
            DoubleAnimation startPropertyAnimation = new DoubleAnimation();
            Storyboard.SetTarget(startPropertyAnimation, pathListBox);
            Storyboard.SetTargetProperty(startPropertyAnimation, propertyPath);
 
            this.rouletteAnimationStoryboard.Stop();
            this.rouletteAnimationStoryboard.Children.Clear();
 
 
            this.rouletteAnimationStoryboard.Children.Add(startPropertyAnimation);
 
            int randomOffset = new Random(Environment.TickCount).Next(1, 100);
            Duration calculatedDuration = this.Duration;
            int nIterations = 1;
 
            if (this.Duration.TimeSpan.TotalSeconds <= 1)
            {
                calculatedDuration = new Duration(new TimeSpan(0, 0, 1));
            }
 
            nIterations = ((int)calculatedDuration.TimeSpan.TotalSeconds * this.Speed) / itemsCount;
            if (nIterations < 1)
                nIterations = 1;
 
            startPropertyAnimation.Duration = calculatedDuration;
            startPropertyAnimation.To = (double)(100 * nIterations + randomOffset) / 100.0;
 
 
            var easing = new CircleEase();
            easing.EasingMode = EasingMode.EaseOut;
            startPropertyAnimation.EasingFunction = easing;
 
            this.rouletteAnimationStoryboard.Begin();
 
        }
 

If we try this now the items will spin (the items are not actually spinning we are changing Start property of the layout path and that makes it look like spinning). but we didn’t specify yet how we will select the winning item, so what we need to do is that while the items are virtually spinning we need to change the selected item or more specifically change the SelectedIndex property. The problem is that we need to keep changing the SelectedIndex value as long as the Start property value is changing, how we do this by binding the two properties. so we will add the following code to the OnAttached method

 Binding binding = new Binding();
            PropertyPath propertyPath = new PropertyPath("LayoutPaths[0].Start");
            binding.Path = propertyPath;
            binding.RelativeSource = new RelativeSource(RelativeSourceMode.Self);
            var converter = new StartToIndexConverter(AssociatedObject);
            binding.Converter = converter;
            binding.Mode = BindingMode.TwoWay;
 
            AssociatedObject.SetBinding(ListBox.SelectedIndexProperty, binding);
 

The code binds the SelectedIndex property to the Start property of the first LayoutPath (this behavior supports 1 LayoutPath), we need a custom IValueConverter to convert the value of the Start property to a correct SelectedIndex property that’s where the StartToIndexConverter comes into play, the two functions that we need to implement in the IValueConverter interface are shown below

 public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (this._pathListBox == null)
                return 0;
 
            int index = 0;
            double capacity = 0;
 
            if (double.IsNaN(this._pathListBox.LayoutPaths[0].Capacity))
                capacity = this._pathListBox.Items.Count;
            else
                capacity = this._pathListBox.LayoutPaths[0].Capacity;
 
            double start = (double)value;
            double shift = _previousValue - start;
            double spacing = (this._pathListBox.LayoutPaths[0].Span / capacity);
 
            Debug.WriteLine("Current Start:{0}", start.ToString());
            if (Math.Abs(shift) > spacing)
            {
                _previousValue = start;
                if (shift > 0)
                    if (this._pathListBox.SelectedIndex >= (this._pathListBox.Items.Count - 1))
                        index = 0;
                    else
                        index = this._pathListBox.SelectedIndex + 1;
                else
                    if (this._pathListBox.SelectedIndex <= 0)
                        index = this._pathListBox.Items.Count - 1;
                    else
                        index = this._pathListBox.SelectedIndex - 1;
            }
            else
                index = this._pathListBox.SelectedIndex;
 
            PathListBoxItem itemToBeSelected = (PathListBoxItem)this._pathListBox.ItemContainerGenerator.ContainerFromIndex(index);
            if (itemToBeSelected != null && !itemToBeSelected.IsArranged)
            {
                 if (shift > 0)
                    index = GetFirstArrangedIndex(0);
                else
                    index = GetLastArrangedIndex(0);
            }
 
            return index;
        }
 
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return this._pathListBox.LayoutPaths[0].Start;
        }
 

Basically what this conversion does is that if the Start value is increased/decreased by an amount that’s greater than the spacing between the items, the converter increments/decrements the SelectedIndex value to move to the next/previous item. we need to make sure that SelectedIndex value remains within the range of the items that are actually visible on the Path that’s why we are checking the PathListBoxItem.IsArranged property.

Once we finish the Behavior, you can drag it from the Assets window and drop it on your PathListBox, then you can change its properties accordingly

PS: This behavior will not work correctly if you are using PathListBoxScrollBehavior.ScrollSelectedCommand

You can download the RegistrationBooth from here.

And you can download a Demo for using the RouletteBehavior from here

Silverlight 4.0 Tutorial (12 of N): Collecting Attendees Feedback using Windows Phone 7

Mohamed Mosallem — Sat, 19 Feb 2011 09:29:23 GMT

You can find a list of the previous tutorial posts here

Continuing our RegistrationBooth Application…

It’s very important to collect the attendees feedback to help us improve the future sessions/events we might organize, we can go ahead and implement this functionality in the RegistrationBooth application. but in this post we will take a different approach, we will implement a Windows Phone 7 application that attendees can use on their phones to submit their feedback. Luckily for us Windows Phone 7 uses Silverlight as its development platform (along with XNA), the Silverlight version on Windows Phone is not the same one as the desktop version, think of this as a compact version that fits the phone capabilities.

Before we start creating the phone application, first let’s think how we will bring the data to the phone, in the case of the Silverlight application we used WCF RIA services (DomainService) which provided rich client experience for the Silverlight application, Unfortunately this type of rich client experience is not available “yet” for windows phone applications.

When we were creating the DomainService we had the option to expose OData end point.

If life was peachy we would just add a new OData endpoint to the Domain service we have and consume this service from Windows Phone, unfortunately the OData endpoint exposed from the RIA Service lacks important feature (query options) so we will not be able to make use of an OData endpoint over the RIA service, the solution is to create a new WCF data service, we will call it RegistrationBoothDataService

Change the Data Service to use our ADO.NET entity model and in the InitializeService method enable access to all the entities, the service should look like the following

public class RegistrationBoothDataService :
     DataService<RegistrationBoothDBEntities>
 {
     public static void InitializeService
         (DataServiceConfiguration config)
     {
         config.SetEntitySetAccessRule("*",
             EntitySetRights.All);
         config.SetServiceOperationAccessRule("*", 
             ServiceOperationRights.All);
         config.DataServiceBehavior.MaxProtocolVersion =
             DataServiceProtocolVersion.V2;
     }
 }

Now build the project and give it a try and navigate to the following URL

http://localhost:57263/RegistrationBoothDataService.svc/

You will see AtomPub feed containing the names of all the entities exposed by the DomainService, if you want to see the records of a certain entity just append entityname to the above URL, for example to see all the attendees go to the following URL

http://localhost:57263/RegistrationBoothDataService.svc/Attendees

That’s what we need to do to configure the service on the server side.

Now moving to the client (Phone) we need to add a new project (for the Windows Phone 7 development tools go to http://developer.windowsphone.com) We will choose the Windows Phone Panorama Application project type, later we will see why we choose that.

To consume the OData service from the windows phone project we need to download the OData client library for Windows Phone 7 (http://odata.codeplex.com), when you download this library you will have the assembly System.Data.Services.Client.dll, Add Reference to this dll in the windows phone project, and you will have a command line tool DataSvcUtil.exe that we will use to generate a proxy class for the OData service, so we will run the command line tool passing the service URL

DataSvcUtil /uri:http://localhost:57263/RegistrationBoothDataService.svc/ /out:.\RegistrationBoothDataModel.cs /Version:2.0 /DataServiceCollection

Once we have this class, we will add it to the windows phone project.

So why we chose the panoramic application? or what is a panoramic application anyway? according to MSDN “panoramic applications offer a unique way to view controls, data, and services by using a long horizontal canvas that extends beyond the confines of the screen”

So how we will implement our application UI as a panorama application? we will display the time slots horizontally and the sessions vertically, so the user will see the time slot in the header and below it a list of sessions, and by scrolling horizontally the user will move to the subsequent time slots and below each one the list of sessions in that time slot.

If you inspect the panorama application project we created, you will find that VS created a sample project with organized structure, where you have view models located in the ViewModels folder and the view models contain some sample data, and the XAML pages (views) are bound to these view models, we will follow the same structure in our application.

To communicate with the data service we need to define a DataServiceContext we will define this in the Application class

//App.xaml.cs
 static readonly Uri ServiceUri = new Uri("http://localhost:57263/RegistrationBoothDataService.svc/");
 public static int AttendeeID { get; set; }
        
 static RegistrationBoothDataService context;
 public static RegistrationBoothDataService DataServiceContext
 {
     get
     {
         if (context == null)
             context = new RegistrationBoothDataService(ServiceUri);
         return context;
     }
 }

The first page will be the Login.xaml, for the sake of simplicity we will ask the user to enter the attendee Id only

The code behind is pretty straightforward, in the page constructor we initialize a DataServiceCollection of Attendees

static readonly string attendeesUri = "/Attendees?$filter=Id eq {0}";
 DataServiceCollection<Attendee> attendeesEntities;
 public Login()
 {
     InitializeComponent();
     attendeesEntities = new DataServiceCollection<Attendee>(App.DataServiceContext);
     attendeesEntities.LoadCompleted += new EventHandler<LoadCompletedEventArgs>(attendeesEntities_LoadCompleted);
     
 }

When the user clicks the login button we populate this collection by a query that filters the attendees based on the supplied attendee id "/Attendees?$filter=Id eq {0}"

private void LoginButton_Click(object sender, RoutedEventArgs e)
 {
     attendeesEntities.LoadAsync(new Uri(string.Format(attendeesUri,AttendeeID.Text), UriKind.Relative));
 }

Once the query is loaded we check to see if there’s any attendee returned in the result, if there is an attendee we save the AttendeeID and navigate to the next page

void attendeesEntities_LoadCompleted(object sender, LoadCompletedEventArgs e)
 {
     if (attendeesEntities.Count != 1)
         MessageBox.Show("Invalid id");
     else
     {
         App.AttendeeID = attendeesEntities[0].Id;
         this.NavigationService.Navigate(
     new Uri("/MainPage.xaml", UriKind.Relative));
     }
                 
 }

The next page MainPage.xaml will display the sessions in a panorama view as we described earlier. before we build the UI let’s first create the view model, the first view model is the TimeSlotViewModel which contains two properties the TimeSlotHeader and a collection of Sessions, the view model also implements the INotifyPropertyChanged interface

public class TimeSlotViewModel : INotifyPropertyChanged
 {
     public TimeSlotViewModel(TimeSlot timeSlotEntity)
     {
         this.TimeSlotHeader = String.Format("{0:HH:mm tt} - {1:HH:mm tt}", timeSlotEntity.StartTime, timeSlotEntity.EndTime);
         this.Sessions = timeSlotEntity.Sessions;
     }
 
     Collection<Session> sessions;
     public Collection<Session> Sessions
     {
         get { return this.sessions; }
         private set
         {
             this.sessions = value;
             this.NotifyPropertyChanged("Sessions");
         }
     }
 
     string timeSlotHeader;
     public string TimeSlotHeader
     {
         get
         { return this.timeSlotHeader; }
         private set
         {
             this.timeSlotHeader = value;
             this.NotifyPropertyChanged("TimeSlotHeader");
         }
     }
 
     public event PropertyChangedEventHandler PropertyChanged;
     private void NotifyPropertyChanged(String propertyName)
     {
         PropertyChangedEventHandler handler = PropertyChanged;
         if (null != handler)
         {
             handler(this, new PropertyChangedEventArgs(propertyName));
         }
     }
 }

Another view model we have is the MainViewModel, this is the view model that the MainPage.xaml will bind to, it has an ObservableCollection of TimeSlotViewModel objects, we populate this collection by performing a query against the DataService using the Uri “/TimeSlots?$expand=Sessions/Speakers” this query expands the TimeSlot entity to retrieve the associated Sessions and Speakers entities as well

public class MainViewModel : INotifyPropertyChanged
 {
     static readonly Uri timeSlotsUri = new Uri("/TimeSlots?$expand=Sessions/Speakers", UriKind.Relative);
         
     DataServiceCollection<TimeSlot> timeSlotsEntities;
     ObservableCollection<TimeSlotViewModel> timeSlots;
 
     public MainViewModel()
     {
         timeSlotsEntities = new DataServiceCollection<TimeSlot>(App.DataServiceContext);
         timeSlotsEntities.LoadCompleted += new EventHandler<LoadCompletedEventArgs>(timeSlotsEntities_LoadCompleted);
         this.TimeSlots = new ObservableCollection<TimeSlotViewModel>();
     }
     public ObservableCollection<TimeSlotViewModel> TimeSlots
     {
         get { return this.timeSlots; }
         private set
         {
             this.timeSlots = value;
             this.NotifyPropertyChanged("TimeSlots");
         }
     }
     public bool IsDataLoaded
     {
         get; private set;
     }
     public void LoadData()
     {
         timeSlotsEntities.LoadAsync(timeSlotsUri);
         this.IsDataLoaded = true;
     }
     void timeSlotsEntities_LoadCompleted(object sender, LoadCompletedEventArgs e)
     {
         foreach (var timeSlot in timeSlotsEntities)
         {
             var tsViewModel = new TimeSlotViewModel(timeSlot);
             this.TimeSlots.Add(tsViewModel);
         }
     }

The MainPage.xaml contains the Panorama control whose ItemsSource property is bound to the TimeSlots property of the MainViewModel, each panorama Item contains a ListBox that displays the Sessions available in that TimeSlot

<Grid x:Name="LayoutRoot" Background="Transparent">
         <Grid.Resources>
             <local:DisplayNameConverter x:Key="displayNameConverter" />
         </Grid.Resources>
        <controls:Panorama Title="Select the Session" 
                           ItemsSource="{Binding TimeSlots}">
             <controls:Panorama.Background>
                 <ImageBrush ImageSource="PanoramaBackground.png"/>
             </controls:Panorama.Background>
             
             <controls:Panorama.ItemTemplate>
                 <DataTemplate>
                     <controls:PanoramaItem Header="{Binding TimeSlotHeader}" >
                         <controls:PanoramaItem.HeaderTemplate>
                             <DataTemplate>
                                 <TextBlock Text="{Binding}" Style="{StaticResource PhoneTextLargeStyle}"/>
                             </DataTemplate>
                         </controls:PanoramaItem.HeaderTemplate>
                         <ListBox Margin="0,0,-12,0" ItemsSource="{Binding Sessions}" SelectionChanged="OnSelectionChanged">
                     <ListBox.ItemTemplate>
                         <DataTemplate>
                            
                             <StackPanel Margin="0,0,0,17" Width="432">
                                 <TextBlock Text="{Binding Title}" TextWrapping="Wrap" 
                                             Style="{StaticResource PhoneTextLargeStyle}"/>
                                 <ListBox ItemsSource="{Binding Speakers}">            
                                     <ListBox.ItemTemplate>
                                         <DataTemplate>
                                             <TextBlock Text="{Binding ., Converter={StaticResource displayNameConverter}}" TextWrapping="Wrap" 
                                                             Style="{StaticResource PhoneTextSubtleStyle}" />
                                         </DataTemplate>
                                     </ListBox.ItemTemplate>
                                 </ListBox>
                             </StackPanel>
                         </DataTemplate>
                     </ListBox.ItemTemplate>
                 </ListBox>
                     </controls:PanoramaItem>
                 </DataTemplate>
             </controls:Panorama.ItemTemplate>
         </controls:Panorama>
     </Grid>

The code behind the MainPage.xaml will set the DataContext of the page to an instance of the MainViewModel class, we will load the View Model data in the Load Event of the page, on the SelectionChanged event of the sessions ListBox we will navigate to the session evaluation page SessionEval.xaml

public partial class MainPage : PhoneApplicationPage
 {
     MainViewModel ViewModel = new MainViewModel();
     public MainPage()
     {
         InitializeComponent();
         DataContext = ViewModel;
         this.Loaded += new RoutedEventHandler(MainPage_Loaded);
     }
     private void MainPage_Loaded(object sender, RoutedEventArgs e)
     {
         if (!ViewModel.IsDataLoaded)
         {
             ViewModel.LoadData();
         }
     }
     void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
     {
         var selector = (Selector)sender;
         if (selector.SelectedIndex == -1)
             return;
         Session session = selector.SelectedItem as Session;
         this.NavigationService.Navigate(
             new Uri("/SessionEval.xaml?sessionId=" + session.Id, UriKind.Relative));
         selector.SelectedIndex = -1;
     }
 }

The view model for the SessionEval.xaml page is called SessionEvalViewModel this view model has a punch of propertyies we have a DataServiceCollection of EvalCriteria entities which contains the different evaluation criteria, and we have another DataServiceCollection of SessionEvaluation entities which contains the evaluation value for each criteria per session per attendee. there is another ObservableCollection of EvalCriteriaInfo objects, this collection is the one that is exposed to the UI.

static readonly string evalCriteriaUrl = "/EvalCriterias";
 static readonly string sessionEvalUrl = "/SessionEvaluations?$filter=SessionId eq {0} and AttendeeId eq {1}";//, UriKind.Relative);
 DataServiceCollection<EvalCriteria> evalCriteriaEntities;
 DataServiceCollection<SessionEvaluation> sessionEvalEntities;
 bool bEvalsLoaded = false;
 int _sessionId;
 bool bCriteriaLoaded = false;
 ObservableCollection<EvalCriteriaInfo> _evaluations;
 
 public SessionEvalViewModel()
 {            
         _evaluations = new ObservableCollection<EvalCriteriaInfo>();
 }
 
 #region Properties
 public ObservableCollection<EvalCriteriaInfo> Evaluations
 {
     get { return _evaluations; }
     set
     {
         _evaluations = value;
         NotifyPropertyChanged("Evaluations");
     }
 }
 public bool IsDataLoaded
 {
     get;
     private set;
 }
 #endregion

the EvalCriteriaInfo class is a helper class that implements the INotifyPropertyChanged interface

public class EvalCriteriaInfo : INotifyPropertyChanged
 {
     string _evalCriteriaTitle;
     int _evalCriteriaId;
     int _evaluationValue;
     public string EvalCriteriaTitle {
         get { return _evalCriteriaTitle; }
         set 
         { 
             _evalCriteriaTitle = value;
             NotifyPropertyChanged("EvalCriteriaTitle");
         }
     }
     public int EvaluationValue
     {
         get { return _evaluationValue; }
         set
         {
             _evaluationValue = value;
             NotifyPropertyChanged("EvaluationValue");
         }
     }
     public int EvalCriteriaId
     {
         get { return _evalCriteriaId; }
         set
         {
             _evalCriteriaId = value;
             NotifyPropertyChanged("EvalCriteriaId");
         }
     }
       
     public SessionEvaluation SessionEvaluationEntity;
 
     #region INotifyPropertyChanged Implementation
     /**/
     #endregion
 }

The LoadData method of the view model, loads the EvalCriteria and SessionEvaluation collections and save them in the Application object

public void LoadData(int sessionId)
 {
     _sessionId = sessionId;
     if (App.EvalCriteriaEntities == null)
     {
         evalCriteriaEntities = new DataServiceCollection<EvalCriteria>(App.DataServiceContext);
         evalCriteriaEntities.LoadCompleted += new EventHandler<LoadCompletedEventArgs>(evalCriteriaEntities_LoadCompleted);
         evalCriteriaEntities.LoadAsync(new Uri(evalCriteriaUrl, UriKind.Relative));
     }
     else
     {
         this.evalCriteriaEntities = App.EvalCriteriaEntities;
         bCriteriaLoaded = true;
     }
 
     if (!App.SessionEvaluationEntities.ContainsKey(this._sessionId))
     {
         sessionEvalEntities = new DataServiceCollection<SessionEvaluation>(App.DataServiceContext);
         sessionEvalEntities.LoadCompleted += new EventHandler<LoadCompletedEventArgs>(sessionEvalEntities_LoadCompleted);
         sessionEvalEntities.LoadAsync(new Uri(string.Format(sessionEvalUrl, sessionId, App.AttendeeID), UriKind.Relative));
     }
     else
     {
         this.sessionEvalEntities = App.SessionEvaluationEntities[this._sessionId];
         bEvalsLoaded = true;
     }
     this.IsDataLoaded = true;
     populate();
 }
 void evalCriteriaEntities_LoadCompleted(object sender, LoadCompletedEventArgs e)
 {
     bCriteriaLoaded = true;
     App.EvalCriteriaEntities = evalCriteriaEntities;
     populate(); 
 }
 void sessionEvalEntities_LoadCompleted(object sender, LoadCompletedEventArgs e)
 {
     bEvalsLoaded = true;
     App.SessionEvaluationEntities.Add(_sessionId,sessionEvalEntities);
     populate(); 
 }
 void populate()
 {
     if (!bEvalsLoaded || !bCriteriaLoaded)
         return;
             
     foreach (var evalCriterion in evalCriteriaEntities)
     {
         var evalInfo = new EvalCriteriaInfo();
         evalInfo.EvalCriteriaId = evalCriterion.EvalCriterionId;
         evalInfo.EvalCriteriaTitle = evalCriterion.EvalCriterionText;
                                 
         foreach (var sessionEval in sessionEvalEntities)
         {
             if (sessionEval.EvalCriterionId == evalCriterion.EvalCriterionId)
             {
                 evalInfo.EvaluationValue = sessionEval.Evaluation-1;
                 evalInfo.SessionEvaluationEntity  = sessionEval;
             }
         }
                 
         Evaluations.Add(evalInfo);  
     }
     NotifyPropertyChanged("Evaluations");
 }

The Save method will update the corresponding SessionEvaluation entity if there’s an existing one, or it will add a new SessionEvaluation entity, the changes are pushed back to the Data Service by calling the DataServiceContext BeginSaveChanges method

public void Save()
         {
             foreach (var eval in this.Evaluations)
             {
                 if (eval.SessionEvaluationEntity != null)
                 {
                     eval.SessionEvaluationEntity.Evaluation = eval.EvaluationValue + 1;
                     App.DataServiceContext.UpdateObject(eval.SessionEvaluationEntity);
                 }
                 else
                 {
                     SessionEvaluation sessionEval = new SessionEvaluation();
                     sessionEval.AttendeeId = App.AttendeeID;
                     sessionEval.EvalCriterionId = eval.EvalCriteriaId;
                     sessionEval.Evaluation = eval.EvaluationValue+1;
                     sessionEval.SessionId = _sessionId;
                     App.DataServiceContext.AddObject("SessionEvaluations", sessionEval);
                 }
             }
             App.DataServiceContext.BeginSaveChanges(OnSaveCompleted, null);
         }

The code behind in the SessionEval page will set the DataContext of the page to an instance of the SessionEvalViewModel class, we will load the View Model data in the NavigateTo event handler the page. When we click the Save button we call the Save method of the view model

public partial class SessionEval : PhoneApplicationPage
 {
     SessionEvalViewModel viewModel=new SessionEvalViewModel(); 
     public SessionEval()
     {
         InitializeComponent();
         DataContext = viewModel;
     }
     protected override void OnNavigatedTo(NavigationEventArgs e)
     {
         string strIndex = this.NavigationContext.QueryString["sessionId"];
         int sessionId = int.Parse(strIndex);
         if (!viewModel.IsDataLoaded)
         {
             viewModel.LoadData(sessionId);
         }
     }
     void OnSave(object sender, EventArgs e)
     {
         this.viewModel.Save();
     }
 }

The SessionEval.xaml page contains a ListBox that is bound to the Evaluations collection, each list item will have a group of radio buttons that display the evaluation values.

<ListBox Margin="0,0,-12,0" x:Name="lstEvaluations" 
             ItemsSource="{Binding Evaluations,Mode=TwoWay}" >
     <ListBox.ItemTemplate>
         <DataTemplate>
 
             <StackPanel Margin="0,0,0,17" Width="432">
                 <TextBlock Text="{Binding EvalCriteriaTitle}" TextWrapping="Wrap" 
                                 Style="{StaticResource PhoneTextLargeStyle}"/>
                 <ListBox SelectedIndex="{Binding EvaluationValue, Mode=TwoWay}"
                             ItemContainerStyle="{StaticResource RadioButtonListItemStyle}">
                     <ListBoxItem Content="1"/>
                     <ListBoxItem Content="2"/>
                     <ListBoxItem Content="3"/>
                     <ListBoxItem Content="4"/>
                 </ListBox>
             </StackPanel>
         </DataTemplate>
     </ListBox.ItemTemplate>
 </ListBox>

You can build and run the project to see the application in action

You can download the source code from here

Special Registration Code For TechEd Dubai 2011

Mohamad Halabi — Tue, 11 Jan 2011 00:23:00 GMT

Dear Devlifestyle Members,

Devlifestyle has a Special Registration Code that you can use to register yourself as a Delegate attendee for Microsoft Tech·Ed Middle East 2011.

For the month of January, a 10% discount on the Saver Registration Fee of $950

Below is a link to download a copy of a flowchart explaining the registration process and what is to be expected:

http://www.devlifestyle.net/media/p/1163/download.aspx

Special Registration Code:
4C82024D

Please Note: Ensure that you complete your registration on or before the expiry date of Monday, January 31, 2011.

MS Open Door Azure Session Materials

Mohamad Halabi — Mon, 08 Nov 2010 18:47:00 GMT

Download Microsoft Open Door Azure Session Materials:

Slides
Demos: Part1, Part2, Part3

Silverlight 4.0 Tutorial (9 of N): Using the WebCam as a Barcode Scanner

Mohamed Mosallem — Tue, 02 Nov 2010 18:31:51 GMT

Continuing our RegistrationBooth Application, we want to allow registered users to evaluate sessions, we don’t have a credentials store in our application so to identify the registered attendees we will use a simpler approach, in part2 we allowed printing a name tag for registered attendees, this name tag contains a barcode of the attendee id, in this post we will see how can we use the new Silverlight 4.0 WebCam functionality to be able to scan/read barcodes and extract the attendee id to identify the corresponding attendee.

During PDC09 Keynote, Scott Guthrie demonstrated a Silverlight Application that scans a book ISBN barcode and passes this ISBN to Amazon web service to retrieve the book information, we will reuse the code from this sample which can be downloaded from here.

This sample actually uses a code from a CodeProject Article (by Berend Engelbrecht) that detects barcodes inside an image. the code is located in the file BarcodeImaging.cs, so we will copy this file to our project.

The sample also has another class BarcodeCapture that derives from VideoSink, according to MSDN “To obtain video information from a video input device in Silverlight, you derive a custom video sink from VideoSink” , the important method to override in this class is OnSample which is called when the video device captures a complete video sample. the code in this method calls the BarcodeImaging method that scans the current sample bitmap for a barcode, if a barcode is found the BarcodeCapture class fires a custom event BarcodeDetected that propagates the detected barcode. so we will need to copy the BarcodeCapture.cs file to our project.

On the UI we will have two components, the first one is a rectangle that we will display the webcam stream inside it.

<Border x:Name="nameTagScannerArea" Padding="10" Grid.Column="1" Height="400" Grid.RowSpan="2" Background="{StaticResource greenBrush}" CornerRadius="30" d:IsHidden="True"  >
         <StackPanel>
             <TextBlock TextAlignment="Center" FontSize="14.667" FontWeight="Bold" Foreground="White" >Place your name tag infront of the camera</TextBlock>
             <Rectangle  x:Name="barcodeScanner" Fill="White"  Width="400" Height="300"          />                  
      </StackPanel>
     </Border>

The second UI component is another rectangle that will be shown when a barcode is detected, the rectangle will display a simple welcome message to the user, we will add more functionality later.

<Border x:Name="welcomeArea" Padding="10" Grid.Column="1" Height="150" Grid.RowSpan="2" Background="{StaticResource orangeBrush}" CornerRadius="30"  >
          <StackPanel Orientation="Horizontal">
          <TextBlock TextAlignment="Center" FontSize="14.667" VerticalAlignment="Center" FontWeight="Bold" Foreground="White" >Welcome </TextBlock>          
          <TextBlock x:Name="userName" TextAlignment="Center" FontSize="14.667" VerticalAlignment="Center" FontWeight="Bold" Foreground="White" ></TextBlock>          
          </StackPanel>
     </Border>

We will add two new visual states, the first one is “ScanningNameTag” in this state we display the barcode scanning area and the attendee list, here’s how the UI looks like in this state

The button “Back” moves the UI back to the Default state by using a MoveToStateAction behavior

The second state is “WelcomeAttendee”, in this state we show the welcome area and the attendee list, here’s how the UI looks like in this state

As you can see we added a Good Bye Button (btnLogout), we will add a MoveToStateAction behavior to this button so that when we click it we move to the Default state

when we click the “Login” button, we will start the cam and move to the “ScanningNameTag” state

private void btnLogin_Click(object sender, RoutedEventArgs e)
         {
             if (ActivateCamera())
             {
                 if (m_Capture == null)
                 {
                     m_Capture = new BarcodeCapture();
                     m_Capture.BarcodeDetected += new EventHandler<BarcodeEventArgs>(OnBarcodeDetected);
                     m_Capture.CaptureSource = m_CaptureSource;
                 }
                 VisualStateManager.GoToState(this, "ScanningNameTag", true);
             }
         }

The code first activates the camera to start capturing by calling the ActivateCamera function shown below

bool ActivateCamera()
         {
             if (m_CaptureSource == null)
             {
                 m_CaptureSource = new CaptureSource();
                 m_CaptureSource.VideoCaptureDevice = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();
 
                 VideoBrush previewBrush = new VideoBrush();
                 previewBrush.Stretch = Stretch.Uniform;
                 previewBrush.SetSource(m_CaptureSource);
                 barcodeScanner.Fill = previewBrush;
 
                 Size diff = new Size(double.MaxValue, double.MaxValue);
                 Size wantedSize = new Size(640, 480);
                 VideoFormat bestFormat = null;
                 foreach (VideoFormat format in m_CaptureSource.VideoCaptureDevice.SupportedFormats)
                 {
                     double x = Math.Abs(format.PixelWidth - wantedSize.Width);
                     double y = Math.Abs(format.PixelHeight - wantedSize.Height);
 
                     if (x < diff.Width && y < diff.Height)
                     {
                         bestFormat = format;
                         diff.Width = x;
                         diff.Height = y;
                     }
                 }
                 if (bestFormat != null)
                 {
                     m_CaptureSource.VideoCaptureDevice.DesiredFormat = bestFormat;
                 }
                 if (CaptureDeviceConfiguration.RequestDeviceAccess() || CaptureDeviceConfiguration.AllowedDeviceAccess)
                 {
                     m_CaptureSource.Start();
                     return true;
                 }
                 else
                     return false;
             }
             else
                 return true;
         }

after starting the camera we create an instance of our VideoSink (BarcodeCapture) and link the capture source with our video sink, we must also register to the event BarcodeDetected to be notified when the BarcodeCapture video sink detects a barcode in the image.

Here is the event handler for the BarcodeDetected event

 void OnBarcodeDetected(object sender, BarcodeEventArgs e)
         {
             if (e.Barcode.Length < 8)//barcode formate is ATTXXXXX
                 return;
 
             int attendeeID=0;
             if (!Int32.TryParse(e.Barcode.Substring(3, 5), out attendeeID))
                 return;
 
             Dispatcher.BeginInvoke(delegate()
             {
                 RegistrationDomainContext context = this.Resources["registrationDomainContext"] as RegistrationDomainContext;
                 context.Load(context.GetAttendeeQuery(attendeeID),
                         delegate(LoadOperation<Attendee> loadOperation)
                         {
                             m_CaptureSource.Stop();
                             m_Capture.Clear();
                             foreach (var attendee in loadOperation.Entities)
                             {
                                 lblUserName.Text = string.Format(" {0} {1}", attendee.FirstName ,attendee.LastName);
                                 break;
                             }
                             VisualStateManager.GoToState(this, "WelcomeAttendee", true);
                         },
                         null);
             });
         }

First We validate the barcode format, then we call a new domain service method that retrieves the attendee based on the id, note that we are using Dispatcher.BeginInvoke method so that our code runs on the main UI thread.

Let’s run the application, click on the Login button, the webcam will start, hold the name tag in front of the webcam, you may need to move the name tag closer/way from the webcam till it picks the barcode

Once the barcode is detected, the application will move to the WelcomeAttendee state

Note: i used the Silverlight Barcode Library to generate the barcode, cause the previous method we used (the font 3 of 9) was not recognized by Berend library

You can download the source code from here.

See you in the next post.

Silverlight 4.0 Tutorial (8 of N): Fluid Layouts

Mohamed Mosallem — Thu, 09 Sep 2010 03:00:00 GMT

Read Previous Posts: Part1, Part2, Part3, Part4, Part5, Part6, Part7

In our last post we implemented visual states for our application, you may have noticed in the States tab in Blend the Default Transition section

the default transition is applied when moving from any state to any other state.

- You can create transitions between any pair of states, for each transition you specify how long it will take (transition duration) and the easing function to be used.

the easing function makes the animations look real, so instead of the linear interpolations of the values that change between states you can choose the appropriate easing function to interpolate the values, there are many easing functions in Blend (quadratics, cubic, bounce, elastic, etc.) and you can even code your own easing function.

- You can see a preview of the state transitions by turning on the transition preview (click on the icon highlighted in the below image)

by turning on the transition preview whenever you change the selected state in the states tab the corresponding transition will be played.

- We can employ these transitions in our application, but the problem is that the properties we change in the different states (Visibility, RowSpan) are discrete properties that cannot be smoothly interpolated. the solution Microsoft offers for this is Fluid Layout, what is Fluid Layout? according to The Expression team blog ” an engine that would take a layout snapshot before the state change, take another layout snapshot after the state change, and create a smooth morph between the start and end positions, employing the duration and EasingFunction of the user’s choosing.”

You can turn on the Fluid Layout by clicking the icon highlighted in the image above.

- Let’s use this new feature in our application, we will turn the fluid layout on, and change the default transition to use BackInOut easing function with duration one second

- If you turn the transition preview on, you can see the transition effect immediately while you change the selected state in the States tab.

- Run the application to see the transition in action.

See you in the next post.

Download the source code from here.

Silverlight 4.0 Tutorial (7 of N): Visual States

Mohamed Mosallem — Sat, 04 Sep 2010 07:26:19 GMT

Read Previous Posts: Part1, Part2, Part3, Part4, Part5, Part6

Continuing our registration booth application, i did some changes to the application UI, here’s how the application look like right now

- As you can see i removed the navigation features in the application, we will keep it as a one simple xaml page, i also changed some colors (excuse my poor color picking skills).

- After looking at the UI i think that the agenda is not taking enough space, the lower DataForm is taking more space while this DataForm is needed only when someone wants to register, the focus of the default UI should be the agenda and the registered attendees, so we need to make the DataForm invisible and show it on demand, this is pretty easy to do, first i will add a button to view/hide the DataForm.

- I will add a new column to the LayoutRoot grid and put the button inside this column, i will also add a simple rotate transform for this button

- The button should look like this

- First we need to hide the lower DataForm and expand the agenda to span two rows, then in the button event handler we need to show the DataForm and change the agenda back to span one row only. we can write the code immediately in the button click event handler or we can make use of Visual States (more details on States here), apparently our form has two states the first state (the default one) is when we are showing the attendees list and the event agenda; the second state is when we are showing the attendees list, event agenda and the DataForm.

- In Blend you can easily create these two states, in one of the tool windows in Blend (the one that has the projects tab) you will find a tab called States

- The states tab is empty because we don’t have states yet, to add state you can click the small icon (surrounded by red rectangle in the image above) the tooltip on the icon says “Add state group”, a state groups is just a way to group states together. so we will click this icon to add a new state group

- As you can see in the image above, the new state group is called VisualStateGroup you can change the name if you want to; We will add two states in this group (by clicking on the icon surrounded by red rectangle), we will name them Default and Register.

- Starting with the Default state, in this state the DataForm should be hidden and the agenda should span two rows, to do this all you need is to select the Default state and do the necessary changes in the UI, whatever you change in the UI is saved in this state, as you can see at the top of the designer window a message saying that state recording is on

- So select the Default state and change the Visibility of the stack panel that contains the DataForm and the colored rectangle (rectAttendeeDataFormContainer) to collapsed, and for the agenda items control change its RowSpan property to 2

- Select the Register state and change the Visibility of the stack panel that contains the DataForm and the colored rectangle (rectAttendeeDataFormContainer) to visible, and for the agenda items control change its RowSpan property to 1, for the register button change its visibility to collapsed.

- Now we need to start the application in the Default state, to do this add the following line of code in the constructor of the page

 public Home()
        {
            InitializeComponent();
            VisualStateManager.GoToState(this, "Default", false);
        }
 

We use the VisualStateManager (the component responsible for managing the different states) to go to the Default state

- On clicking the button we will go to the Register state, we can do this by calling the VisualStateManger.GoToState method in the button event handler; another way of doing this if you do not want to write code is to use Blend behaviors, under the Assets tab select Behaviors, you will find a behavior called GoToStateAction

- Drag and drop this behavior on the button, go to the properties of the behavior you will see that this behavior action will be triggered by the button click event; you have to choose the Register state from the dropdown list

- Run the application, initially the DataForm is hidden because we are in the Default state, click on the Register button to go to the Register state, the DataForm will be shown

- After the user registers a new attendee we should go back to the default state, we can do this by using the GoToStateAction behavior we used earlier, drag and drop this behavior over the DataForm, change the properties of the behavior by setting the EventName to EditEnded and the StateName to Default

- Try the application again, click the Register button, the application will go the Register state. enter the necessary information and click Ok, the application will go back to the Default state.

That’s it for this post, we will continue in the next one.

Download the source code from here

Silverlight 4.0 Tutorial (6 of N): Working with the ItemsControl

Mohamed Mosallem — Mon, 09 Aug 2010 11:09:55 GMT

Read Previous Posts: Part1, Part2, Part3, Part4, Part5

In this part of the series we will build the event agenda

- First let’s try to make some room on the UI for the agenda, add a new row to the LayoutRoot grid, make sure that the attendees ListBox has RowSpan=2, then move the DataForm to the lower right cell, we will display the agenda in the upper right cell, Now our home page should look like the following

- To build the agenda let’s recall our data model, we have a table TimeSlot that contains the different time slots in the event, each session is assigned to one time slot and each time slot can have one or more session.

- We will need to retrieve all the time slots along with the sessions in each time slot, to do this go to the RegistrationDomainService.cs file in the RegistrationBooth.Web project, change the GetTimeSlots method as follows

       public IQueryable<TimeSlot> GetTimeSlots() 
        { 
            return this.ObjectContext.TimeSlots.Include("Sessions"); 
        } 
     

- You will need also to make a small change in the RegistrationDomainService.metadata.cs file, find the TimeSlotMetadata class and add the attribute [Include] to the property Sessions as follows

       [Include] 
            public EntityCollection<Session> Sessions { get; set; } 
     

- Now back to Home.xaml in Visual Studio, from the Data Sources Tool window click the down arrow beside the TimeSlot entity, select “None” for the control used to render this entity as we will create a custom UI to represent this entity, drag and drop the TimeSlot entity on the page, this will create the DomainDataSource control, rename it to timeSlotDomainDataSource

- Switch back to Blend, from the assets tool window add the ItemsControl to the Home.xaml page, place it in the top right cell, rename it to icAgenda.

- Right click the items control, select Auto Size->Fill.

- Right click the items control, select Data bind ItemsSource to Data, in the Create Date Binding dialog box go to the Element Property tab select the timeSlotDomainDataSource element from the left list box and select the Data property from the right list box.

- Right click the items control, select Edit Additional Templates –> Edit Generated Items (ItemTemplate) –> Create Empty.

- In the Create DataTemplate Resource dialog, set the key to timeSlotDataTemplate, click Ok, Blend will switch to the design of the ItemTemplate which initially contain empty grid.

- Use the designer to add a column to the grid as follows

- In the left column add a Rectangle, set the Fill property to white solid color brush, set the RadiusX and RadiusY properties to 10 to have a rounded rectangle, increase the width of the rectangle to overlap the right column (as shown below)

- Add another rectangle to the right column, set the Fill property to white solid color brush, set the RadiusX and RadiusY properties to 10 to have a rounded rectangle, right click the rectangle select Auto Size->Fill, the data template should look like the below image

- In the left column rectangle we will display the time slot start and end times (ex: 09:00 –10:00), to do this add a StackPanel to this column, set the Orientation to Horizontal, in the StackPanel add 3 TextBlocks, set the Text of the middle one to “ – “, set the Text of the first one to a binding to the StartTime property, set the Text of the third one to a binding to the EndTime property, for both bindings use a StringFormat=’HH:mm tt’ to display the time only, the markup for the TextBlocks is shown below

 <TextBlock TextWrapping="Wrap" Text="{Binding StartTime, StringFormat='HH:mm tt'}" />
                <TextBlock TextWrapping="Wrap" Text=" - "  />
                <TextBlock TextWrapping="Wrap" Text="{Binding EndTime, StringFormat='HH:mm tt'}"  />
 

- in the right column we will display all the sessions in the corresponding TimeSlot, to do this add ItemsControl to the right column, name it icSessions, set its ItemsSource property to binding to the Sessions Property.

- Right click the icSessions control, select Edit Additional Templates –> Edit Generated Items (ItemTemplate) –> Create Empty.

- In the Create DataTemplate Resource dialog, set the key to sessionDataTemplate, click Ok, Blend will switch to the design of the ItemTemplate which initially contain empty grid.

- We will create a small template for the session that shows the session title, location and description, so use three textblocks and bind them to the Title and Location and Description properties respectively, the xaml of the sessionDateTemplate is shown below

  <DataTemplate x:Key="sessionDataTemplate">
            <Grid Margin="10,0,0,20">
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <StackPanel  Orientation="Horizontal" Grid.Row="0" >
                    <TextBlock FontSize="16" FontWeight="Bold" Text="{Binding Title}"
                    TextWrapping="Wrap"  Width="400" />
                    <TextBlock FontSize="16" FontWeight="Bold" Text=" - "/>    
                    <TextBlock FontSize="16" FontWeight="Bold" Text="{Binding Location}"/>
                </StackPanel>
                <TextBlock FontSize="10" TextWrapping="Wrap"   Text="{Binding Description}" 
                Width="400" Grid.Row="1" HorizontalAlignment="Left" />
            </Grid>
        </DataTemplate>
 

- Try and run the application, i already have two time slots in my database, the first time slot has two sessions and the second has one session, the UI will look like the following

- As you can see the problem is that the ItemsControl doesn’t provide scrolling, we have to change the Template of the ItemsControl to support this, this is a pretty easy task, right click the icSessions control, select Edit Template-> Create Empty

- In the Create Control Template Resource name it ItemsControlScrollableControlTemplate and click Ok

- Use the following xaml for this template

 <ControlTemplate x:Key="ItemsControlScrollableControlTemplate" TargetType="ItemsControl">
            <ScrollViewer x:Name="ScrollViewer" Padding="{TemplateBinding Padding}" BorderThickness="0"> 
                <ItemsPresenter />
            </ScrollViewer>
        </ControlTemplate>
 

- We need also to use the same template for the outer ItemsControl (icAgenda), to do this right click the control, select Edit Template-> Apply Resource-> ItemsControlScrollableControlTemplate

- Run the application, you can now scroll both the inner and the outer ItemsControl

See you in the next post

You can download the code from Here

Silverlight 4.0 Tutorial (5 of N): More Blend!

Mohamed Mosallem — Mon, 09 Aug 2010 11:05:57 GMT

Read Previous Posts: Part1, Part2, Part3, Part4

Continuing our series for building a registration booth application using Silverlight 4.0, in this post we will continue working with Expression Blend

- Open Home.xaml, select the LayoutRoot grid in the Objects and Timeline window, set the Width and Height properties to Auto so that the grid takes all the screen size.

- Now we will change the background color of the page, select the LayoutRoot grid, go to the Background property and select the Gradient Brush option.

- The Gradient brush we will use will have three gradient stops, you can click on the gradient bar (below the color mixer) to add a gradient stop at the specified offset, to remove a gradient stop click, hold, and drag your mouse off the gradient bar. for each gradient stop you can specify the color (RGB, Alpha).

- The xaml for the grid background will be as follows.

 <Grid.Background>
       <LinearGradientBrush EndPoint="0.5,0.998" StartPoint="0.5,0">
            <GradientStop Color="#FF052744" Offset="0"/>
            <GradientStop Color="#FF052744" Offset="0.02"/>
            <GradientStop Color="#7F256FB7" Offset="1"/>
       </LinearGradientBrush>
    </Grid.Background>
 

- We will do another change, we will change the font of the TextBlocks, to do this add a TextBlock to the Home.xaml page, right click the TextBlock, select Edit Style-> Create Empty a dialog box will appear to allow you to change the properties of the new style resource, Choosing the Apply to all means that this style will be applied to all the text blocks (this is a new feature in Silverlight called implicit styles).

- change the font family to Freestyle script and the font size to 30pt.

- Run the application, you will see that the TextBlocks inside the ListBox didn’t change, this is due to a ~~limitation~~ design issue related to the DateTemplate (more details in this post).

- To resolve this we need to define the implicit style inside the data template, so move the style definition from the Page.Resources to the Grid.Resources section inside the data template.

- We need also to change the style of the labels inside the DataForm, the DataField control that we use inside the DataForm NewItemTemplate renders a Label control for the display name not a TextBlock so we will add a style with the same properties that we used in the previous style but we will set the TargetType property to the value “dataInput:Label” which represent the Label control defined in the System.Windows.Controls.Data.Input assembly (don’t forget to add xml prefix “dataInput” in the page tag), the NewItemTemplate definition should be as follows.

That’s it for this post, see you in the next post

You can download the code from Here

Silverlight 4.0 Tutorial (4 of N): ListBox ItemTemplate

Mohamed Mosallem — Mon, 09 Aug 2010 10:57:47 GMT

Read Part 1

Read Part 2

Read Part 3

Continuing our RegistrationBooth Application, if you take a look at what we ended with you will find that the attendees data grid that we have is not user friendly, our application should be more attractive to the users, so we will get rid of the data grid and we will use a List box that has a custom template for displaying attendees, in this post we will start using Blend to assist in designing the application UI

- Right click the xaml file in Visual Studio and choose Open in Expression Blend, this will open your solution in Blend.

- Delete the attendeeDataGrid from the Home.xaml file.

- We will change the layout of the form we will use a grid with two columns the width of the first one is about third of the screen width and we will put the list box in this column, and the second column take the remaining screen width and this is where we will put the attendees data form.

- To do this, go to the Objects and Timeline window (if not visible go to Menu Window->Objects and Timeline), select the LayoutRoot Grid, the grid will be highlighted on the design surface (or the art board in the designers lingo), you can see also a small grid icon located in the top left corner of the grid, and you can see two semi-transparent lines one horizontal and one vertical, if you move the mouse over any of these lines, a line will be drawn across the grid and once you click.. a row/column definition will be added to the grid, so you can easily add columns/rows using this way. so we will add a column to this grid, the column should take about the third of the grid width.

- We will move the StackPanel that contains the new attendee data form (dfAttendee) and the button to the right column, to do this select the StackPanel in the Objects and Timeline window, go to the properties window and find the Column property under the Layout category and set it to 1, this will move the StackPanel to the right column.

To easily find properties in the properties window you can use the search textbox in that window which allows you to type any text and the properties window will be filtered to show the properties that start with the text you wrote in the search text box

- To add a ListBox, expand the assets window by clicking on the right arrow located in the bottom of the tools window, drag and drop a ListBox control into the left hand side column

- Select the ListBox, by pressing the “V” key or selecting the Selection tool from the tools window.

- From the tools window, set the Name of the ListBox to be lstAttendees, then right click the ListBox Auto Size->Fill to make the ListBox fills the whole column area.

- To add the data binding, right click the ListBox, select “Data bind ItemsSource to Data…”, the data binding dialog will appear, go to the Element Property tab, select the attendeeDomainDataSource from the scene elements list on the left, and select the Data property from the Properties list on the right.

- If you run the application now, you will find the items in the ListBox is rendered as string that contains the name of the class and the ID, this is because we didn’t specify to the ListBox how we want to render the ListBox Item, to do this we need to set the ItemTemplate property.

- To do this, right click the ListBox Edit Additional Template –> Edit Generated Items (ItemTemplate)-> Create Empty

- In the Create DataTemplate Resource Dialog, name it attendeeDateTemplate, once you click Ok, Blend will allow you to design the DataTemplate which will determine the UI used to display the Attendee object.

- A new empty design surface will be shown that represents the DataTemplate, initially there’s only empty grid as you can in the Objects and Timeline window.

You can go back to the page design by clicking on the Up arrow in the Objects and Timeline window or by clicking on the ListBox name (lstAttendees) in the breadcrumb menu at top of the design surface

- We will create a simple UI for the attendee, where we'll display the image, last name, first name and company, the xaml for the DataTemplate is shown below

 <DataTemplate x:Key="attendeeDataTemplate">
        <Grid d:DesignWidth="320" d:DesignHeight="112">
            <Grid.RowDefinitions>
                <RowDefinition Height="0.3*"/>
                <RowDefinition Height="0.3*"/>
                <RowDefinition Height="0.3*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.35*"/>
                <ColumnDefinition Width="0.65*"/>
            </Grid.ColumnDefinitions>
            <Image Source="{Binding Path=Photo,Mode=TwoWay, Converter={StaticResource imageConverter}}" Grid.Column="0" Grid.RowSpan="3" MaxWidth="110" MaxHeight="110" />
            <TextBlock Grid.Column="1" Grid.Row="1" TextWrapping="Wrap" Margin="0" HorizontalAlignment="Center" Text="{Binding Company}" />
            <TextBlock Grid.Column="1" Grid.Row="2" TextWrapping="Wrap" HorizontalAlignment="Center" Text="{Binding Email}" />
            <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Center">
                <TextBlock Margin="0,8" TextWrapping="Wrap" Text="{Binding FirstName}" />
                <TextBlock Margin="0,8,0,16" TextWrapping="Wrap" Text=" "/>
                <TextBlock Margin="0,8" TextWrapping="Wrap" Text="{Binding LastName}" />
            </StackPanel>
        </Grid>
    </DataTemplate>
 

- Note how the text blocks are bound to the different properties of the Attendee class, and the Image control is bound to the Photo property using the ImageConverter we used before.

- Run the application and see how the list box looks like.

See you in the next post :)

You can download the code from Here

Silverlight 4.0 Tutorial (3 of N): Working with the DataForm Control

Mohamed Mosallem — Mon, 09 Aug 2010 10:53:37 GMT

Read Part 1

Read Part 2

Continuing our RegistrationBooth Application, in the previous post we ended having a data grid that displays all the attendees, and a user control to add a new attendee.

The user control for adding a new attendee didn’t contain any validation logic, of course this is a bad practice, in this post we will add the necessary validation when creating adding new attendees.

- First we will need to define our validation logic for the Attendee entity, if you remember our first post when we created the Domain Service class we choose to create metadata classes for our entities, you can read more about metadata classes in the RIA services documentation (How To Add Metadata Classes).

- In the RegistrationBooth.Web project the file RegistrationDomainService.metadata.cs contains the metadata classes, we will change the AttendeeMetadata class to add some validation attributes to the different Attendee properties, you can read more about validation attributes at How To Validate Data, the final AttendeeMetadata should be as follows

 internal sealed class AttendeeMetadata
        {
            private AttendeeMetadata()
            {
            }
 
            [Required(ErrorMessage = "You must enter company name", AllowEmptyStrings = false)]
            [Display( Name="Company Name",Description="Name of your company")]
            public string Company { get; set; }
 
            public DateTime CreationDate { get; set; }
 
            [Required(ErrorMessage = "You must enter email", AllowEmptyStrings = false)]
            [Display( Name = "Email",Description="your Email Address")]
            [RegularExpression(@"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*", ErrorMessage="Invalid email format")] 
            public string Email { get; set; }
 
            [Required(ErrorMessage="You must enter first name",AllowEmptyStrings=false)]
            [Display( Name = "First Name",Description="Your First Name")]
            public string FirstName { get; set; }
 
            public int Id { get; set; }
 
            [Required(ErrorMessage = "You must enter last name", AllowEmptyStrings = false)]
            [Display( Name = "Last Name",Description="Your Last Name")]
            public string LastName { get; set; }
 
            public byte[] Photo { get; set; }
 
            public EntityCollection<SessionAttendee> SessionAttendees { get; set; }
        }
 

- We added RequriedAttribute for the required properties and specified the error messages that should appear if a required property is missing, the DisplayAttribute is used to provide the name (that is used as the label of the corresponding control) and the description (which appears as a ToolTip against the corresponding control), we also used a RegularExpressionAttribute for the email property to make sure that the users enter only valid email addresses.

- These metadata classes are automatically copied to the Silverlight project and compiled as part of the Silverlight application, to see this go to the RegistrationBooth project and show all the files, you will find a folder called Generated_Code, inside this folder you will find a file RegistrationBooth.Web.g.cs that contains all the classes defined on the server and shared by the client, this sharing of code allows the validation that we specified by the attributes to run directly on the client side.

- Now our entity class has the necessary metadata required for validation, let’s see how we will make use of this in creating our UI.

- We will use the DataForm control, the DataForm control can read the data annotations specified on the object class that this control is bound to.

- So to start open Home.xaml and delete the user control and the Save button, also delete the btnSave_Click method.

- From the toolbox drag and drop a DataForm control on the page, name it dfAttendee.

- Set the ItemsSource property to a binding to the element attendeeDomainDataSource and the Path is the Data property

- Because we will use the DataForm only for adding new items, we need to show only the save button, we can control what buttons (Add, Edit, Delete, Navigation, etc) should appear on the DataForm using the CommandButtonsVisibility property, so we will set this property to Commit.

- To make the DataForm open in “AddNew” mode, write the following line of code in the Page_Loaded event handler

  private void Page_Loaded(object sender, System.Windows.RoutedEventArgs e)
        {
            dataForm1.AddNewItem();
        }
 

- The DataForm control can automatically create a UI based on the properties of the entity that it’s bound too, but we will not use this default template because for the Photo property of the Attendee class we need to make use of the Web Cam to capture the image, so we will create a custom template for Adding Items, in the DataForm control you can specify different template for each mode so you can have a template for the view, template for the edit and a template for adding new item, in our case we need only the new item template.

- We will copy the same controls we had in the RegisterAttendee user control, we will bound the text boxes to the corresponding attendee properties, we will put each text box inside a DataField.

- The complete markup of the DataForm is shown below

 <toolkit:DataForm x:Name="dfAttendee" CommandButtonsVisibility="Commit"
              ItemsSource="{Binding ElementName=attendeeDomainDataSource, Path=Data}"
                   Height="273" Width="545"           >
                <toolkit:DataForm.NewItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="10*" />
                                <RowDefinition Height="10*" />
                                <RowDefinition Height="10*" />
                                <RowDefinition Height="10*" />
                                <RowDefinition Height="25*"/>
                            </Grid.RowDefinitions>
 
                               <toolkit:DataField Grid.Row="0" >
                                <TextBox Height="23" HorizontalAlignment="Left" Margin="0,12,0,0" Text="{Binding FirstName,Mode=TwoWay}" 
                 VerticalAlignment="Top" Width="120" />
                            </toolkit:DataField>
                            <toolkit:DataField Grid.Row="1" >
                                <TextBox  Height="23" HorizontalAlignment="Left" Margin="0,12,0,0" Text="{Binding LastName,Mode=TwoWay}" 
                 VerticalAlignment="Top" Width="120" />
                            </toolkit:DataField>
                            <toolkit:DataField Grid.Row="2" >
                                <TextBox  Height="23" HorizontalAlignment="Left" Margin="0,12,0,0" Text="{Binding Email,Mode=TwoWay}" 
                 VerticalAlignment="Top" Width="120" />
                            </toolkit:DataField>
                            <toolkit:DataField Grid.Row="3" >
                                <TextBox  Height="23" HorizontalAlignment="Left" Margin="0,12,0,0" Text="{Binding Company,Mode=TwoWay}" 
                 VerticalAlignment="Top" Width="120" />
                            </toolkit:DataField>
                            <toolkit:DataField x:Name="dfPhoto" Grid.Row="4" >
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="20*" />
                                        <ColumnDefinition Width="10*" />
                                        <ColumnDefinition Width="20*" />
                                    </Grid.ColumnDefinitions>
                                    <Rectangle x:Name="videoStream" Grid.Column="0" ></Rectangle>
                                    <ToggleButton Grid.Column="1" Height="30" Margin="0,41,0,62" Name="btnStart" Click="btnStart_Click">Start</ToggleButton>
                                    <Button Grid.Column="1" Height="30" Margin="0,77,0,26" Name="btnCapture" Click="btnCapture_Click">Capture</Button>
                                    <Image x:Name="capturedImage" Source="{Binding Path=Photo,Mode=TwoWay, Converter={StaticResource imageConverter}}" Grid.Column="2" ></Image>
                                </Grid>
                            </toolkit:DataField>
 
                        </Grid>
                    </DataTemplate>
                </toolkit:DataForm.NewItemTemplate>
            </toolkit:DataForm>
 

- if you examine the Image control at the end of the template you can see that this control is bound to the Photo property and it uses the ImageConverter class to do the conversion, we introduced the ImageConverter class in the first post and we implemented the Convert method that converts the Photo property which is a byte array to a bitmap that can be displayed in the Image control, now when we are adding a new item there will be already an image in the Image control (that we will capture using the web cam) so now we need to convert the bitmap from the Image control to a byte array that will be assigned to the Photo property, so we need to implement the second method of the Converter which is the ConvertBack method

  public object ConvertBack(object value, Type targetType, object parameter, 
            System.Globalization.CultureInfo culture)
        {
             
            var bitmap = value as WriteableBitmap;
            var img = bitmap.ToImage();
            byte[] ba;
 
            var encoder = new PngEncoder();
            MemoryStream stream = new MemoryStream();
            encoder.Encode(img, stream);
 
 
            ba = stream.ToArray();
            stream.Close();
            return ba;
        }
 

- Now we need to write the event handlers for the two buttons (btnStart, btnCapture) which are inside the new item template, the code is shown below.

 private void btnStart_Click(object sender, RoutedEventArgs e)
        {
            ToggleButton btnStart = sender as ToggleButton;
 
            if (btnStart.IsChecked.Value)
            {
                StartWebcam();
                btnStart.Content = "Stop";
            }
            else
            {
                StopWebcam();
                btnStart.Content = "Start";
            }
        }
 
        private CaptureSource cs = null;
 
        private void btnCapture_Click(object sender, RoutedEventArgs e)
        {
            cs.CaptureImageAsync();
        }
 
        private void StartWebcam()
        {
            if (CaptureDeviceConfiguration.AllowedDeviceAccess ||
                CaptureDeviceConfiguration.RequestDeviceAccess())
            {
                VideoCaptureDevice vcd = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();
                if (null != vcd)
                {
                    cs = new CaptureSource();
                    cs.VideoCaptureDevice = vcd;
                    cs.Start();
                    VideoBrush videoBrush = new VideoBrush();
                    videoBrush.Stretch = Stretch.UniformToFill;
                    videoBrush.SetSource(cs);
                    Rectangle videoStream = dfAttendee.FindNameInContent("videoStream") as Rectangle;
 
                    videoStream.Fill = videoBrush;
                    cs.CaptureImageCompleted += new EventHandler<CaptureImageCompletedEventArgs>(cs_CaptureImageCompleted);
                }
                else
                {
                    MessageBox.Show("Error initializing Webcam");
                }
            }
        }
        private void StopWebcam()
        {
            if (null != cs)
            {
                cs.Stop();
            }
        }
        void cs_CaptureImageCompleted(object sender, CaptureImageCompletedEventArgs e)
        {
            Image capturedImage = dfAttendee.FindNameInContent("capturedImage") as Image;
            capturedImage.Source = e.Result;
        }
 

- The code is almost identical to the code that we had inside the user control, except for the way we access the controls inside the template, for example the rectangle that displays the live stream of the web cam (videoStream) to get a reference to this rectangle we use the DataForm method FindNameInContent.

- As we mentioned previously to push the changes done locally to the server we need to call the domain data source SubmitChanges method, so whenever we click the Ok button in the DataForm we will call the SubmitChanges method to immediately submit the new attendee to the server, we can do this by adding an event handler to the DataForm EditEnded event, as shown below

 private void dfAttendee_EditEnded(object sender, DataFormEditEndedEventArgs e)
        {
            if (e.EditAction == DataFormEditAction.Commit)
            {
                attendeeDomainDataSource.SubmitChanges();
            }
        }
 

- Run the application and examine the labels of the controls and the tooltip that shows the description of each property.

- Try to save without entering any data to see the client side validation in action.

- The only thing missing is printing the name tag for the attendee, to do this add event handler for the domain data source SubmittedChanges event, this event is called after the SubmitChanges method is executed at the server, in this event handler we check to see if the attendee was successfully saved then we print the name tag, the code is shown below

  Attendee newAttendee;
        private void attendeeDomainDataSource_SubmittedChanges(object sender, SubmittedChangesEventArgs e)
        {
            
            if (e.ChangeSet.AddedEntities.Count > 0 && e.HasError ==false)
            {
                newAttendee = e.ChangeSet.AddedEntities[0] as Attendee;
                if (newAttendee != null)
                {
                    PrintDocument document = new PrintDocument();
                    document.PrintPage += new System.EventHandler<PrintPageEventArgs>(document_PrintPage);
                    document.Print("Attendee_" + newAttendee.Id);
                }
            }
        }
 

- Unfortunately this code will not work, you will get Exception “Dialogs must be user-initiated” this is a Silverlight 4 built-in security measure (read more here), to resolve this issue we will change our code to show a button once the attendee is saved and we will move the printing code to this button Click event handler, the modified code is shown below

 <Button Content="Print Name Tag" Width="200" 
                    Click="btnPrintNameTag_Click" x:Name="btnPrintNameTag" 
                    Visibility="Collapsed" ></Button>
 

  Attendee newAttendee;
        private void attendeeDomainDataSource_SubmittedChanges(object sender, SubmittedChangesEventArgs e)
        {
            
            if (e.ChangeSet.AddedEntities.Count > 0 && e.HasError ==false)
            {
                newAttendee = e.ChangeSet.AddedEntities[0] as Attendee;
                if (newAttendee != null)
                {
                    btnPrintNameTag.Visibility = Visibility.Visible;
                }
            }
        }
        private void btnPrintNameTag_Click(object sender, RoutedEventArgs e)
        {
            PrintDocument document = new PrintDocument();
            document.PrintPage += new System.EventHandler<PrintPageEventArgs>(document_PrintPage);
            document.Print("Attendee_" + newAttendee.Id);
            btnPrintNameTag.Visibility = Visibility.Collapsed;
        }
 

That’s all for this post, next time we will continue :).

You can download the code from here.

Silverlight 4.0 Tutorial (2 of N)

Mohamed Mosallem — Mon, 09 Aug 2010 10:48:04 GMT

Read Part 1 here

Continuing our RegistrationBooth Application, in the previous post we ended having a data grid that displays all the attendees, let’s now implement the interface for registering a new attendee

- We will create a user control for registering a new attendee, right click the Views folder in the RegistrationBooth project, select add new item, choose Silverlight User Control and name it RegisterAttendee.

- Use the VS designer to add two columns for the LayoutRoot grid, one for the labels of the controls and the other for the controls, create also five rows for the different properties.

- Add the four labels and four text boxes to the first four rows of the grid, these controls will be used for the FirstName, LastName, Email and company properties.

- The fifth row will be for the photo, will use the Silverlight 4.0 new feature that allows us to access the webcam, so add a “Photo” label in the first column of this row, and in the second column add a Grid with three columns, put a rectangle in the first column, the second column should contain a ToggleButton (Start) and Capture button, and put image control in the third column.

- What we will do is that:

1- When the user clicks the Start button, we will start displaying the video stream coming from the default web cam attached and display this video stream in the left rectangle.

2- When the users clicks the Capture button we will take a snapshot of the web cam video stream and display it in the image control to use it as a picture of the attendee

- The final UI should look like the following

- Add events handlers for the Start and Capture buttons click events

- Modify the code to be as follows

  private CaptureSource cs = null;
        private void btnStart_Click(object sender, RoutedEventArgs e)
        {
            if (btnStart.IsChecked.Value)
            {
                StartWebcam();
                btnStart.Content = "Stop";
            }
            else
            {
                StopWebcam();
                btnStart.Content = "Start";
            }
        }
        private void btnCapture_Click(object sender, RoutedEventArgs e)
        {
            cs.CaptureImageAsync();
        }
        private void StartWebcam()
        {
            if (CaptureDeviceConfiguration.AllowedDeviceAccess || 
                CaptureDeviceConfiguration.RequestDeviceAccess())
            {
                VideoCaptureDevice vcd = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();
                if (null != vcd)
                {
                    cs = new CaptureSource();
                    cs.VideoCaptureDevice = vcd;
                    cs.Start();
                    VideoBrush videoBrush = new VideoBrush();
                    videoBrush.Stretch = Stretch.UniformToFill;
                    videoBrush.SetSource(cs);
                    videoStream.Fill = videoBrush;
                    cs.CaptureImageCompleted += new EventHandler<CaptureImageCompletedEventArgs>(cs_CaptureImageCompleted);
                }
                else
                {
                    MessageBox.Show("Error initializing Webcam");
                }
            }
        }
        private void StopWebcam()
        {
            if (null != cs)
            {
                cs.Stop();
            }
        }
        void cs_CaptureImageCompleted(object sender, CaptureImageCompletedEventArgs e)
        {
            capturedImage.Source = e.Result;
        }
 

- The code is pretty easy,first we request access to the device this will prompt the user requesting his approval for the webcam, after that we initialize a new CaptureSource object and set its VideoCaptureDevice to the default device, then we create a new VideoBrush that uses the capture source we created, then we use this brush to paint the rectangle, we also attach an event handler to the CaptureImageCompleted event so that we set the our image control Source to the image that we will capture (when we click the capture button).

- Include the user control in the Home.xaml page, put it below the data grid.

- Build and run the application, you will be able to start/stop the web cam and capture an image to be displayed in the image control.

- Let’s start writing the code that will actually saves the attendee to the database, add the following code to the RegisterAttendee user control, this code define some properties that retrieves the values of the controls on the user control.

 public string FirstName { get { return txtFirstName.Text; } }
        public string LastName { get { return txtLastName.Text; } }
        public string Company { get { return txtCompany.Text; } }
        public string Email { get { return txtEmail.Text; } }
        public byte[] Photo
        {
            get
            {
                if (capturedImage.Source == null)
                    return null;
                var bitmap = capturedImage.Source as WriteableBitmap;
                var img = bitmap.ToImage();
                byte[] ba;
 
                var encoder = new PngEncoder();
                MemoryStream stream = new MemoryStream();
                encoder.Encode(img, stream);
 
 
                ba = stream.ToArray();
                stream.Close();
                return ba;
            }
        }
 

- the Photo property make use of the ImageTools for Silverlight library, so make sure to download these dlls and reference them in the project.

- Back to the Home.xaml page, add a button Save below the user control.

- Double click the Save button and add the following code to the Click event handler

 private void btnSave_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            Attendee newAttendee = new Attendee();
            newAttendee.FirstName = ucNewAttendee.FirstName;
            newAttendee.LastName = ucNewAttendee.LastName;
            newAttendee.Company = ucNewAttendee.Company;
            newAttendee.Email = ucNewAttendee.Email;
            newAttendee.Photo = ucNewAttendee.Photo;
            newAttendee.CreationDate = DateTime.Now;
            (attendeeDomainDataSource.Data as DomainDataSourceView).Add(newAttendee);
            attendeeDomainDataSource.SubmitChanges();
        }
 

- Build and run the application, try to register a new attendee with a photo, click the Save button, the attendee should be saved and added to the data grid.

- Another thing we need to do is to print a name tag for the newly registered attendee, we will use the new Silverlight 4.0 printing features.

- What we have to do is to specify the UI that will be printed, here we will add a new user control to the Views folder, will call it PrintNameTag, in this user control we will display the Name of the user, the company and a barcode that we will be generated based on the attendee id. the markup of the user control is shown below

  <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="60*" />
            <RowDefinition Height="60*" />
            <RowDefinition Height="120*" />
        </Grid.RowDefinitions>
 
        <StackPanel Grid.Row="0" Orientation="Horizontal" d:LayoutOverrides="Height">
            <TextBlock FontSize="24" Text="{Binding Name}" FontWeight="Bold" />
        </StackPanel>
        <TextBlock Grid.Row="1" FontSize="24" TextAlignment="Center" Text="{Binding Company}" FontWeight="Bold"/>
        <TextBlock Grid.Row="2" Text="{Binding Barcode}" FontSize="96" FontFamily="Free 3 of 9" TextAlignment="Center"/>
 
    </Grid>
 

- As you can see the TextBlocks are bounded to the attendee’s different properties, the barcode is generated by using the font “Free 3 of 9” which can be downloaded for free, this font will automatically render the barcode stripes, you better use Expression Blend to change the TextBlock font family to use “Free 3 of 9”, this way Blend will include the necessary build actions that pack the font in the xap file.

- We are now done with the UI that will be printed, to invoke the actual printing, go back to Home.xaml, change the btnSave_Click event handler as follows

 Attendee newAttendee;
        private void btnSave_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            newAttendee = new Attendee();
            newAttendee.FirstName = ucNewAttendee.FirstName;
            newAttendee.LastName = ucNewAttendee.LastName;
            newAttendee.Company = ucNewAttendee.Company;
            newAttendee.Email = ucNewAttendee.Email;
            newAttendee.Photo = ucNewAttendee.Photo;
            newAttendee.CreationDate = DateTime.Now;
            (attendeeDomainDataSource.Data as DomainDataSourceView).Add(newAttendee);
            attendeeDomainDataSource.SubmitChanges();
 
            PrintDocument document = new PrintDocument();
            document.PrintPage += new System.EventHandler<PrintPageEventArgs>(document_PrintPage);
            document.Print("Attendee_" + newAttendee.Id);
        }
        
        void document_PrintPage(object sender, PrintPageEventArgs e)
        {
            PrintDocument document = sender as PrintDocument;
 
            e.PageVisual = new PrintNameTag() { 
                DataContext = new { 
                                    Name =newAttendee.FirstName+" "+newAttendee.LastName,
                                    Company=newAttendee.Company,
                                    Barcode = "ATT" + newAttendee.Id.ToString("00000")
                                } 
            };
        }
 

- First we create an instance of the PrintDocument class which represents a document to be sent to the printer, we attach a handler to the event PrintPage.

- The PrintPage is called for each page that is going to be printed, in the handler we create an instance of the user control (which is the UI that will be printed) and set its DataContext to an anonymous object that contains the needed properties (refer to this post to see how to enable binding to anonymous types in Silverlight), we assign the created user control to the property PageVisual to indicate that this user control will be the source of the print UI.

- Build and run the application, register a new attendee, you should get the print dialog to choose the printer, you can use the Microsoft XPS Document Writer for testing

in the next post we will continue building our application

Download the application from here

Silverlight 4.0 Tutorial (1 of N)

Mohamed Mosallem — Mon, 09 Aug 2010 10:38:05 GMT

I will start writing a set of posts that can be used as a tutorial for using Visual Studio 2010 and Blend 4.0 to build Silverlight 4.0 applications.

so what is the application we are going to build??

Problem Statement

as part of our community activities we hold many offline events, at the event we need to gather the attendees information(sort of onsite registration), give them feedback forms so that they can evaluate the sessions and also use these forms to select winners for the raffle draw.

so i tried to create a simple application that we will host on a PC/Laptop at the event venue, we will call it the RegistrationBooth Application.

Solution

the RegistrationBooth Application will:

- Allows the user to register his/her information through a simple easy interface.

- Automatically print a name tag for the user once registered.

- displays a list of all the registered users.

- displays the event agenda.

- allows the users to easily evaluate the sessions they attended.

- allows the user to print attendance certificate.

Building the Application

- So let’s create a new Silverlight project using the “Silverlight Business Application” template, let’s call it RegistrationBooth.

- The first thing to do is to create our database, right click the App_Data folder in the RegistrationBooth.Web project and add new item of type SQL Server Database, name it RegistrationBoothDB.

- The database will contain tables for attendees, speakers, sessions and the intermediate tables that represent the n-n relationships between the different tables, the database diagram should be as follows

- After creating the database we should create our data access layer, we will use ADO.NET Entity Framework for that, so let’s go to our RegistrationBooth.Web project and add a new item of type ADO.NET Entity Data Model and name it RegistrationsModel.

- Walk through the wizard to select the database we created earlier and select to include all the tables in the database, use RegistrationBoothDBModel for the model name, the model should look like the following:

- We now have a way to access our database (through the ADO.NET Entity Model) but we can use this only on the server side, to be able to work with our database entities on the client side (Silverlight) we have to expose our ADO.NET Entity Model using WCF RIA Services, RIA Services is a special type of WCF Services that simplifies the development of n-tier Rich Internet Applications.

- In Silverlight you can create a Domain Service class which is a RIA service that exposes CRUD operations over your domain model.

- So add a new Domain Service class to the RegistrationBooth.Web project, name it RegistrationDomainService, the wizard will allow you to choose the DataContext/ObjectContext class, in our case we will select the DataContext created by our ADO.NET Entity Model (you should see it in the drop down list once you built the application)

- You will see a list of the data entities exposed through our data model, select all the entities and enable editing for all of them.

- Examine the RegistrationDomainService.cs file, you will find that there are four methods (Get, Insert, Update, Delete) generated for each entity in the domain model.

- At this point we have a database, data access layer (ADO.NET Entity Model) and a Domain Service class that exposes our model to the Silverlight client

- Now let’s move to the client side and start to create our Silverlight application.

- The first thing we want to display on our home page is a list of the attendees, we can do this easily using VS2010, open the Data Sources windows (from the menu Data->Show Data Sources).

- You will see the RegistrationDomainContext which represents the RegistrationDomainService we added earlier, as you can see inside RegistrationDomainContext you have all the different entities exposed by the domain service, and below each entity you can see the properties of this entity

- One important thing to take care of is the small down arrow beside each entity , when you click this arrow you get a menu that allows you to:

1. choose how to render this entity on the Page (DataGrid or DetailsView)

2. Choose the query (or the Domain Service method) that you will use to retrieve this entity

- Now to display our attendees click the down arrow, make sure that DataGrid is selected, we have only one option for the query (GetAttendeesQuery) cause we only have one method in the Domain Service (GetAttendees) that returns Attendee entities.

- Click the Down arrow beside the CreationDate property and select TextBox to make sure that this property is rendered into a DataGridTextColumn.

- Click the Down arrow beside the Photo property and select Image.

- Drag and Drop the Attendee entity on the Home.xaml page (located in the Views folder), VS will create a DataGrid that contains columns for all the attributes of the Attendee.

- From the properties window, go to the Columns property of the DataGrid and click the 3 dots button to open the Columns Editor dialog.

- Re-order the columns (to be in he same order as shown below), and also increase the widths of the columns.

- We need to change the format of the CreationDate column, so select the column and go to the Binding property, expand the Options panel and select the appropriate string format.

- Run the application now, you will find the rows are displayed (supposing that you had populated the database manually), but the photos are not displayed, if you examine the xaml code for the Photo column you will find that this template column contains Image control whose Source property is bound directly to the Photo attribute, there’s no direct conversion from byte arrays to bitmaps or images in Silverlight, so we need to write a converter to do this

- A converter is a class that implements the IValueConverter interface, so let’s add a new class to the Silverlight project (under the Helpers folder), and call it ImageConverter, the implementation is straightforward (as shown below)

- To use this converter, we will instantiate an instance from this class as application resource, so in the App.xaml file inside the Application.Resources property, define an instance of the converter and give it a key name

- Now back to Home.xaml, change the markup of the Image control inside the Photo column to be as follows

- If you run the application now you should be able to see the photos

in the next post we will continue building our application

Download the application from here