Using the Tag attribute in XAML or “Where the hell can I bind this!?”

Warning: This blog post assumes some knowledge of XAML and Binding in WPF or Silverlight.

Whilst developing the Hull CS Blogs application for Windows Phone 7 I ran into the same issue several times. Some user interface items, such as Context Menu Menu Items in the Silverlight Toolkit don’t have attributes you can bind properties to in a way that makes sense. Heres an example bit of code to show what I mean

<!--A box containing a list item for the "Latest Blogs" page on the Main Panorama for the Hull CS Blogs app-->
<StackPanel Orientation="Horizontal" Margin="0,0,0,17" Tap="blogTapped">
     <StackPanel Width="411">
          <TextBlock Text="{Binding Title}" Margin="12,-6,12,0" TextWrapping="Wrap" FontSize="30" Foreground="White"/>
          <TextBlock Text="{Binding Author}" Margin="12,-6,12,0" TextWrapping="Wrap" FontSize="20" Foreground="{StaticResource PhoneAccentBrush}" />
          <TextBlock Text="{Binding Abstract, Converter={StaticResource HTMLConvertor}}"  Margin="12,-6,12,0" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}" Foreground="#AFA7A0"/>
     </StackPanel>
</StackPanel>

In this code we can see that affixing a Tap() event to the Title Textblock, which could then work out which Item was tapped by looking at the binding and comparing it to the Titles of blogs in a linked list in memory would be rather simple. But what if we want the user to be able to touch any of the items in order to activate the Tap() event?

To do this we’re going to have to give the StackPanel a Tap() event. So now, anything inside it that is tapped will trigger that event. Thats great! But how do we work out which item was tapped? Theres nothing we can bind to on a StackPanel that can accept a text input in the same way that the Text attribute can on a Textblock.

Binding the title of the blog post to Name will cause an error whilst Initializing the page, due to how XAML works and binding the title to attributes such as Visbility, Width or AllowDrop both doesn’t work and doesn’t make sense.

Tag attribute to the rescue! According to MSDN “Tag is intended to provide a pre-existing property location where you can store some basic custom information about any FrameworkElement without requiring you to subclass an element.” In essence, Tag is a place for you to store information that doesn’t make sense elsewhere, but you need to be associated with that Element in order for it to function correctly. In our case we can bind our title to it, like so

<!-- Now we can tap our stackpanel 🙂 -->
<StackPanel Orientation="Horizontal" Margin="0,0,0,17" Tap="blogTapped" Tag="{Binding Title}">

All FrameWork Elements have a Tag attribute, so that means most, if not all items in XAML do. So, when you’re thinking “Where the hell do I bind this?!”, just think about tag!

Danny.

Advertisements

Tags: , , , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.