Silverlight

Introducing PDF Viewer for Silverlight/WPF

2012-03-21T16:49:00.000-07:00

Introducing PDF Viewer for Silverlight/WPF:
The long-awaited 2012 Q1 with the first official version of RadPdfViewer is already a fact! This is also the first release of the control for WPF, so don’t forget to check it out in the demos if you have missed it: WPF and Silverlight.
A big “Thank You” to all who tried using RadPdfViewer for Silverlight when it was still in a beta stage for providing such a valuable feedback on the control! We have come a long way with your help and hope that you will enjoy the improvements that the first official version brings out.

For the past few months after we first introduced RadPdfViewer as Beta, we have managed to extend the list of supported PDF features in order to be able to show correctly intrinsic PDF files like the ones normally used in LOB applications. The ameliorations include a wider set of image formats and an extensible architecture for plugging in custom filters. The text rendering system was also rethought and improved to ensure
the professional look of the document preview. We also managed to implement clipping and support for color spaces, further polishing the way PDF files are shown. Last but not least, if you use the control in Silverlight 5, you will now be able to print your documents faster and with less memory footprint, because the control now utilizes the vector printing of Silverlight 5.

In the 2012 Q1 release an MVVM friendly API is introduced, which will help you integrate RadPdfViewer more easily. Following popular demand, the DocumentSource of RadPdfViewer has been implemented as a DependencyProperty, allowing data-binding to a Stream, a URI where a document can be found, or a string representing such a URI. For example, if Source is the property in your view-model which you wish to bind the content of the viewer to, you can do that as follows:

<telerik:RadPdfViewer x:Name="viewer" DocumentSource="{Binding Source, Converter={StaticResource PdfDocumentSourceValueConverter}}" />

PdfDocumentSourceValueConverter is a static resource declared as:
<fixed:PdfDocumentSourceValueConverter x:Key="PdfDocumentSourceValueConverter" />
The toolbar that RadPdfViewer used in the beta has been implemented as a separate control now in order to allow customizations of the functionality provided to the end user.
Here is an example of how a RadToolBar can be wired with the commands of the PdfViewer:
<telerik:RadToolBar DataContext="{Binding ElementName=pdfViewer, Path=Commands}">
…
</telerik:RadToolBar>
After setting the DataContext of the toolbar, you can proceed to fill in buttons bound to the commands of the viewer like this:
<controls:RadButton Padding="4" Command="{Binding OpenPdfDocumentCommand}">
<ToolTipService.ToolTip>
<TextBlock Text="Open" />
</ToolTipService.ToolTip>
<Image Source="/Telerik.Windows.Controls.FixedDocumentViewers;component/Images/open.png" Stretch="None" />
</controls:RadButton>
In this way, you will get the same button that the navigation panel of RadPdfViewer had in the beta version. Only that this time, you can customize the tooltip and the icon or even change the command executed. If you would like to preserve the look of the PdfViewer from the Beta, you can open the demos and copy the content from there. Of course, you can implement other kind of UI just as easily.
Now the experience you get with RadPdfViewer for Silverlight will be much closer to the desktop applications you use for viewing PDFs. What is more, you can build applications with similar look and functionality for Silverlight and WPF with minimal effort.
Happy developing!

ScrollToBottom extension method in ScrollViewer - Silverlight 4

2012-03-07T16:44:00.000-08:00

ScrollViewer is one among the commonly used Silverlight control. When you develop Silverlight application, at some time, you'll come across using ScrollViewer. Using ScrollViewer is straightforward in most of the cases. In some scenarios (like displaying chat history messages, stock history update), we might want to bind values to elements inside the ScrollViewer and then scroll to the bottom in order to make the latest message appear in the visible region.

ScrollToBottom() is one among the several extension methods available for ScrollViewer which helps us to achieve scrolling vertically to the end of the ScrollViewer content. While using this ScrollToBottom() method some developers won't see the ScrollViewer scrolls upto the bottom. So, why it is like that what need to be done to make it work? Let us dive into the implementation of ScrollToBottom() method and find out the solution.

Snippet 1: (ScrollToBottom() implementation)

public static void ScrollToBottom(this ScrollViewer viewer)
{
   if (viewer == null)
   {
       throw new ArgumentNullException("viewer");
   }

   viewer.ScrollToVerticalOffset(viewer.ExtentHeight);
}

As most of us might guess, it scrolls the veritical offset to the
height of the content inside the ScrollViewer. Actually the values for properties like ScrollViewer.ExtentHeight, ScrollViewer.VerticalOffset are not recalculated immediately. It seems that they placed such restrictions due to performance considerations.

We can force to recalculate and update values of related properties by calling the UpdateLayout() method of the ScrollViewer. Anyhow be sure to call the UpdateLayout() only required. Please view the remarks section here at msdn documentation.

Ultimately, calling the UpdateLayout() method on the ScrollViewer before ScrollToBottom() is called will solve the obstacle.

Following is a sample snippet to help you understand the above specified scenario. Try executing the following snippet and inspect the value of ExtentHeight(and related properties) property by inserting the breakpoint in the call to UpdateLayout() method.

Snippet 2:
ScrollViewerTest.xaml

<UserControl x:Class="TestSilverlightApplication1.ScrollViewerTest"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d"
   d:DesignHeight="500" d:DesignWidth="500">
   <Grid Background="DeepSkyBlue">
       <Grid x:Name="LayoutRoot" Background="SkyBlue" Height="300" Width="400">
           <Grid.RowDefinitions>
               <RowDefinition></RowDefinition>
               <RowDefinition Height="Auto"></RowDefinition>
               <RowDefinition Height="70"></RowDefinition>
               <RowDefinition Height="Auto"></RowDefinition>
               <RowDefinition Height="70"></RowDefinition>
               <RowDefinition></RowDefinition>
           </Grid.RowDefinitions>
           <StackPanel>
               <TextBlock Text="ScrollToBottom Check" HorizontalAlignment="Center" FontWeight="Bold" ></TextBlock>

           </StackPanel>
           <TextBlock Grid.Row="1" Text="Enter multiline text here......"></TextBlock>
           <ScrollViewer Grid.Row="2">
               <TextBox AcceptsReturn="True" Text="{Binding SampleTextString, Mode=TwoWay}"></TextBox>
           </ScrollViewer>
           <Button Content="...and click here...." Click="ScrollDownCheck_Click" Width="150" Grid.Row="3" Margin="10"></Button>
           <ScrollViewer Grid.Row="4" Name="TestScrollControl">
               <TextBox AcceptsReturn="True" Name="TestTextBox" Text="{Binding AlteredTextString}"></TextBox>
           </ScrollViewer>
       </Grid>
   </Grid>
</UserControl>

ScrollViewerTest.xaml.cs

using System.Windows;
using System.Windows.Controls;
using System.ComponentModel;

namespace TestSilverlightApplication1
{
   public partial class ScrollViewerTest : UserControl, INotifyPropertyChanged
   {
       public ScrollViewerTest()
       {
           InitializeComponent();
           InitControls();
       }

       private string sampleTextString;

       public string SampleTextString
       {
           get { return sampleTextString; }
           set
           {
               sampleTextString = value;
               NotifyPropertyChanged("SampleTextString");
           }
       }

       private string alteredTextString;

