The DataGrid and the “Input string is not in a correct format” message in Silverlight

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 { 
    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:

image

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;
}

Now 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:

image

Read more...

Great news for Silverlight on Linux

The Silverlight-Plugin runs per default on Windows and MacOs. For Linux-Machines there’s an opensource implementation driven by Microsoft and Novell called Moonlight.

While Silverlight is currently in Version 3 available and Version 4 (already in beta) is expected for spring next year, the Moonlight implementation was only availabe in Version 1. And Version 1 means no C#, no CLR, just hacking JavaScript and XAML. But two days ago the big step for Silverlight on Linux was done and Moonlight reached version 2. It’s available for download: http://www.mono-project.com/Moonlight

I think with reaching that level from “only-JavaScript” to the managed C#-API, the future releases of Moonlight will be more closely to the Silverlight-releases for Windows.

Read more...

Silverlight 4 – How to focus a TextBox that is contained in your Custom Control on Startup

Focusing a TextBox that’s inside a Custom Control isn’t so easy at startup of your application. Let me explain the problem that is also discussed on http://forums.silverlight.net/forums/t/151235.aspx. Imagine you’ve created a custom control that has a TextBox as Part-element. The Style that sets the Template would look like this:

<Style TargetType="local:SimpleControl">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate  TargetType="local:SimpleControl">
        <Border Background="{TemplateBinding Background}"
          BorderBrush="{TemplateBinding BorderBrush}"
          BorderThickness="{TemplateBinding BorderThickness}">
          <TextBox x:Name="PART_Text" Margin="10"></TextBox>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

You get the TextBox from the Template in the OnApplyTemplate-Method

public override void OnApplyTemplate()
{
  base.OnApplyTemplate();
  _partTextBox = this.GetTemplateChild("PART_Text") as TextBox;
}

Now imaginge you want to focus your SimpleControl in the constructor of your MainPage like below:

public MainPage()
{
  InitializeComponent();
  HtmlPage.Plugin.Focus();
  yourControl.Focus();
}

The Problem that occurs is that the OnApplyTemplate-Method is called after the Focus-Method. So you don’t have the TextBox defined in your Template. The Solution is very easy. Just hide the Focus-Method from the base-class and set a flag. But keep in mind that this won’t work if you store your SimpleControl in a variable of type Control, cause then no polymorphic call is made to the Focus-Method defined in SimpleControl. Here a sample implementation:

public class SimpleControl : Control
{
  private bool _applyFocusToPartTextBox;
  private TextBox _partTextBox;
  public SimpleControl()
  {
    this.DefaultStyleKey = typeof(SimpleControl);
  }
  public override void OnApplyTemplate()
  {
    base.OnApplyTemplate();
    _partTextBox = this.GetTemplateChild("PART_Text") as TextBox;
    if (_partTextBox != null)
    {
      if (_applyFocusToPartTextBox)
        _partTextBox.Focus();
    }
    _applyFocusToPartTextBox = false;
  }
  public new bool Focus()
  {
    if (_partTextBox == null)
    {
      _applyFocusToPartTextBox = true;
      return true;
    }
    return base.Focus();
  }
}
Read more...

How to print a List<string> in Silverlight 4 Beta over multiple pages?!

On www.silverlight.net several people are asking how to print the values of a DataGrid in Silverlight. You cannot just assign the DataGrid to the PageVisual-Property of the PrintPageEventArgs. This would just print the DataGrid as it is on one page. The data wouldn’t be splitted on several pages, cause there’s no paging logic to use. You’ve to write this logic.

You’re responsible for the paging! But how to do it? In this post I’ll give you a little idea how it could work by simple printing out a List of string-values. I won’t talk a lot about the details. Just look at the code below:

public partial class MainPage : UserControl
{
  private List _list;
  private const double ROWHEIGHT = 20;
  private const double PAGEMARGIN = 30;
  public MainPage()
  {
    InitializeComponent();
    _list = new List();

    for (int i = 1; i < 101; i++)
    {
      _list.Add(i + " thanks to Thomas for this printing sample");
      _list.Add("Visit http://www.thomasclaudiushuber.com");
    }
  }

  private void Button_Click(object sender, RoutedEventArgs e)
  {
    _currentIndex = 0;

    var pd = new PrintDocument();
    pd.DocumentName = "AListFromThomas";
    pd.PrintPage += pd_PrintPage;
    pd.Print();

  }

  private int _currentIndex;
  private double _currentTop;
  private double _availableSpace;
  void pd_PrintPage(object sender, PrintPageEventArgs e)
  {
    var pageRoot = new Canvas();
    e.PageVisual = pageRoot;

    _currentTop = PAGEMARGIN;
    _availableSpace = e.PrintableArea.Height - PAGEMARGIN*2;
    while (_currentIndex < _list.Count)
    {
      var txt = new TextBlock { Text = _list[_currentIndex] };

      if (ROWHEIGHT > _availableSpace)
      {
        e.HasMorePages = true;
        break;
      }

      txt.SetValue(Canvas.TopProperty, _currentTop);
      txt.SetValue(Canvas.LeftProperty, PAGEMARGIN);
      pageRoot.Children.Add(txt);
      _currentTop += ROWHEIGHT;
      _availableSpace -= ROWHEIGHT;
      _currentIndex++;
    }
  }
}

When the Button_Click-Eventhandler is executed, the List gets printed over 5 pages. You can easily print it to PDFCreator or XPS Printer to test it. The output looks like this:

image

Download the source here and enjoy. Give me feedback by entering a comment to this blogentry or via email on www.thomasclaudiushuber.com/blog.

Read more...

How to supress the Alt-Key in Silverlight’s TextBox

You can restrict the input-values in Silverlight’s TextBox by handling the KeyDown-Event. But the KeyDown-Event isn’t fired if the user enters a key by pressing e.g. ALT + 123.

Corresponding to the problem mentioned in http://forums.silverlight.net/forums/t/147718.aspx, I’ll show here a short workaround by using the TextChanged and KeyUp-Event of the TextBox. Just use the following snippet, that removes a character that was added by pressing the ALT- and another Key or Key-Combination:

private void TextBox_TextChanged(object sender, TextCh… e)
{
  if (_altWasPressed)
  {
    // remove the added character
    var textBox = ((TextBox)sender);
    var caretPos = textBox.SelectionStart;
    var text = textBox.Text;
    var textStart = text.Substring(0, caretPos - 1);
    var textEnd = "";
    if (caretPos < text.Length)
      textEnd = text.Substring(caretPos, text.Length-caretPos);
    textBox.Text = textStart + textEnd;
    textBox.SelectionStart = caretPos - 1;

    _altWasPressed = false;
  }
}
private bool _altWasPressed;
private void TextBox_KeyUp(object sender, KeyEventArgs e)
{
  _altWasPressed = e.Key == Key.Alt;
}
Read more...