Silverlight SDK

Using the Silverlight Toolkit LayoutTransformer Control for Angled Column Header Text

2009-12-16T21:05:00Z

I recently inherited the DataGrid control and, after reading over customer feedback and forum posts, one of the tasks I gave myself was to create a code example for the DataGrid.ColumnHeaderStyle property. After poking around I thought it would be interesting, and hopefully useful, to show how to angle the content of column headers using the ColumnHeaderStyle property. This would save screen real estate since headers, which by default are property names, can be lengthy, and the displayed values are often short. I mucked around and came up with the following:

<UserControl

…

xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
xmlns:primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"
…

…

<my:DataGrid.ColumnHeaderStyle>
     <Style TargetType="primitives:DataGridColumnHeader" >
        <Setter Property="FontSize" Value="10" />
        <Setter Property="ContentTemplate" >
           <Setter.Value>
                <DataTemplate >
                      <TextBlock Text="{Binding}" >
                          <TextBlock.RenderTransform>
                               <RotateTransform Angle="-35" />
                          </TextBlock.RenderTransform>
                    </TextBlock>
                </DataTemplate>
           </Setter.Value>
        </Setter>
    </Style>
</my:DataGrid.ColumnHeaderStyle>

Here’s the column headers when I ran the code. (In this example, for simplicity, I’ve bound the DataGrid to the Children property of LayoutRoot)

Unfortunately, the tops of the headers were cut off and I couldn’t figure out why. I consulted my friend Margaret, who used to own the Silverlight layout docs and the WPF Datagrid docs up until recently, and she pointed out that the transform is done after the measure and layout pass so the layout slot allowed for the content reflects the pre-transformed data.

(As a side note, our conversation resulted in her posting about this problem on the WPF UE team blog. You can check out here.)

Here’s the info about how rotated elements are clipped from the Silverlight Layout System topic:

The following illustration shows a child element that is rotated and now extends beyond its assigned layout slot.

In this case, the layout system clips the child element and displays only the portion of the element that fits inside the layout slot.

Now I understood why my headers where being cut off, but I didn’t know how to fix it. As a result, I did some searching and I ended up at David Anson’s blog. He created a control for Silverlight that operates in much the same way that the LayoutTransform control does in WPF. The WPF LayoutTransform control performs the transform before the measure and layout passes so the correct layout slot is allocated for the control content.

It turns out that since David wrote this post, his control, now named the LayoutTransformer, has been added to the Silverlight Toolkit. I already had the Toolkit installed, so it was just a matter of referencing the correct assembly, which is the System.Windows.Control.Layout.Toolkit assembly, adding the XAML namespace mapping, and adding the control to my XAML. Here’s my new code:

<UserControl

…

xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
xmlns:primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"
xmlns:layout="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit"

…

<my:DataGrid.ColumnHeaderStyle>
     <Style TargetType="primitives:DataGridColumnHeader" >
        <Setter Property="FontSize" Value="10" />
        <Setter Property="ContentTemplate" >
           <Setter.Value>
                <DataTemplate >
                    <layout:LayoutTransformer>
                        <layout:LayoutTransformer.LayoutTransform>
                            <RotateTransform Angle="-35"/>
                        </layout:LayoutTransformer.LayoutTransform>
                    <TextBlock Text="{Binding}" />
                    </layout:LayoutTransformer>
                </DataTemplate>
           </Setter.Value>
        </Setter>
    </Style>
</my:DataGrid.ColumnHeaderStyle>

Here’s what my revised code looks like when I run it:

Angled content, and it’s all on the screen. Woo Hoo!

--Cheryl

Getting started with the charting controls

2009-12-07T22:45:00Z

Recently I thought I would check out the charting controls in the Silverlight Toolkit. I’d been meaning to for awhile, but I was distracted by other tasks such as writing the documentation for the Silverlight 4 beta release. Well, those docs have gone out so I had some time on my hands. I fired up my machine with Silverlight 3 and the Toolkit for Silverlight 3 installed and got busy.

The Data

I thought I’d start with a pie chart, because everyone loves pie charts, right? Okay, maybe it’s pie that everyone loves, but I do enjoy a good pie chart as well. One of the things we are always looking at on the User Education team is what a particular writer owns compared with other writers. This is one of the pieces of data we use to determine who should own new features. A pie chart is an easy way to visualize this data. For example, let’s say we have three writers with the following type distribution that I want to represent in a chart:

Writer	Types Owned
Chris Sells	114
Luka Albrus	225
Jim Hance	140

To get started, I created a Silverlight project and added a very simple class to represent a writer and type ownership:

public class Writer
{
      public Writer() { }
      public Writer(string writerName, int numOfTypes)
      {
          Name = writerName;
          Types = numOfTypes;
      }
      public string Name { get; set; }
      public int Types { get; set; }
}

Next, in the constructor for my page, I created an ObservableCollection that contains the writers.

public MainPage()
{
    InitializeComponent();
    ObservableCollection<Writer> Team = new ObservableCollection<Writer>
    {
         new Writer("Chris Sells", 114),
         new Writer("Luka Abrus", 225),
         new Writer("Jim Hance", 140)
    };

}

Adding the Chart

A cool feature of the Toolkit for Silverlight 3 is the great designer support. The Toolkit controls display in the Visual Studio Toolbox so you can simply drag the desire controls onto the XAML editing surface. Doing so adds the necessary references, using statements and XAML namespace qualifiers to the XAML and code files.

There are a few key steps to adding a chart to your application.

First, drag a Chart control to the XAML editor. Here’s the Toolbox:

I set the chart’s name and title properties.

<chartingToolkit:Chart x:Name="MyPie" Title="Writer Assignments" Width="400" >
</chartingToolkit:Chart>

Then you’ll need to add a chartNameSeries control inside the Chart control. In this case, I’ll add a PieSeries by dragging it from the ToolBox to the XAML editor, inside the <Chart> tags.

I set the ItemsSource property to a {Binding}, the IndependentValue path to Name, which means my pie chart will have an entry for each writer name. and the DependentValuePath to Types so my pie chart will display the number of types that each writer is assigned as a portion of the pie.

<chartingToolkit:Chart x:Name="MyPie" Title="Writer Assignments" Width="400" >
        <chartingToolkit:PieSeries ItemsSource="{Binding}" IndependentValuePath="Name"
            DependentValuePath="Types">
        </chartingToolkit:PieSeries>
</chartingToolkit:Chart>

Lastly, in the code-behind file, I set the data context for MyPie to the collection of writers.

MyPie.DataContext = Team;

I pressed F5 and look at the beautiful pie chart I got:

This chart is nice, and it was incredibly easy to create, but I decided I wanted to see this data in bar-chart format. I swapped my PieSeries for a BarSeries, keeping the same property settings (yes, I even left it named “MyPie” for now). Here’s the XAML:

<chartingToolkit:Chart x:Name="MyPie" Title="Writer Assignments" Width="400" >
       <chartingToolkit:BarSeries ItemsSource="{Binding}" IndependentValuePath="Name"
           DependentValuePath="Types">
       </chartingToolkit:BarSeries>
</chartingToolkit:Chart>

When I pressed F5, I got the this bar chart:

This bar chart is okay, but the default scale the data is presented in makes Chris look like a slacker. Since I know he’s not (for the record, these names are out of our fictitious names list), I wanted to change the scale a bit. Also the “Series 1” title isn’t very helpful.

Fixing the “Series 1” was easy…I added a title to my bar series.

<chartingToolkit:BarSeries Title="# of Types" ItemsSource="{Binding}" IndependentValuePath="Name"
DependentValuePath="Types">
</chartingToolkit:BarSeries>

I discovered that in order to change the scale in which my data is displayed, I needed to add some Axes to my chart. A Chart object has an Axes property that you set to a collection of Axis objects. There are many different types of axis for displaying different kinds of data. These different types of axis all derive from Axis are generally named using the following convention: DescriptionOfFunctionAxis. For my chart I’ll use a LinearAxis since I am displaying numbers. I set the properties of my LinearAxis to the following values:

Property	Value
Title	Types Owned
Orientation	X
Minimum	0
Maximum	300
Interval	50
ShowGridLines	True
FontStyle	Italic

With these settings I adjust the scale of the X-axis to 0-300, with intervals of 50. I also opted to show gridlines and decided to use an italic font.

Getting fancy now, I also added a CategoryAxis, used for displaying category information, with its Title property set to Writer, and an Orientation set to Y. This will add “Writer” along the Y-axis for clarity. When I was finished, my XAML looked like this (the newly added portion is in a bold font) :

<chartingToolkit:Chart x:Name="MyPie" Title="Writer Assignments" Width="400" >
       <chartingToolkit:Chart.Axes>
           <chartingToolkit:CategoryAxis Title="Writer" Orientation="Y" />
           <chartingToolkit:LinearAxis Title="Types owned" Orientation="X" Minimum="0" Maximum="300"
                  Interval="50" ShowGridLines="True" FontStyle='Italic'/>
       </chartingToolkit:Chart.Axes>
       <chartingToolkit:BarSeries Title="# of Types" ItemsSource="{Binding}" IndependentValuePath="Name"
             DependentValuePath="Types">
       </chartingToolkit:BarSeries>
</chartingToolkit:Chart>

I pressed F5 and here’s what I got:

Yeah! Chris suddenly looks much more productive, and I’ve gotten started with charting!

It's so easy to enable printing from a Silverlight 4 application

2009-12-03T21:07:00Z

I've been a writer with Microsoft for about 5 years now, and I've seen my share of printing API. I am happy to report that using the Silverlight printing API to print a single page is about as easy as it gets. Printing multiple pages is a bit more complex, and something I’ll cover in a future blog post. For the most part, however, if you are familiar with the how to print from a Windows Forms application, you'll be very comfortable with printing from Silverlight.

The heart of printing from Silverlight is the PrintDocument type. You use it to raise a print dialog, with the Print method and drive the actual print operation by handling the PrintPage event. Within your PrintPage event handler you specify the UIElement you want to print. This could be the layout root of the Silverlight app, meaning it would print the entire Silverlight UI, or a subset of the UI. Here's some sample code.

In the above xaml, I’ve declared a button and an image. In the code below, I declare the PrintDocument object and the handler for the button’s click event opens the print dialog by calling Print on the PrintDocument. In the PrintPage event handler, I set the PageVisual property of the PrintEventArgs to the image object, which contains a map, to print it.

PrintDocument pd = new PrintDocument();

       public MainPage()
       {
           InitializeComponent();
           pd.PrintPage += new EventHandler<PrintPageEventArgs>(pd_PrintPage);
       }

       private void PrintButton_Click(object sender, RoutedEventArgs e)
       {
           pd.DocumentName = "My Map";
           // Open the print dialog.
           pd.Print();
       }

       void pd_PrintPage(object sender, PrintPageEventArgs e)
       {
           // Set the UI element to print.
           e.PageVisual = mapImage;
       }

For more details see the printing overview topic and the reference documentation for PrintDocument and its supporting classes.

Have you checked out the new RichTextArea control?

2009-12-03T01:47:21Z

Silverlight 4 Beta includes a new RichTextArea control. RichTextArea enables you to display or edit rich content and has features like:

displaying hyperlinks
displaying inline images or other UIElements like a Button
Read-only mode
Selection APIs
Formatting text at run time

Creating a RichTextArea is simple, it is similar to creating any other control in Silverlight. You can set content in a RichTextArea using the Paragraph element (the content property itself is Blocks, which in turn is a collection of Paragraph elements).

Here’s some sample code that shows you how to create a RichTextArea with a paragraph and some bold text.

<Paragraph> A RichTextArea with <Bold>initial content</Bold> in it. </Paragraph>

</RichTextArea>

Here’s the C# code, which does the same thing as the above xaml.

private void ContentRTA()

{

//Create a new RichTextArea with its VerticalScrollBarVisibility property set to Auto.

RichTextArea MyRTA = new RichTextArea();

MyRTA.VerticalScrollBarVisibility = ScrollBarVisibility.Auto;

// Create a Run of plain text and some bold text.

Run myRun1 = new Run();

myRun1.Text = "A RichTextArea with ";

Bold myBold = new Bold();

myBold.Inlines.Add("initial content ");

Run myRun2 = new Run();

myRun2.Text = "in it.";

// Create a paragraph and add the Run and Bold to it.

Paragraph myParagraph = new Paragraph();

myParagraph.Inlines.Add(myRun1);

myParagraph.Inlines.Add(myBold);

myParagraph.Inlines.Add(myRun2);

// Add the paragraph to the RichTextArea.

MyRTA.Blocks.Add(myParagraph);

//Add the RichTextArea to the StackPanel.

MySP.Children.Add(MyRTA);

}

For more details , samples and VB code see RichTextArea reference and the RichTextArea Overview topics.

-Nitya.

Silverlight 4 Beta Released!

2009-11-19T02:33:00Z

WHOOT!

Here's some links to get you synced up:

- Get Started (e.g. get new tools, SDK, runtime, tutorials, other links)
- What's New in Silverlight 4
- Breaking Changes (good to read if you're migrating older apps to Silverlight 4)
- Offline Silverlight 4 MSDN Documentation
- Online Silverlight 4 MSDN Docs

Silverlight 4 Beta Offline MSDN docs (CHM) is available

2009-11-18T18:55:00Z

You can get the Silverlight 4 Beta Offline MSDN documentation here. The CHM is nice if you're offline plus it's faster than the online content, has an index, and only contains Silverlight content.

IMPORTANT! If you open the CHM and cannot view content, do the following to resolve the issue:
- Right-click the CHM file, and then click "Properties".
- Click "Unblock".
- Double-click the .chm file to open the file.

Silverlight 4 Beta Bugs

2009-11-05T01:48:00Z

This is a list of Silverlight 4 Beta Bugs that didn't make it into the readme. For a much larger list of bugs and/or issues Silverlight developers might like to know about this release, see Silverlight 4 Beta Release Notes.

Bug List:

Can't print to an A3 sized paper from a Mac

Printing to an A3 sized paper outputs a blank sheet for both portrait and lanscape prints when printed from a Mac.

Are You Classic or Lightweight? The MSDN Redesign

2009-10-29T20:06:00Z

MSDN recently rolled out new presentation choices for its Library content, which includes the MSDN online section for Silverlight:

If you haven't been there recently here's your obligatory handy link: Silverlight 3 on MSDN

The added presentation choices are a Lightweight view and a Script-Free view. To change the views, click the orange, docked Switch View button. With a switched view, you may notice that you'll have an additional qualifier string in the address bar that shows you the MSDN URL, for example: http://msdn.microsoft.com/en-us/library/cc838158(VS.95,classic).aspx although your view is also potentially session-preserved without that necessarily being in the URL.

The MSDN redesign was originally announced by Soma on Oct 19th. You can learn more about the redesign by following links from that post.

Probably the most immediately observable difference in the presentations is how the Table of Contents (TOC) is treated. In Classic view the TOC remains fully expanded for context. In Lightweight and Script-Free views, the TOC filters down to showing immediate peer topics, and does not show expansion and the set of peers that exist at each decision point as you "walked" the TOC to get to the current page. Depending on your connection speed, Lightweight can potentially help pageload time. The TOC in Classic does a lot of scripting and downloaded pieces, and synching the TOC might be slowing down your pageloads. On the other hand, the full context of the TOC can be nice to see. Not all who wander are lost, right?

I'd be interested in knowing what the Silverlight developer audience thinks of the redesign, and which view this audience prefers. The SDK team often holds the superstition that a Silverlight developer audience uses MSDN more than any offline documentation source, since Silverlight is a Web technology and MSDN is ... on the Web. Plus Silverlight inherently touches on a lot of issues of onscreen design and UI usability. If that's so, then I'd expect Silverlight developers to be even more willing to share their opinion.

Maybe it's just me, but the concept of "Classic versus Lightweight" makes me think of Charles Atlas. :-)

Silverlight 3 online and offline Docs updated

2009-10-06T17:45:00Z

We just refreshed the online docs for Silverlight 3. In addition, the offline CHM has been updated. Most of the updates were just doc bug fixes. Right now writers are mostly focused on documenting Silverlight 4 Beta features (of course SL4 Beta hasn't released yet).

Sam

Silverlight designer sample code is posted

2009-09-24T21:45:44Z

If you’ve been wishing for some helpful designer gestures for your Silverlight DataGrid controls, look no further. The Silverlight Designer Sample is available at the WPF and Silverlight Designer Extensibility site. It demonstrates a pretty neat designer implementation for Silverlight’s TabControl and DataGrid controls.

Silverlight TabControl design-time implementation sample

Silverlight DataGrid design-time implementation sample

You’ll need Visual Studio 2010 Beta 1 or higher. Download the code from here: Silverlight Designer Sample and enjoy.

Technorati Tags: Silverlight,WPF,Visual Studio,designer,DataGrid,.NET Framework

Bing Visual Search Powered by Silverlight!

2009-09-16T23:58:00Z

Yusuf Mehdi demonstrated Bing's new Silverlight powered Visual Search experience yesterday. Using Visual Search you can use images as keywords to search the Web. Visual Search allows you to quickly scroll through the gallery content or do a one-click refinement using the quick tabs on the left, which are specifically relevant to the type of results you are browsing through.

Visual Search is a Silverlight application, as Silverlight allows fast manipulation of the large data sets that hold the information of each gallery and also a compelling visual presentation of the data.

Enjoy the Visual Search here. For more information visit the Bing Blog.

-Nitya.

Silverlight delivers online viewing experience for Sunday Night Football

2009-09-11T00:21:36Z

The NFL and NBC will be delivering the entire Sunday Night Football season by using Silverlight 3.0 and IIS Smooth Streaming. The first game of the season will be broadcast tonight, with the Tennessee Titans vs. the Pittsburg Steelers. Game starts at 5:00pm PST and you can watch online for free: http://snfextra.nbcsports.com/.

Here are a few of the benefits Silverlight delivers:

A full screen video player that is capable of delivering 720p HD video. TV quality on the web.
A main HD video feed, plus 4 user-selectable alternate synchronized camera feeds that allows users to switch camera angles themselves. Your TV can’t do that.
Adaptive smooth streaming of live HD video, which enables the video player to automatically switch bitrates on the fly depending on networking/CPU conditions. No buffering/stuttering experience.
DVR support of the live video, including Pause, Instant Replay, Slow Motion, Skip Forward/Back. You can pause and rewind on live video.
Play-by-play data (touchdowns, fumbles, etc) inserted as tooltip chapter markers on the scrubber at the bottom allowing you to quickly seek to key moments. A smarter, contextual DVR.
Highlights of major plays created within minutes of the play. NBC is cutting on-demand highlights and publishing them on-the-fly with Smooth Streaming.
Sideline interviews with the players. No more channel surfing, you are one click away from additional content.
Game statistics. These are live stats coming dir-ctly in real-time from the NFL.
Game commentary and Q&A with the SNF hosts. Chat with the live TV broadcasters.

Enjoy! http://snfextra.nbcsports.com/

Technorati Tags: .NET Framework,Silverlight

New networking stack in Silverlight 3

2009-08-13T01:40:00Z

In previous versions of Silverlight, the browser handled all the HTTP communication for the Silverlight plug-in. The browser HTTP stack works well but has some limitations including the HTTP methods you can use and the response codes that are accepted. In Silverlight 3, you can opt-in to have the Silverlight client perform the HTTP handling. By opt-in, I mean, if you don't specifically choose the client to perform HTTP processing, it will be done by the browser, just like it always has been. However, if you decide you need to call REST services, you can easily do this with Silverlight3 by opting in to the client HTTP stack.

Here’s a table that summarizes some of the basic HTTP capabilities of Silverlight 3 and whether browser or client HTTP handling supports the capability.

Specifying the HTTP stack is easy. You simply call the WebRequest.RegisterPrefix method, passing the ClientHttp object to specify client HTTP handling or a BrowserHttp object to specify browser HTTP handling. You do this before you make any web requests. One important thing to remember is that once you have specified the client or browser HTTP stack for a particular domain or scheme, you can’t change it.

The following code shows how to specify client handling all HTTP and HTTPS requests and responses.

bool httpResult = WebRequest.RegisterPrefix("http://", WebRequestCreator.ClientHttp);

bool httpsResult = WebRequest.RegisterPrefix("https://", WebRequestCreator.ClientHttp);

You can also use the WebRequest.RegisterPrefix method to register a specific domain. The following code shows and example of how to do this.

HttpWebRequest request = (HttpWebRequest)WebRequestCreator.ClientHttp.Create(new Uri( http://api.search.live.net/qson.aspx?query=Silverlight));

For more details (and VB code) on specifying Client or browser HTTP handling, see How to: Specify Client or Browser HTTP Handling.

For more details on general HTTP capabilities and how to make HTTP requests with Silverlight, plus some security considerations if you are hosting Web services for Silverlight clients, see HTTP Communication and Security with Silverlight.

Seadragon.Com

2009-08-06T20:51:00Z

Microsoft Live Labs recently released Seadragon.Com. Using Seadragon, you can share any size image on the net as a zoomable photo. You can then share the image on Facebook, Twitter, or embed it directly on your blog or any other site.

The picture viewer is developed using the Silverlight Deep Zoom technology because of which the image loads quickly irrespective of the size. The viewer also adjusts dynamically to the layout of your page, or can be easily customized to a specific size so that any size image fits perfectly on your site. And since Seadragon.com uses a dual-mode Silverlight & AJAX control, it works on virtually any browser--automatically using Silverlight to provide a smoother experience and better performance when available, and defaulting to a scripted viewer when it is not.

You can learn more about Deep Zoom in Silverlight Deep Zoom Documentation.

-Nitya.

Use Try/Catch Block with Analytics Object (Silverlight 3 bug)

2009-07-27T23:19:00Z

Some folks have found that a small percentage of customer machines are throwing an exception when the Analytics object is instantiated. To work around this bug for now, use a Try/Catch block when you attempt to instantiate the Analytics object.

For more information on the underlying issue, see http://support.microsoft.com/kb/300956