       public string AlteredTextString
       {
           get { return alteredTextString; }
           set
           {
               alteredTextString = value;
               NotifyPropertyChanged("AlteredTextString");
           }
       }
       
       private void ScrollDownCheck_Click(object sender, RoutedEventArgs e)
       {
           ManipulateScrollDownCheck();
       }

       private void InitControls()
       {
           this.DataContext = this;
       }

       private void ManipulateScrollDownCheck()
       {
           this.AlteredTextString = this.SampleTextString;
           //Insert breakpoint here and validate the value of
           //ExtentHeight before and after the execution of UpdateLayout().
           TestScrollControl.UpdateLayout();
           TestScrollControl.ScrollToBottom();
       }

       #region INotifyPropertyChanged Members

       protected void NotifyPropertyChanged(string propertyName)
       {
           if (PropertyChanged != null)
           {
               PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
           }
       }

       public event PropertyChangedEventHandler PropertyChanged;

       #endregion
   }
}

You can infer from the above example that the call to UpdateLayout() is made before calling ScrollToBottom() and after assinging the value to the property bound to the content(UIElement contained inside the ScrollViewer) of the ScrollViewer. Since developers will face such problem only at certain workflows, call the UpdateLayout() only when you encounter that problem.

Reference
http://msdn.microsoft.com/en-us/library/system.windows.controls.scrollviewer.scrolltoverticaloffset(v=vs.95).aspx
http://msdn.microsoft.com/en-us/library/system.windows.controls.scrollviewer.scrolltobottom.aspx
https://epiinfo.svn.codeplex.com/svn/Silverlight.Controls.Toolkit/Controls.Toolkit/Common/ScrollViewerExtensions.cs

Unauthorized access exception when value set for property using Secondary Thread - Silverlight

2012-03-04T04:40:00.000-08:00

Thinking about threading in Silverlight 4, we choose between the two options

Background worker
Managing thread manually

Most of the time-consuming operations will be handled using the Background worker without blocking the UI. It ultimately executes in a separate thread. The main functions and events to know in Background worker are DoWork, RunWorkerCompleted and RunWorkerAsync. As the name specifies we need to add the event handler for DoWork event for doing the background operation. Add the handler for RunWorkerCompleted to receive the operation completed notification. RunWorkerAsync method is to start the operation. The main thing to note is that we should not access directly access the UI objects from the DoWork event.

Also there are times where we need to manage the threads manually. Since Silverlight runs in a Single threaded apartment (STA) application model and the default is the UI thread, accessing the UI objects from other thread leads to cross thread exception. Knowing this fact I worked with a secondary thread and updated a property in my ViewModel. In that scenario I got an exception and digging into the inner exception found out the cross thread exception. For understanding I've created a sample scenario that raises exception.

Snippet 1

public partial class ThreadTest : UserControl, INotifyPropertyChanged
{      
  private string textValue;
  public string TextValue
  {
      get { return textValue; }
      set
      {
          textValue = value;
          NotifyPropertyChanged("TextValue");
      }
  }

  public ThreadTest()
  {
      InitializeComponent();

      InitControls();
  }

  private void InitControls()
  {
      this.DataContext = this;
  }

  private void Direct_Click(object sender, RoutedEventArgs e)
  {
      TextValue = "direct text......";
  }

  private void UsingTask_Click(object sender, RoutedEventArgs e)
  {
      Thread secondaryThread = new Thread(SecondaryThreadWorker);
      secondaryThread.Start();
    
  }

  private void SecondaryThreadWorker()
  {
      TextValue = "thread text.......";          
  }


  #region INotifyPropertyChanged Members

  protected void NotifyPropertyChanged(string propertyName)
  {
      PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
  }

  public event PropertyChangedEventHandler PropertyChanged;

  #endregion
}

Then examining the cause, realized that the specific property raises an property changed notification . Immediately recalled the excellent article from Pete Brown in his 10rem.net blog.

The following implementation does the trick.

Snippet 2 (Just replace the INotifyPropertyChanged implementation)

#region INotifyPropertyChanged Members

protected void NotifyPropertyChanged(string propertyName)
{
  if (PropertyChanged != null)
  {
      if (Deployment.Current.Dispatcher.CheckAccess())
      {
          PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
      }
      else
      {
          Deployment.Current.Dispatcher.BeginInvoke(() =>
          {
              PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
          });
      }
  }
}

public event PropertyChangedEventHandler PropertyChanged;

#endregion

When I typed "Deployment.Current.Dispatcher.", it didn't show up the "CheckAccess()" method in the intellisense. But I verified it in the object which shows the existence of the method. So I manually typed the "CheckAccess()" method name and got complied without error.

References
http://10rem.net/blog/2012/01/10/threading-considerations-for-binding-and-change-notification-in-silverlight-5

silverlight 5: Slides and Code

2012-03-02T10:04:00.001-08:00

Powerpoint Slides
Attached to this post
Demos and Examples
The Big List of What's New or Improved in Silverlight 5 - Pete Brown's 10rem.net
Threading Considerations for Binding and Change Notification in Silverlight 5
Creating Big Silverlight Windows and Getting Monitor Resolutions and Positions with PInvoke
Silverlight 5: Using the SoundEffect Class for Low-Latency Sound (and play WAV files in Silverlight)
Silverlight 5: Working with Operating System Windows
Silverlight 5: Working with Implicit Templates
Silverlight 5: Debugging Bindings with Xaml Breakpoints
Silverlight 5: Supporting Double and Even Triple Click for the Mouse

Supporting both Double and Triple Click in Silverlight 5 (article with the timer approach)
Silverlight 5: Advancements in Text
My Book
Silverlight 5 in Action
Downloads
Download the 3D House Builder Demo Application
See the Babylon 3d Engine on CodePlex
Related Links
Silverlight 5 Page on Silverlight.net
Announcing the Silverlight 5 Beta Release and the Silverlight.net Redesign
Previous Versions
Slides, Videos, and Downloads from my Tech Ed Atlanta 2011 and Recent User Group Talks
Updated Slides and Demos from VSLive Redmond 2011
by

by @pete_brown

Prism/WPF/Silverlight - setting ItemsControl height and width to full view using DockPanel style

2011-11-06T01:43:00.000-07:00

Prism/WPF/Silverlight - setting ItemsControl height and width to full view using DockPanel style:

Figure 2 is the MainRegionTopContentBottom view that Prism will inject three views into (top, content and bottom). When the view is inserted into the MainRegion ItemsControl of figure 1 below the MainRegionTopContentBottom view is compressed vertically - we want it to fill the entire MainWindow.

Figure 1.

Wen we apply the ItemsControlDockedStyle (figure 3) to the MainRegion ItemsControl above we get expected results for the MainRegionTopContentBottom view (see below where the statusbar is at the bottom of the window) but not for the contents that are injected into its three regions - its ItemsControls also cause the contents to be compressed.

Figure 2.

Figure 3.

Once we apply the ItemsControlDocked style to each of the ItemsControl we get the expected behavior as shown in the image below:

Figure 4.

We can use the same view for both WPF Desktop and Silverlight with minor variation - for Silverlight we'll have to first install the Silverlight toolkit (available here for Silverlight 5) and then provide a reference to it in xaml as shown on line 4 of the image below:

With the above styles we achieve the results we need for both our Desktop and Silverlight applications (which share the same code).

Figure 5.

Binding Events to Methods in the Silverlight MVVM View Models

2011-09-13T07:58:00.000-07:00

Download example - 73.95 KB

Introduction

This article introduces a simple method to bind UI events to the corresponding methods in the MVVM view models in Silverlight applications.

Background

In order to fully conform to the MVVM design pattern in Silverlight, we may want to move the event handling functions into the view models. Generally speaking, we have two types of UI components and two types of UI events in Silverlight applications.

UI controls like a Button have a property called Command. We can create a command property in the view model to handle the click event of the button by binding this command property in the view model to the button control's command property in the XAML. For detailed information about the command bindings, you can take a look at my recent article, "Data and Command Bindings for Silverlight MVVM Applications".
Unfortunately though, most of the UI events like "MouseEnter", "MouseLeave", and "SizeChanged", etc. do not have the corresponding Commands, we are unable to implement the ICommand interface to handle these events in the MVVM view models.

This article is to introduce a method to bind these events to the corresponding methods in the view models in Silverlight applications, so we can implement all the event handling functions in the view models, thus minimizing the code-behind files of the XAML views.

The attached Visual Studio solution is developed in Visual Studio 2010 and Silverlight 4. This solution has two projects.

The "EventBindingExample" project is the Silverlight application. In this project, I will be demonstrating how to bind UI events from the XAML views to the methods in the view models.
The "EventBindingExampleWeb" project is an ASP.NET project to host the Silverlight application. The Silverlight application is hosted in the "EventBindingExampleTestPage.aspx" page. The "EventBindingExampleWeb" project is the default Silverlight host web project created by the Visual Studio.

To use the event binding method in this article, you need the "Microsoft Expression Blend SDK". If you have not done so, you need to download the SDK and install it on your computer. In particular, to bind the UI events to the corresponding methods in the view models, you need to add a reference to the "Microsoft.Expression.Interactions.dll", which comes with the Blend SDK. You will also need to add a reference to the "System.Windows.Interactivity.dll".
After adding the references to these two DLLs, binding UI events to the methods in the Silverlight view models becomes very simple. We will now take a look at the implementations of the Silverlight project "EventBindingExample" to find out how the event binding is achieved. We will first take a look at the view model.

The View Model

The "EventBindingExample" project is a simple Silverlight application, which does not have a data model. The following is the view model class "MainPageViewModel" implemented in the "ViewModels\MainPageViewModel.cs" file.

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.ComponentModel;
 
namespace EventBindingExample.ViewModels
{
    public class MainPageViewModel : INotifyPropertyChanged
    {
        // Implementation of INotifyPropertyChanged interface
        public event PropertyChangedEventHandler PropertyChanged;
        protected void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
 
        // Properties
        private string displayText;
        public string DisplayText
        {
            get { return displayText; }
            private set
            {
                displayText = value;
                NotifyPropertyChanged("DisplayText");
            }
        }
 
        // Public methods
        public void WndSizeChanged(object sender, SizeChangedEventArgs e)
        {
            DisplayText = "Window height: " + e.NewSize.Height.ToString()
                + " Window Width: " + e.NewSize.Width.ToString();
        }
    }
}

Besides implementing the INotifyPropertyChanged interface, it has a public property and a public method.

The property "DisplayText" is a string that will be bound to a TextBlock in the XAML view to display the size information for the Silverlight window.
The public method "WndSizeChanged" will be bound to the "SizeChanged" event of the Silverlight window in the XAML view. This method takes the window size information from the "SizeChangedEventArgs" input parameter and uses it to update the "DisplayText" property.

Now let us take a look at how the view model is bound to the XAML view.

The XAML View "MainPage.xaml"

The XAML view that the view model class "MainPageViewModel" is bound to is implemented in the "MainPage.xaml" file:

<UserControl x:Class="EventBindingExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    mc:Ignorable="d" FontFamily="Verdana" FontWeight="SemiBold">
 
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="SizeChanged">
            <ei:CallMethodAction MethodName="WndSizeChanged"
                TargetObject="{Binding}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
 
    <Grid x:Name="LayoutRoot" Background="White"
          VerticalAlignment="Center" HorizontalAlignment="Center">
        <TextBlock Foreground="Green" Text="{Binding Path=DisplayText}" />
    </Grid>
</UserControl>

The "DisplayText" property of the view model class is bound to a TextBlock and the "WndSizeChanged" method in the view model is bound to the "SizeChanged" event of the Silverlight window. In order to make the event binding successful, the signature of the method in the view model needs to match exactly the signature required by the event handler delegate of the bounding event.
Now, we finish this demo Silverlight application. Is it so simple? Will the event binding work? Yes, it works. We can now run the application.

Run the Application

Set the "EventBindingExampleWeb" project as the start up project and set the "EventBindingExampleTestPage.aspx" page as the start page, we can debug run the Silverlight application. When the application starts, the "SizeChanged" event of the Silverlight window fires. This event triggers the method "WndSizeChanged" in the view model to update the "DisplayText" property, so the correct size of the window is displayed for you.
If you change the size of the browser window, you can see that the displayed text is changed as you are changing the window size.

Conclusion

This article demonstrated that we can bind events to the methods in the view models in Silverlight applications. In concluding this article, we will review the two important points when binding events to the methods in the view models in Silverlight applications.

To bind events to the view models in Silverlight applications, you need to use the functionalities provided by the "Microsoft Expression Blend SDK". In particular, you need to add references to the "Microsoft.Expression.Interactions.dll" and the "System.Windows.Interactivity.dll" in your project.
In order to make the event binding successful, the signature of the method in the view model needs to match exactly the signature required by the event handler delegate of the bounding event.

Points of Interest

This simple article introduced a method to bind events to the corresponding methods in the MVVM view models in Silverlight applications.
The method introduced in this article is simple. But it is significant in developing Silverlight MVVM applications because when combined with command binding, we can almost eliminate all the code-behind methods in the XAML views to better conform to the MVVM pattern.
According to Pete Brown, the method introduced in this article may be slightly slower than implementing the event handlers in the code-behind files of the XAML views, because this method uses reflection. The advantage of this method is that it applies to all the UI events fired from all the Silverlight components.
The method introduced here is largely from the book "Silverlight 4 in Action" by Pete Brown. If you are interested in Silverlight development, this book should be a good reference for you.
Once again, MVVM is a good pattern in developing Silverlight applications. But you still need to make your own judgment on a case by case basis. The best design pattern is the pattern that best fits your application's need, regardless if it is MVVM or not.
I hope you like my postings and I hope this article can help you in one way or the other.

History

This is the first revision of this article.

Creación de Prototipos de Proyectos para Windows Phone.

2011-09-12T22:30:00.000-07:00

Este post lo escribi originalmente en mi blog personal el dia 08/08/2011

Cada vez que nos sentamos delante de nuestro ordenador, cada vez que hablamos con nuestro grupo de trabajo o con nuestros compañeros, o porque no cuando queremos mostrar ese proyecto tan molón a nuestro gerente, deberíamos de apoyarnos en un prototipo del mismo. Para ello estos recursos son de lo mejor que podemos usar.

Lápiz y Papel.

Como muy bien dice mi amigo Yeray, a nosotros los programadores esto del “Pinta y Colorea”, se nos da fatal pero no se porque razón buscamos rápidamente un lápiz y un papel para expresar nuestros esquemas o nuestras pantallas, en vez de ir al ordenador y garabatear algo con el Paint, por ejemplo. En fin para todo aquel que se sienta mas cómodo con un bolígrafo en la mano puede descargarse estas plantillas:

Los utensilios de UI Stencils aun siendo de pago, la verdad es que merece y mucho la pena disponer de estas plantillas en acero inoxidable para poder dibujar sobre sus blocs o sobre sus pantallas adhesivas, muy pero que muy recomendable para hacer cosas profesionales.

En la web de Jakub Florczyk, podemos encontrar un Pdf con la plantilla de 4 Windows Phone a tamaño natural, al menos tienen el tamaño de mi HTC 7 Trophy, para realizar nuestros prototipos. Descárgalo desde aquí

Algo parecido podemos encontrar en la web de Michael Dorian, en donde en esta ocasión disponemos de una plantilla de 3 pantallas y el espacio necesario para catalogar nuestros prototipos, como lugar donde escribir el proyecto, la pagina, etc.. Se puede descargar directamente desde aquí.

Fuente original para Windows.

Mas adelante hablaremos de recursos ya para aplicaciones de software, pero lo mas importante es disponer en nuestro sistema de la fuente utilizada en la UI de Windows Phone, en este caso la fuente Segoe. Se dispone de dos ramas, por un lado la fuente Segoe UI, que viene preinstalada con Windows y por otro lado la fuente Segoe WP, que es una variante de la anterior y es realmente la que el interface Metro utiliza. Viene incluida en las Tools de Windows Phone para Visual Studio, pero se puede descargar desde aquí.

Plantillas para aplicaciones genéricas.

Es fácil encontrar por la red innumerables plantillas para diferentes aplicaciones, pero yo estas para Visio, Powerpoint y Photoshop.

Por un lado las plantillas para Microsoft Visio de Griffin Interactive, en donde se incluyen plantillas para proyectos tanto con Pivot como con Panorama Template, las cuales se pueden descargar desde aquí.

Para PowerPoint disponemos de las plantillas de Think first code later, las cuales podemos descargar para realizar nuestras presentaciones con un fondo como si de una pantalla de Windows Phone se tratara, disponibles aquí. O el tema de Vangos Pterneas, el cual nos permite utilizar en nuestras propias presentaciones y apoyarnos en cualquiera de sus slides, esta presentación esta disponible a través de SlideShare desde aquí.

Y finalmente para Photoshop, existen múltiples recursos, pero uno de los principales y a mi modo de ver el mejor, es el compendio de PSDs del propio equipo de desarrollo de Windows Phone, el cual se puede descargar desde aquí. De nuevo, el amigo Vangos Pterneas, nos regala un par de templates tambien muy interesantes para photoshop, la primera de ellas para pantallas simples tanto en orientación portrait como landscape, descargable desde aquí y otra para pantallas Pivot y Panorama, descargable desde aquí Muchas cosas como digo repartidas por la web, pero cabe destacar también estas plantillas para Adobe Illustrator de Clarity Consulting, las cuales se puede descargar desde aquí.

Plantillas para aplicaciones de prototipado.

A parte de poder usar aplicaciones de carácter general, para prototipar, podemos usar, obviamente aplicaciones propias para este tema, Aplicaciones de prototipado, existen como todo innumerables pero yo destaco 3, junto con sus correspondientes templates.

Microsoft SketchFlow:

Aplicación de prototipado de Microsoft que viene con la suite Expression, formando parte, como un complemente diría yo de Microsoft Expression Blend, solo disponible con la versión ultimate de Expression Studio (creo). Herramienta bastante buena, sobre todo si manejamos constantemente Expression Blend, muy integrada y bastante completa. Podemos descargarnos los templates para prototipos de aplicaciones en Windows Phone, desde este espacio en Codeplex.

Axure RP:

He dicho bien, axure que no azure, es una herramienta de prototipado de todo tipo de aplicaciones, entre ellas como no Windows Phone, para ello podemos descargarnos una serie de templates para tal efecto, creadas por Andrej Skaza, las cuales podemos descargar tanto desde Axureland, aquí, como desde Studio Pesec desde aquí, el cual nos muestra también como podemos montar un ejemplo de web con nuestros prototipos exponerlo al exterior para que nuestro cliente por ejemplo lo pueda ver. Podemos verlo aquí.

Omnigraffle:

Otra aplicación de prototipado general, en este caso para MAC, muy utilizada por el mundo iOS pero que gracias a Adrian Mendoza y a su Blog Marlin Mobile, podemos descargarnos desde aquí unos templates para desarrollar prototipos de aplicaciones Windows Phone. A parte de todo esto, existen como no templates directos para desarrollar aplicaciones desde Visual Studio, una de las mas completas es el proyecto “Windows Phone 7 Design Templates” alojado aquí en Codeplex.

Using the MVVM Pattern in Silverlight Applications

2011-09-12T08:43:00.001-07:00

Using the MVVM Pattern in Silverlight Applications

By Microsoft Silverlight Team|December 1, 2010|Level 300 : Intermediate

Download Offline Kit

Overview

Estimated Time: 45 minutes
The Model-View-ViewModel (MVVM) pattern provides a flexible way to build Silverlight applications that promotes code re-use, simplifies maintenance and supports testing. The pattern consists of three different components including the Model (entities and code on the server), the View (the Silverlight screens) and the ViewModel (the glue between the Model and the View). An example of the how the Model, View and ViewModel components relate to each other is shown next:

In this lab exercise you'll learn how to migrate an existing Silverlight application that uses
code-behind files for all of the C# or VB code into a more structured architecture that follows the MVVM pattern. Topics covered include creating a service agent class to handle calls to a WCF service, creating a ViewModelBase class, creating a custom ViewModel class and binding a ViewModel to a View declaratively in XAML. You'll also see how commanding can be used to wire-up events in a View to methods in a ViewModel. The application that you'll work with in the lab exercises is shown next:

It's recommended that you complete the data binding and WCF labs before starting this lab. Some of the steps in the lab will provide the code to use while others will explain the task to perform and let you figure out the code that should be added. If you need help with any of the steps refer to the lab's Completed folder which contains the finished code.

You Will Benefit from this Lab if:

You're interested in building Silverlight applications that take advantage of code re-use, promote testability and reduce maintenance costs
You'd like to separate your Silverlight application into distinct modules and provide a pattern that can be followed by a team of developers
You're interested in learning the MVVM pattern and the benefits it offers

You Will Learn:

How to convert an existing Silverlight application to use the MVVM pattern
The role of the Model, ViewModel and View in the MVVM pattern
How to create a service agent class and the role it can play in an application to promote code re-use
How to create a ViewModel class and handle property change notifications
How to bind a ViewModel class to a View
How to communicate between a View and ViewModel using commanding

Business Requirements for the Silverlight application include:

Remove existing code from a Silverlight code-beside file
Create a service agent interface and class to handle calls to a WCF service
Create a ViewModelBase class to handle INotifyPropertyChanged notifications
Create a ViewModel class that derives from ViewModelBase and handles data interactions
Add support for commanding into a ViewModel class
Bind a ViewModel class to a View in XAML
Bind Silverlight controls to ViewModel properties

Exercise 1: Creating a Service Agent Class

Watch Video

In this exercise you'll remove existing code in a code-beside file and create a service agent class. The service agent class will be used to make calls to a WCF service from within a ViewModel class created later in the lab.

Open the following Visual Studio 2010 solution file based upon your chosen language.

Language Lab Files Location

C# /MVVMPattern/Starting Point/C#/CustomerViewer.sln

Visual Basic /MVVMPattern/Starting Point/VB/CustomerViewer.sln
The following projects are available in the solution:
- CustomerService.Model – Contains entities and data repository classes used to access an AdventureWorks LT database.
- CustomersService – A WCF service application that exposes entities to various applications.
- SilverlightCustomerViewer – A Silverlight project that consumes data from a WCF service.
- SilverlightCustomerViewer.Web – A website project used to host the SilverlightCustomerViewer application.
Right-click CustomerService.svc in the CustomersService project and select View in Browser from the menu. This will start a local WCF server and show details about the service.
Back in Visual Studio, right-click SilverlightCustomerViewerTestPage.html in the SilverlightCustomerViewer.Web project and select View in Browser from the menu. Select customers from the ComboBox control (note that you may have to wait a moment for the customers to load the first time the application is run) and notice that the data for each customer displays in the details area.
Back in Visual Studio, open MainPage.xaml.cs located in the SilverlightCustomerViewer project in the code editor and remove all of the existing code within the MainPage class except the constructor and the call to InitializeComponent.
All of the functionality in the code-beside file will be moved into a ViewModel class that you'll create later in this lab.
Open MainPage.xaml and remove the Click event handlers defined on the two Button controls.
Right-click on the SilverlightCustomerViewer project and select Add ? New Folder. Give the folder a name of ServiceAgents.
Add a new class into the ServiceAgents folder named CustomersServiceAgent.

Language	Lab Files Location
C#	/MVVMPattern/Starting Point/C#/CustomerViewer.sln
Visual Basic	/MVVMPattern/Starting Point/VB/CustomerViewer.sln

Add the following interface immediately above the class and resolve any missing namespaces:

Resolve any missing namespaces by right-clicking on an unknown type and then selecting Resolve in the menu.

C#

public interface ICustomersServiceAgent
{
   void GetCustomers(EventHandler<GetCustomersCompletedEventArgs> callback);
   void SaveCustomer(Customer cust,
     EventHandler<SaveCustomerCompletedEventArgs> callback);
}

Visual Basic

Public Interface ICustomersServiceAgent
    Sub GetCustomers(ByVal callback As _
      EventHandler(Of GetCustomersCompletedEventArgs))
    Sub SaveCustomer(ByVal cust As Customer, _
      ByVal callback As EventHandler(Of SaveCustomerCompletedEventArgs))
End Interface

Implement the ICustomerService interface on the CustomersServiceAgent class.
Add the following field into the CustomersServiceAgent class:
C#
```
CustomerServiceClient _Proxy = new CustomerServiceClient();
```
Visual Basic
```
Dim _Proxy as New CustomerServiceClient()
```
The CustomerServiceClient class is a WCF service proxy class that will be used to communicate with the remote service to retrieve customer data and perform update and delete operations.

Add the following code in the GetCustomers method to handle calling the WCF service operation:

C#

_Proxy.GetCustomersCompleted += callback;
_Proxy.GetCustomersAsync();

Visual Basic

AddHandler _Proxy.GetCustomersCompleted, callback
_Proxy.GetCustomersAsync()

Add the following code in the SaveCustomer method to handle communicating delete and update data operations to the WCF service:

C#

_Proxy.SaveCustomerCompleted += callback;
_Proxy.SaveCustomerAsync(cust);

Visual Basic

AddHandler _Proxy.SaveCustomerCompleted, callback
_Proxy.SaveCustomerAsync(cust)

Exercise 2: Creating a ViewModel Class

In this exercise you'll create a ViewModelBase class that provides core functionality that can be used by one or more ViewModel classes. You'll then derive from ViewModelBase and create a ViewModel class that will be used to retrieve and manipulate customer data used in the MainPage.xaml View.

Locate the file named mvvmInpcPropertyCS.snippet (for C#) or mvvmInpcPropertyVB.snippet (for VB) in the SilverlightCustomerViewer/CodeSnippets folder.

Copy the file for your chosen language to the following location (or use Tools ? Code Snippets Manager in Visual Studio to import it):

Language	Lab Files Location
C#	Documents\Visual Studio 2010\Code Snippets\Visual C#\My Code Snippets
Visual Basic	Documents\Visual Studio 2010\Code Snippets\Visual Basic\My Code Snippets

The mvvmInpc snippet will be used to create properties within a ViewModel class later in this lab. It's one of several snippets available in MVVM Light (http://mvvmlight.codeplex.com) and has been modified for use in this lab exercise.

Right-click on the SilverlightCustomerViewer project and select Add ? New Folder. Give the folder a name of ViewModels.
Add a new class into the ViewModels folder named ViewModelBase and mark it as abstract (C#) or MustInherit (VB).
Implement the INotifyPropertyChanged interface on the class and resolve the namespace.
INotifyPropertyChanged is an important interface in Silverlight used by the data binding engine to notify controls and other objects when a bound property value changes. By implementing INotifyPropertyChanged on the ViewModelBase class you can write the code once and re-use it across multiple ViewModel classes. The interface is located in the System.ComponentModel namespace.
Once the interface has been implemented on the ViewModelBase class, add a method named OnPropertyChanged into ViewModelBase to handle raising the PropertyChanged event from the INotifyPropertyChanged interface.
If you need help with this step please refer to the ViewModelBase class in the lab's Completed folder. Creating an OnPropertyChanged method was covered in the data binding lab.
Add a new public Boolean property into the ViewModelBase class named IsDesignTime.
Add a get block (but no set block) into the property that returns DesignerProperties.IsInDesignTool as the value. Resolve any namespaces as needed.
When using the MVVM pattern and ViewModel classes it's important to know when code is executing in a design-time tool such as Visual Studio or Expression Blend and when it's executing at runtime. When code runs in a design tool network calls will not execute properly and can error out the designer. The IsDesignTime property will be used to detect where code is running to ensure that ViewModel classes execute properly at design-time.
Add a new class into the ViewModels folder named MainPageViewModel that derives from ViewModelBase .
Add the following properties into MainPageViewModel using the mvvmInpc code snippet and resolve any missing namespaces as necessary (type mvvmInpc + tab + tab to use the snippet in C# or mvvminpc + tab to use the snippet in VB):

Property Name Property Type

Customers ObservableCollection of Customer

CurrentCustomer Customer

StatusMessage string

If you need help with creating the properties in this step refer to the MainPageViewModel class in the lab's Completed folder.
Within the CurrentCustomer property's set block add code to set the StatusMessage property to empty strings (add the code within the existing "if" statement).
Add another property named ServiceAgent of type ICustomersServiceAgent and resolve the namespace (create it as a standard .NET property).

Property Name	Property Type
Customers	ObservableCollection of Customer
CurrentCustomer	Customer
StatusMessage	string

Add the following methods into MainPageViewModel to handle retrieving, updating and deleting customer objects:

The ObjectState parameter used in the following code is automatically created by the WCF proxy generator when using self-tracking entities in Entity Framework 4. By changing the object state we can easily track whether delete or update operations should occur for a given Customer object.

C#

private void GetCustomers()
{
    ServiceAgent.GetCustomers((s, e) => Customers = e.Result);
}
public void UpdateCustomer()
{
    SaveCustomer(ObjectState.Modified);
}
public void DeleteCustomer()
{
    SaveCustomer(ObjectState.Deleted); 
    Customers.Remove(CurrentCustomer);
    CurrentCustomer = null;
}
private void SaveCustomer(ObjectState state)
{
    CurrentCustomer.ChangeTracker.State = state;
    ServiceAgent.SaveCustomer(CurrentCustomer, (s, e) =>
    {
        StatusMessage = (e.Result.Status) ? "Success!" : 
          "Unable to complete operation";
    });
}

Visual Basic

Private Sub GetCustomers()
    ServiceAgent.GetCustomers(Sub(s, e) Customers = e.Result)
End Sub
 Public Sub UpdateCustomer()
    SaveCustomer(ObjectState.Modified)
End Sub
 Public Sub DeleteCustomer()
    SaveCustomer(ObjectState.Deleted)
    Customers.Remove(CurrentCustomer)
    CurrentCustomer = Nothing
End Sub
 Private Sub SaveCustomer(ByVal state As ObjectState)
    CurrentCustomer.ChangeTracker.State = state
    ServiceAgent.SaveCustomer(CurrentCustomer, _
    Sub(s, e) StatusMessage = _
        If(e.Result.Status, "Success!", "Unable to complete operation"))
End Sub

Add the following constructors into MainPageViewModel:
C#
```
public MainPageViewModel() : this(new CustomersServiceAgent())
{
}
 public MainPageViewModel(ICustomersServiceAgent serviceAgent)
{
    if (!IsDesignTime)
    {
        if (serviceAgent != null) ServiceAgent = serviceAgent;
        GetCustomers();

    }
}
```
Visual Basic
```
Public Sub New()
    Me.New(New CustomersServiceAgent())
End Sub
 Public Sub New(ByVal serviceAgent As ICustomersServiceAgent)
    If Not IsDesignTime Then
        If serviceAgent IsNot Nothing Then
            Me.ServiceAgent = serviceAgent
        End If
        GetCustomers()

    End If
End Sub
```
The first constructor will be called if the ViewModel is instantiated without any parameters. It passes a new instance of the CustomersServiceAgent object to the second constructor which assigns it to the ServiceAgent property when not in design mode (note that instead of hard coding the service agent type it could be injected using a dependency injection framework). The second constructor accepts any object that implements the ICustomersServiceAgent interface allowing mock objects to be passed in for the service agent when testing the ViewModel class. Following this pattern provides a flexible way to work with different types of service agent objects when the application is running as well as when tests need to be executed.
Ensure that the SilverlightCustomerViewer project compiles before proceeding to the next exercise.

Exercise 3: Handling Commands and Binding to a ViewModel

In this exercise you'll add commanding support into the SilverlightCustomerViewer project. Commanding allows events triggered in a View such as a Button's Click event to be routed directly to a ViewModel instance without having to add code in a code-beside file. You'll be introduced to the ICommand interface as well as a RelayCommand class that will be used within MainPageViewModel to handle commands. Finally, you'll bind MainPageViewModel to a View using a declarative binding syntax.

Open the Commanding/RelayCommand.cs class in the SilverlightCustomerViewer project and note that it implements ICommand. This interface is required in order for a Silverlight application to support commanding.
Commanding is the process of forwarding events that occur in the user interface to a ViewModel object for processing at runtime. The RelayCommand class will be used to wire properties in a ViewModel to methods that are invoked when any control derived from ButtonBase is clicked in a View. It satisfies the ICommand interface allowing commanding to be used in Silverlight MVVM applications.

Add the following code into MainPageViewModel to create properties capable of binding to controls that expose a Command property. Resolve the required namespace.

C#

public RelayCommand UpdateCustomerCommand
{
    get;
    private set;
}
 public RelayCommand DeleteCustomerCommand
{
    get;
    private set;
}

Visual Basic

Private _UpdateCustomerCommand As RelayCommandPublic Property UpdateCustomerCommand() As RelayCommand
    Get
        Return _UpdateCustomerCommand
    End Get
    Private Set(ByVal value As RelayCommand)
        _UpdateCustomerCommand = value
    End Set
End Property
Private _DeleteCustomerCommand As RelayCommandPublic Property DeleteCustomerCommand() As RelayCommand
    Get
        Return _DeleteCustomerCommand
    End Get
    Private Set(ByVal value As RelayCommand)
        _DeleteCustomerCommand = value
    End Set
End Property

Add the following code into MainPageViewModel to handle wiring up the properties defined in the previous step to methods that will be invoked once a command is executed:
C#
```
private void WireCommands()
{
    UpdateCustomerCommand = new RelayCommand(UpdateCustomer);
    DeleteCustomerCommand = new RelayCommand(DeleteCustomer);
}
```
Visual Basic
```
Private Sub WireCommands()      
    UpdateCustomerCommand = New RelayCommand(AddressOf UpdateCustomer)  
    DeleteCustomerCommand = New RelayCommand(AddressOf DeleteCustomer)
End Sub
```
WireCommands handles associating two RelayCommand properties with methods that will be invoked as a command is executed in a View. For example, any Button with a Command property bound to UpdateCustomerCommand will cause the UpdateCustomer method to be invoked.
Add a call to the WireCommands method within MainPageViewModel's second constructor (add the code immediately under the GetCustomers method call within the constructor).
Add code within the CurrentCustomer property's set block to assign the IsEnabled property of UpdateCustomerCommand and DeleteCustomerCommand to a value of true (add the code within the existing "if" statement).
Open MainPage.xaml and add the following xml namespace definition on the UserControl element to reference the ViewModels namespace:
XAML
```
xmlns:viewModels="clr-namespace:SilverlightCustomerViewer.ViewModels"
```
Create a UserControl.Resources element within the XAML immediately below the beginning UserControl element and add the following code into it:
XAML
```
<viewModels:MainPageViewModel x:Key="ViewModel" />
```
Bind the ViewModel key created in the previous step to the LayoutRoot element's DataContext property using a StaticResource binding. This will bind a MainPageViewModel object instance to the DataContext.
XAML
```
DataContext="{Binding Source={StaticResource ViewModel}}"
```
Build the solution. If you encounter any compilation errors resolve them before continuing.
Right-click on the ComboBox control in the designer and select Properties from the menu.
Locate the ItemsSource property and click on its Binding value to view the data binding window. Select Customers from the available Path values as shown next:
Follow the same procedure shown in the previous step to bind the ComboBox control's SelectedItem property to CurrentCustomer.
You'll need to click on the icon to the right of SelectedItem and then select Apply Data Binding to access the data binding window.
Bind the Text property of each TextBox control to the associated property in CurrentCustomer.
To do this, first clear any existing bindings by selecting the data icon to the right of the Text property and select Reset Value. You'll need to bind the Text property of each TextBox to CurrentCustomer and then select the appropriate property from CurrentCustomer (FirstName, LastName, etc.) in the data binding window.
Bind the Command property of each Button control to the appropriate command property in the ViewModel (UpdateCustomerCommand or DeleteCustomerCommand) using the same technique shown in the previous steps.
Drag a TextBlock control from the Toolbox and drop it directly to the right of the existing Delete button. Change the Width of the TextBlock to 200.
Bind the newly added TextBlock control's Text property to the StatusMessage property of the ViewModel using the data binding window.
Run the application and test the functionality. As you update or delete a Customer object a success message should appear to the right of the Button controls. Select a different customer and the success message should disappear.

Summary

In this exercise you converted the SilverlightCustomerViewer application to use the Model-View-ViewModel pattern. Tasks completed include creating a service agent class for communication with a WCF service as well as a ViewModel class that is responsible for retrieving data and storing it in properties. You also added support for commanding and bound a ViewModel class to a XAML view. Requirements satisfied in this lab include:

Remove code located in a Silverlight code-beside file
Create a service agent interface and class to handle calls to a WCF service
Create a ViewModelBase class to handle INotifyPropertyChanged notifications
Create a ViewModel class that derives from ViewModelBase and handles data interactions
Add support for commanding into a ViewModel class
Bind a ViewModel class to a View in XAML
Bind Silverlight controls to ViewModel properties

Creating WP7 prototypes with Sketchflow

2011-09-11T22:54:00.000-07:00

With the upcoming release of Windows Phone Mango, you can create prototypes for Phone apps with Sketchflow. For people not knowing Sketchflow : it allows you to create prototypes that look like they have been drawn. When you present a “normal” prototype to a customer you get conversations like this :

Nice protoype, how long before you can deliver us the final product ?

I estimate we can deliver within 4 months.

What ? You created this prototype in just 3 days, it looks like it’s almost finished. How can it possibly take 4 months for completing ?

A sketchflow prototype looks more “unfinished”. It’s not new, it has been around for WPF and silverlight, but you can now also get the projecttemplate for WP7 for using in Blend. Just go to http://wp7sketchflow.codeplex.com/, download and install. Beware : you can only use this thing if you have the full paid version of Blend. The one you get for free with the phone developers tool will not do.

OK. Let’s open up Blend and create a Windows Phone SketchFlow application :

This project directly creates some an empty screen for my app and a fake start-up screen:

I also get an overview how I can move (“Flow”) between the different screens:

I created a little prototype for an application I sometimes create during WP7-courses : a complaints-application for my city (the well-know megacity Serskamp in Belgium). This application allows me to signal stuff like defective traffic lights a.o. I also need to be able to add a location (GPS) and a picture, and to track my filed complaints. I’m not going to create the app itself now, but just the screens.

I start by adding a Panorama on my start screen. This thing automatically gets 2 Panorama-items. The design of my item looks like this :

For the data I created a demo-datasource in the data-tab:

got some trouble for designing the second Panorama-item. Unlike Visual Studio, in which you simply have to select a Panorama-item for making it the active one, there’s no such thing in Blend. Or at least I didn’t find it. The only thing I could do was temporary setting the visibility of the other items to collapsed.

Inside the Flow-panel I can select to add a new Connected screen. This way I create a screen for the follow-up of my complaints, and one for setting the location. I also create connections for returning to Screen 1, and remove the connection from my new screens to Search and AppList.

The Follow-up screen looks like this :

For finishing I also change the start-screen, and I’m done.

Now I’ve finished my SketchFlow-prototype, there’s 2 thing I can do : print it, or run it. In the File-menu you have an option for exporting to Word. This will export all your designs and add a table of contents :

WindowsPhonePrototype2.doc (1,28 mb)

Creating a SketchFlow-prototype is essentially creating a Silverlight-application. This gives you a way of “running” the app, so you can demonstrate it to your customer (see video) :

Is that cool, or what ?

Creating a Silverlight Custom Control

2011-09-02T03:39:00.000-07:00

Introduction

This articles focuses on the process of creating a Custom Control in Silverlight 2. It describes the basics of what you need to build a styleable control with custom logic that can be used in Silverlight applications. The article shows a sample(part) of implementing a LinkLabel control that recognizes URIs in a given text and displays them as links instead of as plain text.

Overview

The control model in Silverlight 2 offers creating UserControls and Custom Controls. UserControls enable encapsulation of a specific logic. They are used in scenarios where you want to reuse XAML and/or logic in multiple places or build a sophisticated page with smaller chunks(the UserControls). However, in other scenarios you may need a custom logic to be built in the control and this control to allow designers customize easily its look. You need a way to modify the control visuals without having to modify the control logic. This is where the Custom Controls comes in handy. In Silverlight they derive from the Control class and specify a default style for the way they will look like.
To get started create a Silverlight Class Library project in Visual Studio. This will generate just a single .cs file. Lets take a sample implementation of a LinkLabel control.

 public class LinkLabel : Control

...

Ok, the first step is to define a default look for this control. A file called generic.xaml contains the UI of your custom controls. It should be placed in a "themes" directory inside your project. Add a new item of type XML File in your project in the "themes" directory and name it generic.xaml. By default when you add a new file the Build Action is set to Silverlight page. But the platform look for the generic.xaml as a Resource file. Therefore you need to change the default behavior:

Open the Properties window of the file.
Change the Build Action to Resource.
Clear the Custom Tool value.

In the generic.xaml add a ResourceDictionary element where you will put all the resources.

 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

...

 </ResourceDictionary>

The next step is to add the default style for the control. Start by including the XML namespace of the assembly.

 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 xmlns:local="clr-namespace:CompletIT.Windows.Controls;assembly=LinkLabel">

     <!-- Default style for CompletIT.Windows.Controls.LinkLabel -->

     <Style TargetType="local:LinkLabel">

         <Setter Property="Template">

             <Setter.Value>

                 <ControlTemplate TargetType="local:LinkLabel">

                      <StackPanel x:Name="LayoutRoot">

                          <ContentPresenter   />

                      </StackPanel>

                  </ControlTemplate>

              </Setter.Value>

          </Setter>

      </Style>

 </ResourceDictionary>

In this code snippet you see a Style element just like the one you might have already used in your Silverlight applications. You may also notice that there is no x:Key attribute - you don't need it because when the platform looks for the default style of the control it just examines the TargetType. To specify the control's look set the Template property and add a ControlTemplate. This is where you can define the full appearance of the control.
With the release of the VisualStateManager in Beta 2 it is important to point that this style is also the place where you can define the state parts of your control. This is not the main focus of this article so I won't get deep in it. For more information on this topic you can read Parts & States Model with VisualStateManager and watch Creating Rich, Dynamic User Interfaces with Silverlight 2 by Karen Corby.
Ok, enough of XAML. Lets see what's needed in the code.
Start with creating a constructor and set the FrameworkElement.DefaultStyleKey - type that should be used to look up the built-in style - to the Type of the control.

 public LinkLabel()

     : base()

     DefaultStyleKey = typeof( LinkLabel );

Then, define all the custom properties of the control. Most of the properties in the framework are of DependencyProperty type. If you want a particular property of your control to be template-bindable, data-bindable or styleable, you need to define it as a DependencyProperty. For the LinkLabel control lets just add a Text property.

 public static readonly DependencyProperty TextProperty = DependencyProperty.Register(

             "Text",

             typeof( string ),

             typeof( LinkLabel ),

             new PropertyMetadata( new PropertyChangedCallback( OnTextChanged ) ) );

 public string Text

get

          return ( string )this.GetValue( TextProperty );

set

          base.SetValue( TextProperty, value );

As you can see on line 5 a new PropertyChangedCallback is added that will be called when the text is changed. This is not needed for all controls. We will walk through the implementation of the OnTextChanged method in a second. Do the same for all properties your control needs.
One last step before proceeding to the control logic code. The StackPanel we use for a "built-in" style in the generic.xaml is still not accessible from the code file. To assign it to a member variable create a private field of type StackPanel and override the OnApplyTemplate method like this:

 public override void OnApplyTemplate()

     this.layoutRoot = this.GetTemplateChild( "LayoutRoot" ) as StackPanel;

     Debug.Assert( this.layoutRoot != null, "LayoutRoot is null" );

     base.OnApplyTemplate();

As you see in the above code we call this.GetTemplateChild(childName) to retrieve the element from the visual tree.
That's it. From there on you should write the custom logic needed by your control to act as you want. For our LinkLabel sample we need to process the entered text by replacing all URIs with links. To achieve this we need to define a new method (ProcessText()) that should be called (1) from the OnApplyTemplate event and (2) from the OnTextChanged event. I'll skip the implementation of the ProcessText method here as I'll blog about the full implementation of the LinkLabel control later this week and will provide the source code and a sample usage.

 private static void OnTextChanged( DependencyObject d, DependencyPropertyChangedEventArgs e )

     LinkLabel linkLabel = d as LinkLabel;

     Debug.Assert( linkLabel != null, "LaytouRoot is null" );

     linkLabel.ProcessText();

Conclusion

Building a Custom Control in Silverlight can be tricky sometimes, but that really depends on the complexity the control requires. Silverlight really gives the freedom to create whatever your imagination can born and push it to the highest level. You are able to build beautiful controls that can be easily customized by designers on their own. You are sure that the designer won't brake your logic while making the fascinate look of the control. With the new VisualStateManager and the "Parts and States Model" you can easily define complex UI while keeping the designer's ability to style it. This is another quite a big and interesting topic that I'll try to cover in future posts.
Stay tuned to see the LinkLabel control. I'll provide a link in this article too.
Update
Check out the LinkLabel control here.

References

Styling and Templating Overview on MSDN
Creating a Templatable Control on MSDN
Creating Rich, Dynamic User Interfaces with Silverlight 2 by Karen Corby
Parts & States Model with VisualStateManager by Karen Corby

Creating Lookless Controls for WPF and Silverlight

2011-08-28T12:35:00.000-07:00

This screencast is a continuation of a previous screencast entitled “Skins for WPF and Silverlight”. In this session we go beyond skinning built-in controls and learn what’s required to create our own skinnable (or ‘lookless’) controls.

This screencast assumes existing knowledge about styles and templates, so if you aren’t up to speed on those topics please consider watching the skinning screencast first.

The sample demonstrated in this screencast can be downloaded here.

Project Silk Drop 11

2011-06-15T01:39:00.000-07:00

Project Silk Drop 11: "

The patterns & practices Web Guidance team released Drop 11 of Project Silk (6-14-2011). This drop includes work recommended by the advisory board and 3rd party code review of the JavaScript.

Code Updates

Significantly reduced the coupling to the mstats global object. Widgets are no longer stored as members on mstats. Instead, widgets are either created in the bootstrapping mileagestats.js or in another managing widget.
Added a utility function for mixing in helper methods that simplify the syntax for invoking public method on widgets (when used inside of another widget).
Significantly reduced the number of hard-coded URLs. URLs are generally pulled from data- attributes.
Corrected an issue with the way that the chart vehicle selection UI was constructed. Changes in jQuery 1.6.1 caused this to surface.
Now correctly redirects to the Login page when a session timeouts and JSON request is made while using the Single Page Interface.

Chapters

We are providing the guidance chapters in Word document, .pdf, and .chm format. Providing the chapters in Word format makes it easier for the community to provide feedback by using the Word Track Changes feature. If you provide feedback on a chapter, you can upload your feedback to: Project Silk Issue Tracker.

The following chapters are ready for review:

Client Data Management and Caching (new)

Architecture (updated)

jQuery UI Widgets (updated)

Application Notifications (updated)

Server-Side Implementation

Security

Unit Testing Web Applications

Widget QuickStart (updated)

How to: Check UIElement Properties with Coded UI Test

How to: Create Automation Negative case with Coded UI Test

How to: Create Web Client UI Test using Coded UI Test

The following chapters are currently being written or will be started soon:

Introduction (in progress)

Modularity (in progress)

Navigation

Communication

Video

We have also made a new video for Project Silk that includes a short tour through the countryside with stops for gas and parts. During parts of the video, the Mileage Stats UI displays as a HUD (heads up display). After this short but entertaining introduction a new tutorial video beings. This video is currently in production and will be released on Channel9 soon.

Close

We welcome and appreciate your feedback on the application and book content.

Have a great day,

Just a grain of sand on the worlds beaches.

10 Silverlight 5 Demos

2011-06-14T00:31:00.000-07:00

Last week in Germany at DevConnections, I presented a session on 10 cool features in Silverlight 5. This presentation was a combination of demos that both I and Pete Brown had put together over the past few weeks. You can download the slide deck and the sample code right here.
The 10 topics I chose to demonstrate are:

I also presented a talk on MVVM, which uses the same BookShelf app demo I used at the Silverlight Firestarter. You can download the deck and demo for that from this link.
Note: I’m working on cleaning up my demos from my joint talk with Dan Wahlin on jQuery and KnockoutJS, which covered MVVM concepts.

Silverlight

Introducing PDF Viewer for Silverlight/WPF

ScrollToBottom extension method in ScrollViewer - Silverlight 4

Unauthorized access exception when value set for property using Secondary Thread - Silverlight

silverlight 5: Slides and Code

Prism/WPF/Silverlight - setting ItemsControl height and width to full view using DockPanel style

Binding Events to Methods in the Silverlight MVVM View Models

Introduction

Background

The View Model

The XAML View "MainPage.xaml"

Run the Application

Conclusion

Points of Interest

History

Creación de Prototipos de Proyectos para Windows Phone.

Lápiz y Papel.

Fuente original para Windows.

Plantillas para aplicaciones genéricas.

Plantillas para aplicaciones de prototipado.

Using the MVVM Pattern in Silverlight Applications

Using the MVVM Pattern in Silverlight Applications

Contents

Overview

You Will Benefit from this Lab if:

You Will Learn:

Business Requirements for the Silverlight application include:

Exercise 1: Creating a Service Agent Class

C#

Visual Basic

C#

Visual Basic

C#

Visual Basic

C#

Visual Basic

Exercise 2: Creating a ViewModel Class

C#

Visual Basic

C#

Visual Basic

Exercise 3: Handling Commands and Binding to a ViewModel

C#

Visual Basic

C#

Visual Basic

XAML

XAML

XAML

Summary

Creating WP7 prototypes with Sketchflow

Creating a Silverlight Custom Control

Introduction

Overview

Conclusion

References

Creating Lookless Controls for WPF and Silverlight

Project Silk Drop 11

Code Updates

Chapters

Video

Close

10 Silverlight 5 Demos