Consider a scenerio , we have a listbox and some process where we have a tab navigation. On select of a tab, pass some inteeger value to a hidden textbox in the xaml . now based on the tab selected, we can switch the same listbox with different data template. This will avoid creating 2 listboxes in Silverlight 3 application.

the below code will explain in detail :

<ListBox x:Name="listbox1">

<ListBox.ItemTemplate>

<DataTemplate>

<ContentControl Content="{Binding}" Loaded="ContentControl_Loaded"/>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

<DataTemplate x:Key="datatemplate01">

<StackPanel>

<TextBlock Text="{Binding Name}"/>

<TextBlock Text="{Binding Dept}"/>

</StackPanel>

</DataTemplate>

<DataTemplate x:Key="datatemplate02">

<StackPanel>

<TextBlock Foreground="Blue" Text="{Binding Name}"/>

<TextBlock Foreground="Blue" Text="{Binding Address}"/>

</StackPanel>

</DataTemplate>

private void ContentControl_Loaded(object sender, RoutedEventArgs e)

{

ContentControl mycontentcontrol= (ContentControl)sender;

Data emp= (Data) mycontentcontrol.DataContext;

if (hiddentxt.Text ==1)

{

mycontentcontrol.ContentTemplate = (DataTemplate)this.Resources["datatemplate01"];

}

else if(hiddentxt.Text ==2)

{

mycontentcontrol.ContentTemplate = (DataTemplate)this.Resources["datatemplate01"];

}

}

How to link a storyboard to dynamically created button in silverlight 3.0

Consider , we have a storyboard in the MainPage.xaml in Silverlight 3 :

<UserControl.Resources>

<Storyboard x:Name="muthu">

<DoubleAnimation Storyboard.TargetName="mybutton" Storyboard.TargetProperty="Width" From="0"To="200"/>

</Storyboard>

</UserControl.Resources>

We can link that storyboard to a dynamically created button control like this :

string xaml = @"<Button xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"" xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml"" x:Name=""mybutton""/>";

Button btn = (Button)XamlReader.Load(xaml);

this.LayoutRoot.Children.Add(mybutton);

Storyboard.SetTarget(this.sb.Children[0], mybutton);

this.sb.Begin();

Finding objects under control template at backend C# in Silverlight 3.0

<Button x:Name="muthu" >

<Button.Template>

<ControlTemplate TargetType="Button">

<Rectangle x:Name="baserect" Fill="Black" Loaded="baserect_Loaded"/>

</ControlTemplate>

</Button.Template>

</Button>



We can get in backend by :

private Rectangle baserect;

private void baserect_Loaded(object sender, RoutedEventArgs e)

{

this.baserect = (Rectangle)sender;

}

how about this idea with flash catalyst? Can it happen in next version or before the release?

Hi friends,

Let me come straight to my interest! I love to see this in further version of flash catalyst or silvelright!

I create a datalist control asset using photoshop. Bring this into Flash catalyst by importing the artworks. Then selecting respesctive artwork and making it as an horizontal list control with custom way for sliding between thumbnails with some description text.

Till now it is 100% possible with flash catalyst beta 1.

Can flash catalyst team further tweak this ui design tool to go ahead and select the data template and add custom interaction where, we can go ahead and give the path in such a way it makes a 180 degree carousel in seconds without any coding. I just need to go into the template and draw/move the positions for 5 thumbnails which sits within the width area of the datatemplate, then all the thumbnails follow the path.

This might be two much, but next wish is to, create states within the data template for loading the thumbnails into list control with custom animations, loading the thumbnail when some search is changed , i mean on layout updated on the datalist.

So in short , my wish is second level tweaking of layout needs to be done within data driven controls.

If this happens, web technology will go more higher level without much coding! so coding can be used to further tweak!

Regards,

Muthaiah Thiagarajan,

EMC Corporation, Bangalore.

www.fmass.com

Battle is on Flash 10 vs Silverlight 3

Healthy Competition between Adobe suite and Microsoft Expression suite :

Ho my god! What a time in this year for both designers and developers in web and desktop platform!

It's on! Flash comes with flash catalyst to compete with Expression Blend of Microsoft.

Flash comes with updated Flex Builder 4 with the rename of Flash Builder 4 to compete with VS2008 in terms of coding.

Upgraded advanced CSS with different selectors to compete with XAML styling of Microsoft

Integration of photoshop , illustrator,flash , flash builder, fireworks through Flash catalyst, the style and designer friendly engine.

Microsoft is also no way down, they also integrated expression studio set, photoshop, illustrator with Expression blend.

Microsoft comes with one advanced stuff for prototying though and new concept of Behaviours.

So it's time to go through silverlight 3 and flash 10.

Both the technologies support lot of 3d aspects for the components to animate.

Microsoft anouncing their launch of silverlight 3 on July 10,2009. Not sure when Adobe is giving the full version, currently on beta.

But Microsoft are little ahead with their C# language support , when compared to Actionscripting code and the new RIAservices.But Adobe also comes with deep linking in the new version.

Lot to study in next 3 months though~!

Good to see giants fighting to conquer the web with their technologies.

Hope this gives an good idea about the two technolgoies releasing later this year.

Cheers~!

Muthaiah Thiagarajan.

Making a 3d spin of an Image in Silverlight 3.0

Hi Friends,

I am with an another intresting feature in Silverlight 3.0. It's the 3 dimensional spin of any container in Silverlight 3

In this example, we are taking an example of an image to be moved in 3-d mode through 3 sliders.

Xaml Code :

<Grid x:Name="LayoutRoot" Background="Transparent">

<Grid x:Name="3dcontainer" Margin="250,160,233,150">

   <Grid.Projection>

       <PlaneProjection x:Name="Muthu"/>

   </Grid.Projection>

<Image x:Name="image" Source="Image1.jpg" Stretch="fill"/>

</Grid>

<StackPanel>

   <Slider x:Name="x" Height="20" Maximum="360" value="{Binding ElementName=Muthu, Path=RotationX, Mode=TwoWay}"/>

   <Slider x:Name="y" Height="20" Maximum="360" value="{Binding ElementName=Muthu, Path=RotationY, Mode=TwoWay}"/>

   <Slider x:Name="z" Height="20" Maximum="360" value="{Binding ElementName=Muthu, Path=RotationZ, Mode=TwoWay}"/>   

</StackPanel>

</Grid>

Output:

On sliding each slider the rotation will happen appropriately! Try out! Very cool feature , that can be utilized for 3-d stuffs.

As per my knowledge, there is a software named ZAM-3d which can create xaml for 3d objects created through it. So that can be placed into a grid in silverlight and using the same concept which I have explained above, we can achieve a 360 degree rotation of items on web.

Soon you can find an video in my personal site fmass.com related to this post!

This is amazing!

Cheers~!

Muthaiah

www.fmass.com

Element Binding in Silverlight 3

Hi Friends,

In silverlight 3,  we can have direct element binding. the below example will demonstrate the same in simple xaml codes.  So What ever you type in txt1 will automatically get binded to txt2. 

Xaml Code :

<TextBox  x:Name="txt1" Text="welcome"/>

<Textbox  x:Name="txt2" Text={Binding Text, ElementName=txt1}/>

Cheers!

Muthaiah

www.fmass.com

Simple Navigation link to a different website in silverlight 2.0

Hi Friends,

This following code explains how to make a simple navigation link , which opens in a seperate browser page in silverlight 2.0

Xaml Code:

<TextBlock HorizontalAlignment="Right" Margin="0,32,0,22" Width="118" Text="Fmass - creativity powered" TextWrapping="Wrap" Foreground="#FF808080" TextDecorations="Underline" x:Name="fmasstxt" MouseLeftButtonDown="fmass_MouseLeftButtonDown" Cursor="Hand"/>

C# code:

using System.Windows.Browser;

private void fmass_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

        {

            HtmlPage.Window.Navigate(new Uri("http://www.fmass.com") , self);

        }

Cheers! 

Muthaiah

www.fmass.com

Continous background music player in silverlight 2.0

Hi Friends,

This is a small example of how to incorporate background music for a website in silverlight 2.0, which will have continous stream of music, where you shuld make sure the editing of music is in such a  way that, you can feel as if it is continous.

Xaml code :

<MediaElement Height="34" Source="assets/bgmusic.mp3" MediaEnded="bgaudioplayer_MediaEnded"   Position="0" HorizontalAlignment="Right" Margin="0,0,44,227" VerticalAlignment="Bottom" Width="32" x:Name="bgaudioplayer"/>

C# backend code :

private void bgaudioplayer_MediaEnded(object sender, RoutedEventArgs e)

        {

            bgaudioplayer.Position = System.TimeSpan.FromSeconds(0);

            bgaudioplayer.Play();

        }

Cheers!

Muthaiah

www.fmass.com

Silverlight 2.0.31005.0 - new release - steps to follow for installation

Hi Friends,

Steps to follow for installing new version of Silvelright 2.0.31005.0:

Step 1 : Uninstall Microsoft Silverlight, Microsoft Silverlight Tools for VS2008, Microsoft Silvelright SDK

Step 2 : Uninstall expression blend 2.5 June Preview

Step 3 : Install sp1 for Visual Studio 2008

Step 4 : Install Silverlight Tools for VS 2008 SP1

Step 5 : Install Expression Blend 2 Trial version valid for 60 days, then you need a product key.

Step 6 : Install Expression Blend SP1

Now you are set to work with latest release of Silvelright. Good thing with the latest release is even you can setup for Visual Studio 2008 Web Express Edition by installing SP1 for the same.

Actually little bit of changes are done and new controls like preloaders, certain skins are changed , but so far the target was to close june preview version and add all to SP1 of VS and Blend. In turn to concentrate on sales of the product by Microsoft!

Anyways! I feel the workarea of Blend is much more faster comparitively.

Thanks!

Regards,

Muthaiah.