LostFocus (TextBox) vs. Buttons IsDefault-Property

If you bind the Text-Property of a TextBox to something, the "something" is updated when the TextBox loses focus. This is the Default-UpdateSourceTrigger defined in the Metadata for the TextBox.TextProperty. In a Data Binding you can specify another UpdateSourceTrigger, like e.g. PropertyChanged.

If a TextBox has LostFocus as UpdateSourceTrigger, which is the default, you can get problems if the TextBox is inside of a Dialog that contains a OK-Button with the IsDefault-Property set to true. When the TextBox has the Focus, the user can press Enter and the Button is clicked, but the TextBox still keeps the Focus. The LostFocus-Event doesn’t occur, so the Source of a Data Binding isn’t updated with the value of the TextBoxs Text-Property. You need to update the source explicit. Let’s take an example and use the Person-class of my previous post:

public class Person : INotifyPropertyChanged
{
  private string _name;
  public string Name
  {
    get { return _name; }
    set
    {
      _name = value;
      if (PropertyChanged != null)
        PropertyChanged(this,
          new PropertyChangedEventArgs("Name"));
    }
  }
  public event PropertyChangedEventHandler PropertyChanged;
}

The Window below just contains a TextBox and a Button. The Text-Property of the TextBox is bound to the Name of the data in the DataContext. This would be a Person-instance, as you’ll see below in the codebehind-file. The Button has it’s IsDefault-Property set to true and defines an eventhandler for the Click-Event.

<Window x:Class="LostFocusTest.Window1" ...
  xmlns:local="clr-namespace:LostFocusTest"
  Title="Focus/IsDefault" Width="200" SizeToContent="Height">
  <StackPanel>
    <TextBox Margin="5" Text="{Binding Name}"/>
    <Button Content="OK" IsDefault="True"
       Click="Button_Click"/>
  </StackPanel>
</Window>

In the Constructor in the Codebehind-file a Person-instance is created. It’s assigned to the Windows DataContext-Property, so the TextBox above will display the Persons name, which is set to "Thomas". The Click-Eventhandler for the Button simply displays the name of the Person in a MessageBox.

public partial class Window1 : Window
{
  private Person _pers;
  public Window1()
  {
    InitializeComponent();
    _pers = new Person();
    _pers.Name = "Thomas";
    this.DataContext = _pers;
  }

  private void Button_Click(object sender, RoutedEventArgs e)
  {
    MessageBox.Show(_pers.Name);
  }
}

If I start the application and type "Urs" into the TextBox and press Enter, the Button is clicked but the TextBox keeps the focus. So the Source, which is the Person-Instance, isn’t updated and the MessageBox still displays the old value (“Thomas”), as you can see in the Image below:

LostFocus vs. IsDefault

For such a scenario, you have to update the source explicit. You could do this in the Click-Eventhandler. To update the source, you have to get the BindingExpression for the TextProperty. You get the BindingExpression by calling the GetBindingExpression-Method on the TextBox. Pass in the Text-Property as parameter. On the BindingExpression call the UpdateSource-Method to update the Person-instance explicitly with the value defined in the Text-Property of the TextBox. With the Eventhandler below the Person-Instance would always be actualized when the Button is clicked. The MessageBox would display the right value:

private void Button_Click(object sender, RoutedEventArgs e)
{
  TextBox textBox = Keyboard.FocusedElement as TextBox;
  if (textBox != null)
  {
    BindingExpression be =
      textBox.GetBindingExpression(TextBox.TextProperty);
    if (be != null)
      be.UpdateSource();
  }
  MessageBox.Show(_pers.Name);
}

Just kick it for me:

kick it on DotNetKicks.com

Read more...

The dream of "half-automatic" Automation Properties

Everyone who has worked with WPF knows the interface INotifyPropertyChanged. It only defines the PropertyChanged-event, that should be called when a property’s value has been changed. The PropertyChanged-event is used by WPF’s Data Binding.

Normally a class fires the event in the set-Accessors of its properties. And that’s the problem why you can’t use Automation Properties for classes that implement INotifyPropertyChanged.

(more…)

Read more...

Take Snapshots of Videos with WPF

With WPF’s Imaging-Classes you can take snapshots of any Visual. The snapshot can be saved in any common Image-Format, like e.g. JPG. Let’s take a look at a pretty short example, that shows how easy this can be done. The example takes snapshots of a Video.

The following Window contains a MediaElement and a Button. The MediaElement plays the Video thomasOnBoard.wmv. The Button defines an Eventhandler for the Click-Event. It takes a snapshot of the video, when you click it.

<Window x:Class="SnapShots.Window1"
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/...
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300"

 ResizeMode="NoResize">
  <StackPanel>
   <MediaElement x:Name="media" Height="200" Stretch="Fill">
      <MediaElement.Triggers>
       <EventTrigger RoutedEvent="MediaElement.Loaded">
        <BeginStoryboard>
         <Storyboard>
          <MediaTimeline
Source="thomasOnBoard.wmv"
           RepeatBehavior="Forever"/>
         </Storyboard>
        </BeginStoryboard>
       </EventTrigger>
      </MediaElement.Triggers>
     </MediaElement>
     <Button Click="Button_Click" Content="Snapshot"/>
  </StackPanel>
</Window>

Let’s look at the Eventhandler of the Button. An instance of the RenderTargetBitmap-class is created with some parameters about image-size, dots per inch (dpi) and Pixelformat. The Render-Method gets the MediaElement as a parameter, so MediaElements visual appearance is stored in the RenderTargetBitmap in memory. With a JpegBitmapEncoder and a FileStream the Image is written as a JPG to disk. That’s it.

void Button_Click(object sender, RoutedEventArgs e)
{
  Size dpi = new Size(96,96);
  RenderTargetBitmap bmp = 
    new RenderTargetBitmap(300, 200, 
      dpi.Width, dpi.Height, PixelFormats.Pbgra32);
  bmp.Render(media);

  JpegBitmapEncoder encoder = new JpegBitmapEncoder();
  encoder.Frames.Add(BitmapFrame.Create(bmp));

  string filename = Guid.NewGuid().ToString()+".jpg";
  FileStream fs = new FileStream(filename,FileMode.Create);
  encoder.Save(fs);
  fs.Close();

  Process.Start(filename);
}

Instead of taking the picture in the Button_Click eventhandler, you could create a Timer and take an Image every 0.1s. That allows you to extract an image-sequence of your videos. As it works for any Visual, and everything that’s on the screen in a WPF-Application is a visual, there are many things you can do with it. You could create a snapshot of an Image drawn to an inkCanvas, upload it to a webserver to display it on a webpage etc.

Read more...

Built-in DataGrid for WPF is planned

Yes, they are planning to release it. Really great news. Today there’s no DataGrid for WPF-applications as part of .NET Framework 3.5. There are only third-party controls like the Grid from Xceed or Infragistics.

Have you ever built a business application without a DataGrid? I haven’t. I’m really happy to hear that microsoft will release a DataGrid for WPF as part of .NET. That wouldn’t make thirdparty-components necessary (If you don’t need all functionality e.g. Infragistics provides). I hope the DataGrid for WPF will be more like the DataGridView of WinForms in NET 2.0, and not like DataGrid in .NET < 2.0. :-)

Take a look at the .NET 3.5 roadmap on Scott Guthries blogpost. There’s a little line containing this information about a planned built-in DataGrid by end 2008. Also some other missing controls are planned, like Calendar/DatePicker.

Read more...

Kick it like Beckham with WPF Animations

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. (more…)

Read more...

Give your blog-code the "Visual Studio"-look

How do you write a blog-entry with code that has the same syntax-highlightning like Visual Studio has? I mean this look:

<Code>
<Code.Style>
<Style TargetType="{x:Type Code}">
<Setter Property="IsReallyGoodReadable" Value="Yes"/>
</Style>
</Code.Style>
</
Code>

There are many different blug-ins. But only a few get the code exactly look like in Visual Studio. To get your code looking like the code above, you have to do 2 steps (with a small 3rd css-step):

1. Install Live Writer: http://get.live.com/WL/config_all – LiveWriter is a tool for writing blog entries offline

2. Go to the Live Gallery and download the "Paste from Visual Studio add in": Link to the Paste-Plugin

In LiveWriter you can paste the code direct from visual studio by clicking on the link of the plugin. After you’ve written your entry, you upload it, edit it online and finally publish it.

Special things for Firefox:

In Firefox the fontsize of the code is much smaller than in Internet Explorer 7. Fortunately the pasted code is inside a pre-Tag. The pre-Tags’ class-Attribut is set to "code". So you can easily point to the "code" in your css and give the font a fixed size, and it’ll look equal in Firefox and Internet Explorer.

3. The css-Step

I’ve set the fontsize in the css-File of my WordPress theme to 10. The gray background of the code and the dotted border is also specified in my css.

Just past the following in your css to make the code exactly looking like the snippet above and the css-snippet itself:

.code
{
font-family: Courier New;
font-size: 10pt;
background-color: #EEEEEE;
margin: 0px;
padding: 5px;
border: dotted 1px #CCCCCC;
}

Tips: It’s a good practice to enter all linebreaks in Visual Studio before you paste the code into LiveWriter. I normally paste and delete and paste and delete and so on… until it fits. Find more tips on Karl Shifflets blog

Thanks to: Luca Bolognese and Charlie Calvert from Microsoft. They linked me to the plugin. Thanks also to Karl Shifflet who initiated this entry.

I hope this entry helps you to write your post with this format. How do you paste your code today? Do you know other plugins that give your blog-code the Visual Studio-look?

Read more...