Home > Silverlight > Problem with Element Binding in DataTemplate

Problem with Element Binding in DataTemplate

Hi,

After Long vacation, i started blogging today. This post is the first post after my marriage, a new phase of my life has just started :).

Getting back to topic. This is one of the challenging problem where most of Silverlight 4 developers generally face . One of the often requirement that we receive is how to use Element-Binding within data template.

Most of the developers purports themselves, Why Element data Binding is not working inside data template. The Reason for that is , Whenever You place any Child Controls Inside the data template. Silverlight or WPF Engine Generates the DOM structure for the child controls inside data template in a separate Tree. For Example :

<code>
<ListBox x:Name="ListSample">
<ListBox.ItemTemplate>
<DataTemplate>
<HyperlinkButton x:Name="SourceSiteHyperlink"  NavigateUri="{Binding Path=SourceSiteURL}"  TargetName="_blank"  VerticalAlignment="Center">
<TextBlock Text="{Binding ElementName=TextBlock1, Path=Text}"  Foreground="#525a60" Style="{StaticResource EllipsetextBlock}"></TextBlock>
</HyperlinkButton>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</code>

If you consider the above example, List Box by name “ListSample” has a Item-Template property which is meant to design the each List-Item look i.e “How exactly List Item data has to be shown on UI”. So, every Item-Template accepts type of Data-Temple. Within Data-template, I have a Child Control of Type HyperLink-Button, Which means that every List-Item will behave like a Hyperlink button, On Clicking of any List-Item, It will opens up the new Window with specified Navigate-Uri property Value. The Content Property of Hyperlink-Button is shown by Text-block, where its Text property is bind to an Element of type Text Block by Name “TextBlock1″, what ever may be value of textBlock1 , the value is shown up as content for Hyperlink-Button. If the TextBlock1 has value ” Hello” then Hyperlink-Button will have content (text) has “Hello”. This is exactly what every Silverlight developer think off and design XAML.

But when we run the application, We don’t see Hyperlink Button’s Text value. Because, The DOM structure within Data-Template, is generated in separate Tree which is not part of Main Tree(This is DOM which is shown on UI). So when we write Binding expression with Element Binding then XAML parser checks for element by name “TextBlock1” within the data-template DOM tree which is separate tree. So XAML parser cannot get the value of “TextBlock1” . So that’s the reason for no value shown on UI.

To Fix the Problem Here are the Alternative Solution

1) Create a Public Class for example : Here is Create Class by Name “SampleClass” under the same namespace of XAML.cs

2) Add a Dependency Property of type string and i name it has “URl”

public static readonly DependencyProperty URLProperty= DependencyProperty.Register(“URL”, typeof(string), typeof(SampleClass), new PropertyMetadata(String.Empty, null));

public string URL
{
get
{
return (string)base.GetValue(URLProperty);
}
set
{
base.SetValue(URLProperty, value);
}
}
3) Register the XAML Namaspace @ the top of XAML .
xmlns:dc=”clr-namespace:sampleSilverlightApplication”
here sampleSilverlightApplication is the Namespace of Silverlight Application

4) Register a Resource key under User Control Resources Tag.

<code>
<UserControl.Resources>
<dc:SampleClass x:Key="Key1" URL="{Binding ElementName=TextBlock1,Path=Text}"></dc:SampleClass>
</UserControl.Resources>
</code>

Explanation about above step is, I’m creating a StaticResource by Key Name “Key1”, Where URL is a dependency property for “SampleClass”. I registered “SampleClass” and set the URL Dependency property which is binded to an element “textblock1” with Text has Path. meaning is We are setting value of Textblock1 text property value to URL Dependency Property of SampleClass.

5)Now, We need to use StaticResource created in Step 4 in our data template.

<code>
<ListBox >
<ListBox.ItemTemplate>
<DataTemplate>
<HyperlinkButton x:Name="SourceSiteHyperlink"  NavigateUri="{Binding Path=SourceSiteURL}"  TargetName="_blank"  VerticalAlignment="Center">
<TextBlock Text="{Binding Source={StaticResource Key1},Path=URL}" Foreground="#525a60" Style="{StaticResource EllipsetextBlock}">
</TextBlock>

</HyperlinkButton>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

</code>


 

In the above step , If see HyperLinkbutton content’s
<TextBlock Text="{Binding Source={StaticResource Key1},Path=URL}" Foreground="#525a60" Style="{StaticResource EllipsetextBlock}">
</TextBlock>

Text property of textBlock is binded to StaticResource by key name “Key1” in UserControl.Resource Tag.

Finally , we run the above app, you should be able to see the value depicted in Hyperlink-button’s content property.
I hope this clear explanation helps other developers who are facing same problem like me. In case of any query, Please do reply back.

Thanks,
Mahender

Advertisements
Categories: Silverlight Tags:
  1. No comments yet.
  1. No trackbacks yet.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: