Oct 8

Written by: Michael Washington
10/8/2011 9:39 AM 

It is important to know that you should only use the methods described here as a last resort. The methods described here should not be your first choice for implementing a custom Silverlight Control in LightSwitch. 99% of the time these other methods will work:

• Creating A LightSwitch Custom Silverlight Control
• This Is How LightSwitch Does MVVM

Videos:

• Part One - Creating and Binding a Silverlight Control in LightSwitch
• Part Two - The 3 methods of integrating a Silverlight Control in LightSwitch

The Problem

The Silverlight RichTextBox is notorious for being difficult to use with MVVM (LightSwitch uses MVVM). The problem is, that unlike most controls, it does not implement a Dependency Property to bind to.

Practically any control you run across will have a Dependency Property for you to bind to. Even when you make your own Silverlight control and put it in LightSwitch, you will usually have a control like a TextBox that has a Dependency Property for you to bind to. So to make this clear, we only need to go through the steps outlined below when we encounter the odd control that does not have a Dependency Property for you to easily bind to, or it has resources in the App.xaml.

The LightSwitch Application

To test out the RichTextBox, we create a simple table called Document.

 

We clear the Maximum Length property for the DocumentText field to allow unlimited text.

The XAML text created by RichTextBox is very verbose and requires a lot of room.

 

We make a simple List and Details screen that allows us to enter text.

 

The Silverlight Text Editor Sample

The first step is to download the Silverlight Text Editor Sample. The sample contains a Rich Text Box, but also implements a toolbar and other features such as copy and paste, and printing.

 

We unzip the project and add it as an Existing Project.

 

We point to the SilverlightTextEditor.csproj file.

 

The project will show up in the Solution Explorer.

 

We also add references to:

• Microsoft.LightSwitch
• Microsoft.LightSwitch.Base.Client
• Microsoft.LightSwitch.Client

 

Insert Control Into LightSwitch

On the LightSwitch screen, we select the Document Text Box and change it to a Custom Control.

 

In the Properties we click Change.

 

We click the Add Reference Button.

 

We create a Project reference to the SilverlightTextEditor project.

 

We will now be able to select the Custom Control.

We Click OK.

 

If we try to run the project at this point, the screen will just freeze up. We need to program the binding to make the control work, but the reason the screen is freezing up is that there are resources that the control is looking for in the app.xaml that it cannot get to.

 

Fixing Resource Issues

Currently the control is set to load “resources” such as templates and styling, from the app.xaml file.

The problem is, that when the control is running in LightSwitch, the app.xaml cannot load. We need to remove the references.

There are various methods to do this, however, the easiest is to use Microsoft Expression Blend.

 

We open MainPage.xaml in Expression Blend.

 

We delete al the resources in App.xaml.

 

If any resources are to be broken, we Reset to default values.

We also take this time to remove any buttons (and their associated code behind) that insert objects into the Rich Text Box. We would need additional code to actually save these objects to the database, and that is out of the scope of this article.

 

Code To Update The Rich Text Box

Normally we would bind LightSwitch to the control, and we would be done. However, the Rich Text Box does not expose a dependency property. We now have to alter the code behind of the control to manually update the control from LightSwitch, and to update LightSwitch when there are changes in the control.

 

First we create a DependancyProperty that will notify the control when LightSwitch is trying to bind to it. The main purpose for this is that we can wire-up an event, contentItem_PropertyChanged that will be raised whenever the LightSwitch property that the control is bound to changes.

This is the contentItem_PropertyChanged method that will get the value from LightSwitch and update the Rich Text Box:

 

       private void contentItem_PropertyChanged(object sender, 
            System.ComponentModel.PropertyChangedEventArgs e)
        {
            // Get the DataContext
            IContentItem contentItem = (IContentItem)sender;
            // Make sure the contentItem is not null
            if (contentItem.Value != null)
            {
                // Make sure we do not already have the value set 
                // from rtb_ContentChanged to prevent endless looping
                if (contentItem.StringValue != rtb.Xaml)
                {
                    // Check to see if the contentItem is an empty string
                    if (contentItem.StringValue != "")
                    {
                        // Set the value on the RichTextControl
                        rtb.Xaml = contentItem.StringValue;
                        xamlTb.Text = contentItem.StringValue;
                    }
                    else
                    {
                        // The RichText Control will throw an error 
                        // if you attempt to set it to an empty string
                        // Create and set the minimal default text
                        StringBuilder SB = new StringBuilder();
                        SB.Append("<Section xml:space='preserve' HasTrailingParagraphBreakOnPaste='False' ");
                        SB.Append("xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'>");
                        SB.Append("<Paragraph FontSize='20' FontFamily='Calibri' Foreground='#FF000000' ");
                        SB.Append("FontWeight='Normal' FontStyle='Normal' FontStretch='Normal' ");
                        SB.Append("TextAlignment='Left'><Run Text='' /></Paragraph></Section>");
                        rtb.Xaml = SB.ToString();
                    }
                }
            }
        }

 

The Rich Text Box also has an event that is raised when text changes. This is the method that will fire and update LightSwitch:

 

        private void rtb_ContentChanged(object sender, ContentChangedEventArgs e)
        {
            // Get the DataContext
            IContentItem contentItem = (IContentItem)this.DataContext;
            // Make sure we do not already have the value set 
            // from contentItem_PropertyChanged to prevent endless looping
            if (contentItem.StringValue != rtb.Xaml)
            {
                // Set the value of the RichTextControl
                // to the value in LightSwitch
                contentItem.Value = rtb.Xaml;
            }
        }

 

We also override the code for the Add Button on the LightSwitch screen with code that will properly create a blank document:

 

        partial void DocumentListAddAndEditNew_Execute()
        {
            // The RichText Control will throw an error 
            // if you attempt to set it to an empty string
            // Create and set the minimal default text
            StringBuilder SB = new StringBuilder();
            SB.Append("<Section xml:space='preserve' HasTrailingParagraphBreakOnPaste='False' ");
            SB.Append("xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'>");
            SB.Append("<Paragraph FontSize='20' FontFamily='Calibri' Foreground='#FF000000' ");
            SB.Append("FontWeight='Normal' FontStyle='Normal' FontStretch='Normal' ");
            SB.Append("TextAlignment='Left'><Run Text='' /></Paragraph></Section>");
            var NewDocument = Documents.AddNew();
            NewDocument.DocumentTitle = "New Document";
            NewDocument.DocumentText = SB.ToString();
        }

 

(the program running with the Metro Theme)

 

Special Thanks

A special thanks to Sheel Shah and Karol Zadora-Przylecki for their assistance.

 

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx