Archive

Posts Tagged ‘Data Templates’

Problem with Element Binding in DataTemplate

December 19, 2011 Leave a comment

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

Categories: Silverlight Tags:

Hyderabad techies Session 5 – Data template Sample Demo

May 24, 2011 Leave a comment

Hi Folks,

I have uploaded sample application about to create data templates in Silver light. Please download the docx file and replace docx file with .zip and extract the contents.

  • DemoOnDataTemplate
  • Please let me know in case you are facing problem.

    -Mahens

    Categories: Silverlight Tags:

    Hyderabad Techies Session -5 Data templates in silverlight

    May 24, 2011 1 comment

    Hi,

    Please find below link for downloading the Silver light data templates Presentation. Presentation exemplify, how to induce data templates in Silverlight. Data templates are key factor for WPF and Silverlight . Following video session explains on Data templates

    -Mahens

    %d bloggers like this: