Archive for January, 2008

Bind to methods with ObjectDataProvider

Thursday, January 10th, 2008

Two classes inherit from DataSourceProvider. XmlDataProvider and ObjectDataProvider. ObjectDataProvider wraps an object and allows you to bind to the wrapped object in XAML. The ObjectDataProvider has a ConstructorParameters-Property for creating an object by using a constructor with parameters.

The cool thing is that a Data Binding to the wrapped object of the ObjectDataProvider is not all. With ObjectDataProvider you can even bind to a static method or to an instance method of the wrapped object. I’ll show you an example.

Just think about a really simple ComboBox that allows the user to chose some colors. Between the name of the color a rectangle filled with the color should be displayed (In WPF this is quite easy. You haven’t to create eventhandlers like you would do in Windows Forms. There you consumed the DrawItem-event of the ComboBox and used the Graphics-object to do a little bit of GDI+. In WPF GDI+ is gone). WPF’s Color class doesn’t have a name property. So just create a static class ColorHelper with one static method GetColorNames that returns an IEnumerable<string> and uses reflection to iterate over all public static properties of the Colors class that all contain Color-objects.

public static class ColorHelper
{
  public static IEnumerable<string> GetColorNames()
  {
    foreach (PropertyInfo p
      in typeof(Colors).GetProperties(
      BindingFlags.Public | BindingFlags.Static))
    {
      yield return p.Name;
    }
  }
}

The Window in the following XAML contains an ObjectDataProvider that uses the Static GetColorNames-Method of the ColorHelper class. The ItemsSource-Property (Typ: IEnumerable) of the ComboBox is bound to the ObjectDataProvider. The ItemTemplate-Property contains a DataTemplate that specifies the Visual Tree (the "look") of an item. Thanks to TypeConverters, a SolidColorBrush-Object is created for the Fill-Property of each Rectangle specified in the DataTemplate.

<Window ...
    xmlns:local="clr-namespace:SimpleObjectDataProvider">
 <Window.Resources>
  <ObjectDataProvider x:Key="colors"
   ObjectType="{x:Type local:ColorHelper}"
   MethodName="GetColorNames"/>
 </Window.Resources>
 <StackPanel>
  <ComboBox 
   ItemsSource="{Binding Source={StaticResource colors}}">
   <ComboBox.ItemTemplate>
    <DataTemplate>
     <StackPanel Margin="1" Orientation="Horizontal">
      <Rectangle Fill="{Binding}" Height="10" Width="10"
        Margin="2"/>
      <TextBlock Text="{Binding}" Margin="2 0 0 0"/>
     </StackPanel>
    </DataTemplate>
   </ComboBox.ItemTemplate>
  </ComboBox>
 </StackPanel>
</Window>

The displayed, open ComboBox looks like this:

comboBoxObjectDataProvider

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

Monday, January 7th, 2008

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?

Working with the XmlDataProvider

Monday, January 7th, 2008

The XmlDataProvider class enables Binding to XML inside XAML. This will allow you to bind e.g. to the rss feed of a blog like http://www.thomasclaudiushuber.com/blog/feed/, cause rss is simple XML.

A XmlDataProvider-Element is declared as a logic resource. You simply set the Source-Property to a XML-Document and optionally set the XPath-Property. The default value of the IsAsynchronous-Property of the XmlDataProvider is true, so your client won’t freeze if you specify a url as the source.

The following XAML creates a simple rss-reader. The root is a Window object that contains a XmlDataProvider inside its Resources-Property. The XmlDataProvider loads the feed of this blog and its XPath-Property points to the blogs items. The elements inside the Window are indirectly bound to the XmlDataProvider. They use the DataContext specified on the DockPanel. The special thing of the Bindings on this elements is that they do not directly point to the XmlDataProvider. Instead the Bindings start at the /rss/channel/item like specified in the XPath-Property of the XmlDataProvider. If you want to point directly to the XmlDataProvider-object, you’ve to set the BindsDirectlyToSource-Property of the Binding to true. This is used by the first TextBox. It allows the user to change the Source-Property of the XmlDataProvider to navigate to another feed like http://blog.trivadis.com/blogs/MainFeed.aspx. The Binding for this TextBox also specifies that the UpdateSourceTrigger is PropertyChanged. Without this, the Source would be updated on LostFocus, cause the TextBox.TextProperty has specified this behaviour in its metadata.

<Window x:Class="SimpleRssReader.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/..."
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="RSS Reader" Height="600" Width="800">
 <Window.Resources>
  <XmlDataProvider x:Key="blog"
   Source="http://www.thomasclaudiushuber.com/blog/feed/"
   XPath="/rss/channel/item"/>
 </Window.Resources>
 <DockPanel 
   DataContext="{Binding Source={StaticResource blog}}">
  <StackPanel DockPanel.Dock="Top" 
    TextElement.FontWeight="Bold" Background="LightGray">
   <TextBlock Text="{Binding XPath=./../title}" 
     FontSize="20" Margin="10 10 10 0"/>
    <TextBlock Text="{Binding XPath=./../description}" 
      FontSize="10" FontWeight="Normal" Margin="10 0"/>
   <TextBox Margin="5" Text="{Binding 
     Source={StaticResource blog},
     BindsDirectlyToSource=True,
     Path=Source,
     UpdateSourceTrigger=PropertyChanged}"/>
 </StackPanel>

  <StatusBar DockPanel.Dock="Bottom">
   <StatusBarItem Content="{Binding XPath=title}"/>
   <Separator/>
   <StatusBarItem Content="{Binding XPath=pubDate}"/>
  </StatusBar>

  <Grid>
   <Grid.ColumnDefinitions>
    <ColumnDefinition Width="308"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition/>
   </Grid.ColumnDefinitions>

   <GroupBox Header="Blog-Eintr?ge">
    <ListBox IsSynchronizedWithCurrentItem="True"
      ItemsSource="{Binding}" DisplayMemberPath="title"/>
   </GroupBox>

   <GridSplitter Grid.Column="1" 
     HorizontalAlignment="Center" Width="10"/>

   <Frame Grid.Column="2" Source="{Binding XPath=link}"/>
  </Grid>

 </DockPanel>
</Window>

To test the rss reader yourself, simply create a new WPF-Application Project and paste the XAML above into the Window1.xaml. You have just to set the value of the x:Class-Attribut on the Window-Element so that it matches your class in the Codebehind-File. The Codebehind-File itself doesn’t need any logic. The reader looks like this:

rssreader_XmlDataSource

Rocking with Ibanez RG550 20th Anniversary

Sunday, January 6th, 2008

I’ve waited about nearly one year for the Ibanez RG550 20th Anniversary (it’s my third guitar). The first time I got it, the pickup had a defective contact. The second time I got it, the pickup had still the same problem. Now I got it the third time (and that’s nearly after one year), and it works fine:

 ibanez

I’m really glad that this long running order process came to a good end, cause this is really a great guitar. For the last few days I have mostly played one of my favorite songs, Metallica’s cover version of Thin Lizzy’s "Whiskey in the Jar". And today I decided to write the first 2008-blog entry about my new guitar and rename my blog to ".NET Rocker" :-)