Archive

Archive for the ‘Silverlight’ Category

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

Advertisements
Categories: Silverlight Tags:

Silverlight 5 RC release

September 3, 2011 Leave a comment

Hi,

Microsoft has launched its Silverlight RC release on September . Please go through Pete Brown blog. It’s for only developer release. RC version includes 40 new features in SL . To know more about the features please go through this link . Some of the high level features like Debugging Binding,Improved media support and rich UI capabilities,implicit data templates etc. Next week onwar, I’m starting tutorials on Silverlight . Stay tune for examples.

-Mahender

Categories: Silverlight

Determining Height and Width of Browser’s content window

August 11, 2011 Leave a comment

Hi,
One of the requirement people often have is to show child window which is of size of Browser’s content window Width and Height. Here each browser maintain its own browser width and client. So by default Silverlight provide browser height and width of host by using following code

Application.Current.Host.Content.ActualHeight => Height
Application.Current.Host.Content.ActualWidth => Width

But some times ActualHeight and ActualWidth doesnot give up actual values .
Use the below property to get the height width of host apps.
double height = double.Parse(HTMLPage.Document.Body.GetProperty(“clientHeight”).ToString());

double width=double.Parse(HtmlPage.Document.Body.GetProperty(“clientWidth”).ToString());

-Mahender

“As always please enter your comments”

Categories: Silverlight

HT Session on MEF

July 31, 2011 Leave a comment

Hi,
last week i delivered session on MEF Basic. Please find PPT for the demo

MEF

Please find the Video Session on MEF

-Mahender

Categories: Silverlight Tags:

ALL HT SESSION SLIDES

July 16, 2011 Leave a comment

Hi,
I got good response for sessions on Silverlight. Most people asked me keep all session slide in one common blog entry, so they go through one by one. Below are the session

File Access

Data Templates

Data binding in silverlight

silverlight-control-template

silverlight-command

Routed-events-in-silverlight

RIA services

Printing

Networking and communication

Navigation-application-in-silverlight

Mvvm pattern

Resources and styles

Data binding in silverlight

Key boardevents

introduction-to-silverlight

introduction-to-silverlight-control-3

introduction-to-silverlight-control-4

Html bridge

Dependency property

Data validation in silverlight

Background thread

wcf-ria-services

Happy learning Silverlight

-Mahender

Categories: Silverlight Tags:

HT Session on Backgroundworker Thread

July 16, 2011 Leave a comment

Hello Everyone,

Welcome to another exciting session on Silverlight, It is Background worker thread. Why do we need background-worker thread, can’t we make our code executed in UI Thread?. These are question people comes into mind, people who are pretty new to background thread.

When we develop Windows or WPF apps, If the user performs actions on UI which makes calls to long running services and your UI remain freeze or non responsive, because your UI thread is in waiting state, so to make UI more intutive and responsive, we need to implement background worker thread in your app. You have to move all your services operation calls to Background-worker thread from UI Thread. for rest of content , Please
click on below link for recorded version of Background worker thread session

Presentation : Background Thread
or

Demo Code:BackgroundWorkerThread

Please do enter your comments 🙂

With Regards,
Mahender

HT Session- Navigation Application

July 15, 2011 Leave a comment

Hi,

Yesterday, I discussed on Navigation framework. how to use navigation framework to navigating to another. this is video pretty simple equivalent to Hello world sample.

Please download PPT from this site Navigation-Application in Silverlight

or

-Mahender

Categories: Silverlight Tags:
%d bloggers like this: