.NET Rocker

If you’ve played around with Visual Studio 2010 Release Candidate (RC), you sure have noticed that it’s pretty fast. E.g. the WPF- and Silverlight-Designers come up quickly and much faster that in Visual Studio 2008.

But for now there are some reasons to wait before installing Visual Studio 2010 RC:

• Silverlight 4 Beta is not supported. Silverlight 4 will be supported with the next public drop of Silverlight 4, what means when the Silverlight 4 RC is available. A date for that hasn’t been specified yet by Microsoft.
• The available Preview Version for .NET 4.0 of Expression Blend doesn’t work with Visual Studio 2010 RC. It only works with Beta 2 of Visual Studio 2010. A new version will be available soon as the Expression Website says, but no one knows what "soon" means.

The second point I just noticed now. And so I decided to go back to Beta 2 cause I’ve a session about Model-View-ViewModel this week at BASTA! Spring in Darmstadt.

To go back to Beta 2, make sure you uninstall everything of the Release Candidate. After I’ve uninstalled Visual Studio 2010 RC, I had additionally to remove .NET Framework 4.0 from Programs in Control Panel. Tip: Order the installed programs by date, then you see what you’ve to uninstall pretty good.

After I’ve installed the Beta 2 again, everything worked fine. But I got an error when compiling my WPF-project telling me the following:

"GenerateResource" task failed unexpectedly. System.DllNotFoundException: Unable to load DLL ‘FileTracker.dll’ …”

After some search I found a connect-entry on microsoft.com with the solution. My folder "C:\Windows\Microsoft.NET\Framework” contained a “v4.0” directory additionally to the "v4.0.21006" directory installed with Visual Studio 2010 Beta 2. After deleting the additional folder that has a higher number than v4.0.21006 (it’s the RC ;-)), the Beta 2 works fine again and I can compile everything as expected. Find the connect-entry that pointed me to the solution here:  https://connect.microsoft.com/VisualStudio/feedback/ViewFeedback.aspx?FeedbackID=501894&wa=wsignin1.0

The BASTA! (=Basic Days => in German Basis Tage) is “the” Conference in Germany about .NET. The BASTA! Spring is from 22nd to 26th February.

I’ve two sessions there: one Wednesday (24. February) and one on Thursday (25th February). I’ll talk about the new features in WPF 4.0 and about the Model-View-ViewModel-Pattern (MVVM). Find more (German) infos about my sessions on http://www.thomasclaudiushuber.com/talks.php. Also look at the conference-homepage www.basta.net, there are many great sessions. Looking forward to see you there and talking with you about Windows Presentation Foundation, Silverlight and your upcoming projects.

If you play around with the DataGrid in Silverlight and try some scenarios, maybe you come around the FormatException with the Message “Input String is not in a correct format”. You get this Exception if your Data-Object e.g. has a Property of type int and the user enters some characters in the DataGrid. The Exception doesn’t come up, instead the DataGrid shows it as a validation error. Let’s look at an example. Image you’ve a very simple Person-class containing a FirstName-Property of type string and an Age-Property of type int:

public class Person : INotifyPropertyChanged
{
  private int? _age;
  private string _firstName;
  public string FirstName
  {
    get { return _firstName; }
    set
    {
      _firstName = value;
      Changed("FirstName");
    }
  }

  public int? Age
  {
    get { return _age; }
    set
    {
      _age = value;
      Changed("Age");
    }
  }

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

  public event PropertyChangedEventHandler PropertyChanged;
}

Now let’s fill up a List with some Test-Persons and add that list to the DataContext of your page:

public MainPage()
{
  InitializeComponent();
  this.DataContext = new List<Person> {
    new Person{ FirstName="Thomas",Age=29},
    new Person{ FirstName="Julia",Age=27},
    new Person{ FirstName="Ben",Age=1},
  };
}

No in the XAML-File of your MainPage a DataGrid could be defined like below. Notice the ItemsSource-Property that is bound to the DataContext:

<my:DataGrid ItemsSource="{Binding}"
             AutoGenerateColumns="False">
  <my:DataGrid.Columns>
    <my:DataGridTextColumn Header="FirstName"
                           Binding="{Binding FirstName}"/>
    <my:DataGridTextColumn Header="Age"
                           Binding="{Binding Age}"/>
  </my:DataGrid.Columns>
</my:DataGrid>

When the User now enters a string as Age, the FormatException is raised before the Property is updated and the Message of the FormatException is displayed in the DataGrid:

Now the question is, where to change this string. The DataGrid has a BindingValidationError-Event, but there you have only read access to the FormatException and the Errormessage. In the Property itself you can’t do anything, because the Exception is thrown before the Age-Property is set.

The solution is to define a Property special for Display in the Person-class. Normally you would create a ViewModel that encapsulates the Person-class and contains the additional property. In my case I implement the Property directly in the Person-class. I call it AgeDisplay-Property. Inside that property you can then throw your own FormatException with your special text. My Person-class now looks like this:

public class Person : INotifyPropertyChanged
{
  private int? _age;
  private string _firstName;
  public string FirstName
  {
    get { return _firstName; }
    set
    {
      _firstName = value;
      Changed("FirstName");
    }
  }

  public int? Age
  {
    get { return _age; }
    set
    {
      _age = value;
      Changed("Age");
      Changed("AgeDisplay");
    }
  }

  public string AgeDisplay
  {
    get { return Age.ToString(); ; }
    set
    {
      if (value == null)
      {
        Age = null;
        return;
      }
      int result;
      if (int.TryParse(value, out result))
      {
        Age = result;
      }
      else
      {
        throw new FormatException("Age must be a number. "
                        + " Characters are not allowed.");
      }
    }
  }

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

  public event PropertyChangedEventHandler PropertyChanged;
}

No you simple bind the DataGrid’s Column to AgeDisplay instead of Age:

<my:DataGrid ItemsSource="{Binding}"
             AutoGenerateColumns="False">
  <my:DataGrid.Columns>
    <my:DataGridTextColumn Header="FirstName"
                           Binding="{Binding FirstName}"/>
    <my:DataGridTextColumn Header="Age"
                           Binding="{Binding AgeDisplay}"/>
  </my:DataGrid.Columns>
</my:DataGrid>

When the user now enters a string into the Age-Column, the text of the FormatException thrown in the AgeDisplay-Property is displayed:

Silverlight 4 supports printing scenarios. It’s quite easy. Just create a PrintDocument instance, handle the PrintPage-Event and call the Print-Method. In the PrintPage-Event set the PageVisual-Property of the PrintPageEventArgs to a UIElement of your choice. If there are more pages, set the HasMorePages-Property of the PrintPageEventArgs to true and the PrintPage-Eventhandler would be called again for the next page.

Below a simple example using a lambda expression. When the Print-Method is called a PrintDialog is displayed to the User, where he can select the printer of his choice. When the PrintDialog was accepted, the PrintPage-Event gets fired and the lambda expression below get’s called. The PageVisual-Property is set to a TextBlock. So that TextBlock with the text “Thoams says…” is printed out.

var pd = new PrintDocument();
pd.PrintPage += (s, e) =>
  {
    e.PageVisual = new TextBlock {Text="Thomas says Hello"};
  };
pd.Print();

Ok, so far so good. As I was working on an example for my upcoming Silverlight 4 book I needed to create an Image-Element on the fly and print this out. And then I noticed that the Image doesn’t appear on the output.

While searching for a solution I found somebody having the same problem in this thread in Microsoft’s Silverlight forums:

http://forums.silverlight.net/forums/t/145680.aspx

So, it seemed it was not my cause, it was a Beta-cause. So let’s look at a workaround. But first look at the bug.

I made a smaller example to reproduce it. View the following code. What do you think is printed on the page?

void PrintButton_Click(object sender, RoutedEventArgs e)
{
  var streamResourceInfo =
    Application.GetResourceStream(
      new Uri("thomas.png", UriKind.Relative));

  var bitmapImage = new BitmapImage();
  bitmapImage.SetSource(streamResourceInfo.Stream);

  var image = new Image
  {
    Width = bitmapImage.PixelWidth,
    Height = bitmapImage.PixelHeight,
    Source = bitmapImage
  };

  var pd = new PrintDocument();
  pd.PrintPage += (s, args) =>
    {
      args.PageVisual = image;
    };
  pd.Print();
}

Right, an Image should be printed on the page. But it isn’t. The page is empty. Well, the next thing I tried was to call Measure, Arrange and UpdateLayout on the Image to force a layout-pass. But anyway, it didn’t work, the printed page is always empty.

When the Image isn’t created on the fly, it works. Define the Image in XAML like this

<Image Source="thomas.png" x:Name="image"/>

and a Print-Method in the Codebehind-File would work like that:

void PrintButton_Click(object sender, RoutedEventArgs e)
{
  var pd = new PrintDocument();
  pd.PrintPage += (s, args) =>
    {
      args.PageVisual = image;
    };
  pd.Print();
}

But we want to print an Image on the fly. So how to do that? One way I found out was to create an ImageBrush and set its ImageSource-Property to the BitmapImage. Use the ImageBrush for a Rectangle’s Fill-Property and print out that Rectangle. So here is some code to dynamically print an image by using an ImageBrush in combination with a Rectangle:

void PrintButton_Click(object sender, RoutedEventArgs e)
{
  var streamResourceInfo =
    Application.GetResourceStream(
      new Uri("thomas.png", UriKind.Relative));

  var bitmapImage = new BitmapImage();
  bitmapImage.SetSource(streamResourceInfo.Stream);

  var imageBrush = new ImageBrush();
  imageBrush.ImageSource = bitmapImage;

  var rectangle = new Rectangle
  {
    Width = bitmapImage.PixelWidth,
    Height = bitmapImage.PixelHeight,
    Fill = imageBrush
  };

  var pd = new PrintDocument();
  pd.PrintPage += (s, args) =>
    {
      args.PageVisual = rectangle;
    };
  pd.Print();
}

And voilà, the output looks like this when printed to my PDFCreator-Printer:

[Download the Source]

Cheers Thomas

This week I’ve to deploy an ASP.NET application containing about 20 reports that have been created with the Crystal Reports Basic Runtime which is included in Visual Studio 2008. (By the way, the application also contains a lot of AJAX-Functionality. It uses the "AJAX Control Toolkit-based" MultiColumnDropDown that I’ve described in a previous post).

When deploying the application to a different machine than your developer-machine, the Crystal Report Basic Runtime must be deployed also. You do that by copying the necessary msi-file to the server and run it. The "necessary" .msi-file is already on your development machine and were installed with Visual Studio 2008. The .msi-files for different plattforms are located in the following paths:

(the table above is contained in MSDN-documentation here)

The installation is very simple. You doesn’t need to click anything, simply run the .msi and you see the window below. Just wait until it closes.

There’s also the possibility to include the msi in your setup-application. For more information on that take a look at this thread in MSDN-Forums.

Did you ever wanted to print a Form without calling any native code? Well, with Windows Forms and Visual Studio 2008 this is a really simple exercise. When you design your WinForms-Application you’ll find a Tab Visual Basic PowerPacks in the Toolbox of Visual Studio 2008. In this Tab, you’ll find a component called PrintForm. Simply drop this component on your form, and you’ll find all the functionality you need. Let’s take a look at a small sample by using a very simple Windows Forms application.

The application just has a Browse-Button to browse an image from the filesystem, a PictureBox to display the image and a TextBox displaying the path to the image.

The Browse-Button does nothing more than showing an OpenFileDialog and setting the Text-Property of the TextBox to the selected file and assigning the chosen image to the Image-Property of the PictureBox.

private void btnBrowse_Click(object sender, EventArgs e)
{
  var dlg = new OpenFileDialog
    {
      Multiselect = false,
      Filter = "JPEG (*.jpg)|*.jpg|JPEG (*.jpeg)|*.jpeg"
               + "|GIF(*.gif)|*.gif|Bitmap (*.bmp)|*.bmp"
    };
  if(dlg.ShowDialog() == DialogResult.OK)
  {
    txtImagePath.Text = dlg.FileName;
    pictureBox1.Image = Image.FromFile(dlg.FileName);
  }
}

The Form above already contains a "Print Form!"-Button. The eventhandler of that Button is currently empty. Let’s implement it. But before that, go to the designer and drag’n'drop a PrintForm-component out of the Toolbox on the Form.

After dropping the PrintForm-component, you’ll find it in the Component Tray of the Windows Forms-Designer. It’s named printForm1 by default. I won’t change that here. Now let’s step to the EventHandler of the "Print Form!"-Button.

To print the form, first a PrintDialog is shown allowing the user to select a printer. Then the settings of the PrintDialog are assigned to the PrinterSettings-Property of the printForm1-component. The Print-Method on that component is called passing in the Form (this) and an Enum-Value specifying to print the full Window.

private void btnPrintForm_Click(object sender, EventArgs e)
{
  var dlg = new PrintDialog();
  if(dlg.ShowDialog()==DialogResult.OK)
  {
    printForm1.PrinterSettings = dlg.PrinterSettings;
    printForm1.Print(this, PrintForm.PrintOption.FullWindow);
  }
}

That’s all! E.g. when I print into my PDFPrinter, the resulting PDF-Document will look like this:

Beside the PrinterSettings-Property the PrintForm-Component contains some more important properties . The most mentionable one is the PrintAction-Property. It’s of type PrintAction, an enum in Namespace System.Drawing.Printing. The PrintAction-enum contains three values, PrintToPrinter (the default for the PrintForm’s PrintAction-Property), PrintToFile and PrintToPreview.

So to show a preview of the Print-output, you simply need the following to lines:

printForm1.PrintAction = PrintAction.PrintToPreview;
printForm1.Print(this, PrintForm.PrintOption.FullWindow);

Replace the code in btnPrintForm_Click with the two lines above, and you’ll automatically get a preview, like shown below. But be careful. The user can print out of the Preview. If you’ve no PrinterSettings assigned to the PrinterSettings-Property of the PrintForm, the Print will be implicitly written to the users default-Printer.

So, that’s all. Get the sample here.

Last year I’ve written a german article for the dotnet-magazine about VisualStateManager in Silverlight. As this feature will also be part of WPF 4.0, take a look at the article, which is now available on my homepage. The article is also available on the homepage of Trivadis beside many other articles focused on other IT-Topics.

So read and enjoy.

During the last months I was asked many times for the code of the Multcolumn-Dropdown that I’ve described in this post. I’ve just created a very small sample-application containing such a dropdown. You can download it here.

If someone of you creates a control out of that source, I would be glad to get a link to it.

Thomas

Last week we had a great WPF-afterwork-event at Microsoft Usergroup Switzerland (MSUGS) sponsored by Trivadis. I gave a deep-dive session about developing custom controls using WPF with many of it’s features like Dependency Properties, Commands, Routed Events, PART-Elements, Theme-Styles and so on.

At the end of the session a copy of my German WPF-book was drawn. We made a small lottery, but not a normal one. As all attendees were .NET-developers, everyone trusted in .NETs Random-class, so why don’t do it just in code?! We’ve written life a small console-application that did the job for us. As some people asked for the code (of course only the loosers and not the winner of the book ), here it is:

static void Main(string[] args)
{
  Console.WriteLine();
  Console.WriteLine("  — MSUGS- WPF-Book Lottery");
  Console.WriteLine("  Enter names and a dot (\".\")"
                  + " when names are complete");
  Console.WriteLine();

  List<string> names = new List<string>();
  Console.Write(">");
  string name = Console.ReadLine().Trim();

  while (!name.Equals("."))
  {
    names.Add(name);
    Console.Write(">");
    name = Console.ReadLine().Trim();
  }

  Random random = new Random();
  int winnerIndex = random.Next(names.Count);

  string winner = names[winnerIndex];

  Console.WriteLine();
  Console.WriteLine("Starting lottery…");

  Thread.Sleep(3000);

  Console.Write("And the winner is");

  for (int i = 0; i < 10; i++)
  {
    Thread.Sleep(1000);
    Console.Write(".");
  }
  Console.WriteLine();
  Console.WriteLine();

  Console.WriteLine(winner);

  Console.ReadLine();
}

The Console-Application looks like this:

The lucky winner at the MSUGS-event was Stefan, he was at index zero in the names-Collection. Congratulations!

Thanks to MSUGS for the great organization and to all developers who attended in the session. I hope you enjoyed it.

I’m just finishing the Animation-Chapter of my German-speaking WPF book (WPF-Buch erscheint im Juni 2008). I had a hard time to find a good idea how to show the reader animations in a really "non-boring", but easy way. And I think I’ve found one.

Animations in WPF are really powerful. You can create them completely in XAML. Even if the example of this post doesn’t make sense for a business application, think of the things you can do with animations:

• Create buttons with professional hover-effekts
• Improve the user-interface with some nice effects
• Ease navigation for the user by animating something he should do now
• …

Of course, Animations in business applications must be placed in the right way. It’s not recommended to animate everything you can. If you do so, your application won’t be serious anymore.

The application we are looking at here isn’t a business application. It’s just a small Loose XAML-File that allows you to become a soccer profi. It show’s how animations are completely created in XAML and how they can be controlled.

Animations in XAML are placed inside Triggers. Either in an EventTriggers Action-Property or in another Triggers EnterAction or ExitAction-Property. These Properties are all of type TriggerAction. The BeginStoryboard-class and some other classes derive from TriggerAction. BeginStoryboard contains a Storyboard. The Storyboard itself contains the Animations.

Below a loose XAML. The Animation (bold) changes the Canvas.Top-Property of an image that contains a ball (the teamgeist-ball of worldcup 2006 Germany). The Animation starts, when a button with the Name btnStart is clicked. Between the ball-image the Canvas contains an image of me. And the clou is, it looks like I kick the ball for thousand times like a real profi.

<Grid Height="260" Width="300">
 <Grid.RowDefinitions>
  <RowDefinition/>
  <RowDefinition Height="Auto"/>
 </Grid.RowDefinitions>
 <Grid.Triggers>
  <EventTrigger RoutedEvent="Button.Click"
    SourceName="btnStart">
   <BeginStoryboard Name="beginStoryboard">
    <Storyboard TargetProperty="(Canvas.Top)"
      TargetName="imgBall">
     <DoubleAnimation AutoReverse="True" To="110"
     RepeatBehavior="Forever" Duration="0:0:0.25"
     AccelerationRatio="1"/>
    </Storyboard>
   </BeginStoryboard>
  </EventTrigger>
  <EventTrigger RoutedEvent="Button.Click"
    SourceName="btnStop">
   <StopStoryboard BeginStoryboardName="beginStoryboard"/>
  </EventTrigger>
  <EventTrigger RoutedEvent="Button.Click"
    SourceName="btnPause">
   <PauseStoryboard BeginStoryboardName="beginStoryboard"/>
  </EventTrigger>
  <EventTrigger RoutedEvent="Button.Click"
    SourceName="btnResume">
   <ResumeStoryboard BeginStoryboardName="beginStoryboard"/>
  </EventTrigger>
  <EventTrigger RoutedEvent="Button.Click"
    SourceName="btnSpeed2x">
   <SetStoryboardSpeedRatio SpeedRatio="2"
     BeginStoryboardName="beginStoryboard"/>
  </EventTrigger>
  <EventTrigger RoutedEvent="Button.Click"
    SourceName="btnSpeed1x">
   <SetStoryboardSpeedRatio SpeedRatio="1"
     BeginStoryboardName="beginStoryboard"/>
  </EventTrigger>
 </Grid.Triggers>
 <Canvas Width="250" Height="185">
  <Image Height="185" Source="fussballthomi.png"
    Canvas.Left="40"/>
  <Image x:Name="imgBall" Width="25" Canvas.Top="10"
    Canvas.Left="140" Source="teamgeist.png"/>
 </Canvas>
 <DockPanel Grid.Row="1" LastChildFill="False">
  <Button Margin="5" x:Name="btnStart" Content="Start"/>
  <Button Margin="5" x:Name="btnStop" Content="Stop"/>
  <Button Margin="5" x:Name="btnPause" Content="Pause"/>
  <Button Margin="5" x:Name="btnResume" Content="Weiter"/>
  <Button Margin="5" x:Name="btnSpeed1x" Content="1x"/>
  <Button Margin="5" x:Name="btnSpeed2x" Content="2x"/>
 </DockPanel>
</Grid>

Thomas kicks it like beckham.

More informations about my book, that contains the sample above and hundreds more (also more real world applications), you’ll find by march on www.thomasclaudiushuber.com