Silverlight 3: How to customize a button with Expression Blend 3

Follow the steps:

Open a new Silverlight project and aad a button on artboard from tools visible in left side.

 

Click on “[Button]” which appear on top and select option for edit a copy of button template.

 

After selecting it you will get a popup

 

 

You can give name to your style. And after pressing  “OK” you will switch to button template look like this:

 

 

 

So now your Button will change color on Mousehover as you selected. You can also specify transition time for different transition like this:

  

Even you can change complete look or design your own button. To design your own button draw a shape on Layout.

 

 

Rgiht Click and select Make into Control option

 

  you will get a popup select button

 

 And you can customize it in same way

 

 I am hoping this will help you to customize your button shape.

Silverlight control Size and browser resize problem

Sometime if Silverlight control have a bigger size than it create some problems. If browser is smaller than Silverlight control then some part of SL control get clipped. In this scenario sometime you want to get scrollbar some time you want to change SL control height according to browser.

There are some different scenario that how people want to embed there Silverlight control in there page

1. If Silverlight Control is long then it should be in scrollbar.
2. Silverlight control should filled whole page in width and height without caring of height – width ratio.
3. Silverlight control should filled page with maintaining aspect ratio.

1. Silverlight Control is long then it should be in scrollbar:

1. If your Silverlight control height is fixed assume its 800px and width is 900px then you should define this in your user control in this way :

<UserControl x:Class=”Slider.Page” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Width=”700″ Height=”800″ xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″ xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″ mc:Ignorable=”d”>

<Grid x:Name=”LayoutRoot” Background=”White”>

</Grid>

</UserControl> 

and in aspx page it should be

<div id=”silverlightControlHost” style=”width:700;height:800; “>

it will give you scrollbar

 

2. Silverlight control should filled whole page in width and height without caring of height – width ratio:
In this case you need put your layout in Canvas instead of Grid and add transforms in that way:

 

<UserControl x:Class=”SlSizeChange.Page” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” Height=”Auto” Width=”Auto” Background=”#FF29D530″ HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch” >

<Canvas HorizontalAlignment=”Center” x:Name=”Layout” Width=”930″ Height=”640″ VerticalAlignment=”Center” RenderTransformOrigin=”0.5,0.5″ Background=”#FFB9B839″>

<Canvas.RenderTransform>

     <TransformGroup>
           <ScaleTransform ScaleX=”1″ ScaleY=”1″ x:Name=”LayoutScale” />

          <SkewTransform />

          <RotateTransform />

          <TranslateTransform />

   </TransformGroup>

</Canvas.RenderTransform>
<TextBlock Height=”75″ Width=”276″ Canvas.Left=”71″ Canvas.Top=”18″ Text=”TextBlock” TextWrapping=”Wrap”/>
<TextBlock Height=”77″ Width=”140″ Canvas.Left=”248″ Canvas.Top=”341″ Text=”TextBlock” TextWrapping=”Wrap”/>
<TextBlock Height=”64″ Width=”69″ Canvas.Left=”365″ Canvas.Top=”509″ Text=”TextBlock” TextWrapping=”Wrap”/>
<TextBlock Height=”52″ Width=”125″ Canvas.Left=”652″ Canvas.Top=”525″ Text=”TextBlock” TextWrapping=”Wrap”/>
</Canvas>

</UserControl>

Then attach sizeChanged event handler

    public partial class Page : UserControl

    {

        public Page()

        {

          InitializeComponent();
         this.SizeChanged += new SizeChangedEventHandler(Layout_SizeChanged);

        }

       void Layout_SizeChanged(object sender, SizeChangedEventArgs e)

      {

         LayoutScale.ScaleX = e.NewSize.Width / (Layout.Width);

        LayoutScale.ScaleY = e.NewSize.Height / (Layout.Height);

      } 

}

3. Silverlight control should filled page with maintaining aspect ratio :
Now third case where you want to maintain your width – height aspect ratio. To achieve this follow last process in same way with a small difference :

<UserControl x:Class=”SlSizeChange.Page”

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” Height=”Auto” Width=”Auto” Background=”#FF29D530″ HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch” >
<Canvas HorizontalAlignment=”Center” x:Name=”Layout” Width=”930″ Height=”640″ VerticalAlignment=”Top” RenderTransformOrigin=”0.5,0″ Background=”#FFB9B839″>
<Canvas.RenderTransform>
    <TransformGroup>
        <ScaleTransform ScaleX=”1″ ScaleY=”1″ x:Name=”LayoutScale” />
        <SkewTransform />
        <RotateTransform />
       <TranslateTransform />
   </TransformGroup>
</Canvas.RenderTransform>
<TextBlock Height=”75″ Width=”276″ Canvas.Left=”71″ Canvas.Top=”18″ Text=”TextBlock” TextWrapping=”Wrap”/>
<TextBlock Height=”77″ Width=”140″ Canvas.Left=”248″ Canvas.Top=”341″ Text=”TextBlock” TextWrapping=”Wrap”/>
<TextBlock Height=”64″ Width=”69″ Canvas.Left=”365″ Canvas.Top=”509″ Text=”TextBlock” TextWrapping=”Wrap”/>
<TextBlock Height=”52″ Width=”125″ Canvas.Left=”652″ Canvas.Top=”525″ Text=”TextBlock” TextWrapping=”Wrap”/>
</Canvas>

</UserControl>

And for C#

public partial class Page : UserControl

{
     public Page()

      {         InitializeComponent();
         this.SizeChanged += new SizeChangedEventHandler(Layout_SizeChanged);

       }
    

     void Layout_SizeChanged(object sender, SizeChangedEventArgs e)

     {
        double aspectRatio = e.NewSize.Width / e.NewSize.Height;
        if (aspectRatio < (Layout.Width / Layout.Height))

          LayoutScale.ScaleX = LayoutScale.ScaleY = e.NewSize.Width / (Layout.Width);
        else

          LayoutScale.ScaleX = LayoutScale.ScaleY = e.NewSize.Height / (Layout.Height);

     } 

}

Now this will always maintain the aspect ratio.

Silverlight – Slider Window

Silverlight Slider

 

 

 

 

 

 

 

 

 

 

 

 

On http://www.microsoft.com/en/us/default.aspx you will get a small Silverlight component with slider effect. Today we will discuss that how can we develop it. This is a stackPanel based component. As you know Silverlight have three main container type controls canvas, grid and stackpanel. Stackpanel have a property that its immediate children never overlap with eachother.

Concept.:

To create a Slider we can use StackPanel as parent and other 6 elements as children.

Stackpanel Panel 1 Container1 Panel2 Container2 Panel3 Containter3

 

    

Now hide all container and attach Mouse Enter event with panels. On Mouse Enter to panel it’s container should visible and width should be increased and when mouse go over other panel this container should shrink and other relative container with should be increase. To do this we can take help of story board.

 

Stackpanel Panel 1   Panel2   Panel3

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Coding.

 

Xaml ..

 

<UserControl x:Class=”Slider.Page”

    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

    Width=”800″ Height=”500″ xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″ xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″ mc:Ignorable=”d”>

      <UserControl.Resources>

            <Storyboard x:Name=”sbPnl1Show”>

                  <DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetName=”gridPanel1Container” Storyboard.TargetProperty=”(FrameworkElement.Width)”>

                        <SplineDoubleKeyFrame KeyTime=”00:00:01″ Value=”300″/>

                  </DoubleAnimationUsingKeyFrames>

            </Storyboard>

            <Storyboard x:Name=”sbPnl1Hide”>

                  <DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetName=”gridPanel1Container” Storyboard.TargetProperty=”(FrameworkElement.Width)”>

                        <SplineDoubleKeyFrame KeyTime=”00:00:01″ Value=”0″/>

                  </DoubleAnimationUsingKeyFrames>

            </Storyboard>

            <Storyboard x:Name=”sbPnl2Show”>

                  <DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetName=”gridPanel2Container” Storyboard.TargetProperty=”(FrameworkElement.Width)”>

                        <SplineDoubleKeyFrame KeyTime=”00:00:01″ Value=”300″/>

                  </DoubleAnimationUsingKeyFrames>

            </Storyboard>

            <Storyboard x:Name=”sbPnl2Hide”>

                  <DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetName=”gridPanel2Container” Storyboard.TargetProperty=”(FrameworkElement.Width)”>

                        <SplineDoubleKeyFrame KeyTime=”00:00:01″ Value=”0″/>

                  </DoubleAnimationUsingKeyFrames>

            </Storyboard>

            <Storyboard x:Name=”sbPnl3Show”>

                  <DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetName=”gridPanel1Container3″ Storyboard.TargetProperty=”(FrameworkElement.Width)”>

                        <SplineDoubleKeyFrame KeyTime=”00:00:01″ Value=”300″/>

                  </DoubleAnimationUsingKeyFrames>

            </Storyboard>

            <Storyboard x:Name=”sbPnl3Hide”>

                  <DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetName=”gridPanel1Container3″ Storyboard.TargetProperty=”(FrameworkElement.Width)”>

                        <SplineDoubleKeyFrame KeyTime=”00:00:01″ Value=”0″/>

                  </DoubleAnimationUsingKeyFrames>

            </Storyboard>

      </UserControl.Resources>

    <Grid x:Name=”LayoutRoot” Background=”White”>

 

      <StackPanel Height=”400″ Margin=”0,0,0,0″ Width=”600″ Orientation=”Horizontal”>

            <Canvas Width=”100″ x:Name=”canPanel1″ MouseEnter=”canPanel1_MouseHover”>

                  <Rectangle Height=”400″ Width=”100″ Fill=”#FFFBAEAE” Stroke=”#FF000000″/>

                  <TextBlock Height=”62″ Width=”71″ Canvas.Left=”12″ Canvas.Top=”16″ Text=”Panel1″ TextWrapping=”Wrap”/>

            </Canvas>

            <Grid Width=”0″ x:Name=”gridPanel1Container” RenderTransformOrigin=”0.5,0.5″>

                  <Rectangle Height=”400″ Width=”300″ Fill=”#FFFFC5C5″ Stroke=”#FF000000″/>

                  <TextBlock Height=”16″ Width=”Auto” Text=”Container1″ TextWrapping=”Wrap” Canvas.Left=”12″ Canvas.Top=”16″/>

            </Grid>

            <Canvas Width=”100″ x:Name=”canPanel2″ MouseEnter=”canPanel2_MouseHover”>

                  <Rectangle Height=”400″ Width=”100″ Fill=”#FF475E91″ Stroke=”#FF000000″/>

                  <TextBlock Height=”16″ Width=”Auto” Text=”Panel2″ TextWrapping=”Wrap” Canvas.Left=”12″ Canvas.Top=”16″/>

            </Canvas>

            <Grid Width=”0″ x:Name=”gridPanel2Container”>

                  <Rectangle Height=”400″ Width=”300″ Fill=”#FFADBCDE” Stroke=”#FF000000″/>

                  <TextBlock Height=”16″ Width=”Auto” Text=”Cantainer2″ TextWrapping=”Wrap” Canvas.Left=”12″ Canvas.Top=”16″/>

            </Grid>

            <Canvas Width=”100″ x:Name=”canPanel3″ MouseEnter=”canPanel3_MouseHover”>

                  <Rectangle Height=”400″ Width=”100″ Fill=”#FFA53CA3″ Stroke=”#FF000000″/>

                  <TextBlock Height=”16″ Width=”Auto” Text=”Panel3″ TextWrapping=”Wrap” Canvas.Left=”12″ Canvas.Top=”16″/>

            </Canvas>

            <Grid Height=”Auto” Width=”0″ x:Name=”gridPanel1Container3″ HorizontalAlignment=”Stretch”>

                  <Rectangle Height=”400″ Width=”300″ Fill=”#FFFDC3FC” Stroke=”#FF000000″ HorizontalAlignment=”Stretch”/>

                  <TextBlock Height=”16″ Width=”Auto” Text=”Container3″ TextWrapping=”Wrap” Canvas.Left=”12″ Canvas.Top=”16″/>

            </Grid>

      </StackPanel>

 

    </Grid>

</UserControl>

 

 

C#

 

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

 

namespace Slider

{

    public partial class Page : UserControl

    {

        private int selectedPanel;

        private enum canPanel

        {

            panel1,

            panel2,

            panel3

        } ;

      

        public Page()

        {

            InitializeComponent();

            sbPnl1Show.Begin();

            selectedPanel = (int)canPanel.panel1;

        }

      

 

        private void canPanel1_MouseHover(object sender, MouseEventArgs e)

        {

            if(selectedPanel == (int)canPanel.panel2)

            {

                sbPnl2Hide.Begin();

            }

            if(selectedPanel == (int)canPanel.panel3)

            {

                sbPnl3Hide.Begin();

            }

            sbPnl1Show.Begin();

            selectedPanel = (int) canPanel.panel1;

        }

 

        private void canPanel2_MouseHover(object sender, MouseEventArgs e)

        {

            if (selectedPanel == (int)canPanel.panel1)

            {

                sbPnl1Hide.Begin();

            }

            if (selectedPanel == (int)canPanel.panel3)

            {

                sbPnl3Hide.Begin();

            }

            sbPnl2Show.Begin();

            selectedPanel = (int)canPanel.panel2;

        }

 

        private void canPanel3_MouseHover(object sender, MouseEventArgs e)

        {

            if (selectedPanel == (int)canPanel.panel1)

            {

                sbPnl1Hide.Begin();

            }

            if (selectedPanel == (int)canPanel.panel2)

            {

                sbPnl2Hide.Begin();

            }

            sbPnl3Show.Begin();

            selectedPanel = (int)canPanel.panel3;

        }

        

    }

}

 

after that you can put anything in containers.

Silverlight – Two ways of Drag-n-Drop

There are two way of dragging and dropping objects in Silverlight. One way is by changing canvas left – top property and second is by changing translate-transform. Both codes are here.

By changing Canvas Left – Top property

XAML –

<UserControl x:Class=”draggingObjects.Page”

    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

    Width=”Auto” Height=”Auto” xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″ xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″ mc:Ignorable=”d” HorizontalAlignment=”Left” VerticalAlignment=”Top”>

    <Grid x:Name=”LayoutRoot” Background=”White”>

      <Canvas Margin=”0,0,-100,-100″>

            <Rectangle Height=”100″ Fill=”#FFFF7575″ Stroke=”#FF000000″ Width=”100″ x:Name=”rectDraggable” MouseLeftButtonDown=”rectDraggable_MouseDown” MouseLeftButtonUp=”rectDraggable_MouseUp” MouseMove=”rectDraggable_MouseMove” RenderTransformOrigin=”0.5,0.5″ />

         

      </Canvas>

    </Grid>

</UserControl>

 

C#

namespace draggingObjects

{

    public partial class Page : UserControl

    {

        private Point clickPostion;

        private bool isMouseCaptured;

        public Page()

        {

            InitializeComponent();

        }

 

        private void rectDraggable_MouseDown(object sender, MouseButtonEventArgs e)

        {

            clickPostion = e.GetPosition(sender as UIElement);

            rectDraggable.CaptureMouse();

            isMouseCaptured = true;

        }

 

        private void rectDraggable_MouseUp(object sender, MouseButtonEventArgs e)

        {

            rectDraggable.ReleaseMouseCapture();

            isMouseCaptured = false;

        }

 

        private void rectDraggable_MouseMove(object sender, MouseEventArgs e)

        {

            if (isMouseCaptured)

            {

                double diffX = e.GetPosition(this).X – clickPostion.X;

                double diffY = e.GetPosition(this).Y – clickPostion.Y;

                rectDraggable.SetValue(Canvas.LeftProperty, diffX);

                rectDraggable.SetValue(Canvas.TopProperty,diffY);

               

            }

        }

    }

}

 

By Changing Translate-Transformation

XAML-

<UserControl x:Class=”draggingObjects.Page”

    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

    Width=”Auto” Height=”Auto” xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″ xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″ mc:Ignorable=”d” HorizontalAlignment=”Left” VerticalAlignment=”Top”>

    <Grid x:Name=”LayoutRoot” Background=”White”>

        <Rectangle Height=”100″ Fill=”#FFFF7575″ Stroke=”#FF000000″ Width=”100″ x:Name=”rectDraggable” MouseLeftButtonDown=”rectDraggable_MouseDown” MouseLeftButtonUp=”rectDraggable_MouseUp” MouseMove=”rectDraggable_MouseMove” RenderTransformOrigin=”0.5,0.5″>

                <Rectangle.RenderTransform>

                    <TransformGroup>

                        <ScaleTransform/>

                        <SkewTransform/>

                        <RotateTransform/>

                        <TranslateTransform x:Name=”recttranslateTransform”/>

                    </TransformGroup>

                </Rectangle.RenderTransform>

            </Rectangle>

    </Grid>

</UserControl>

 

C# -

namespace draggingObjects

{

    public partial class Page : UserControl

    {

        private Point clickPostion;

        private bool isMouseCaptured;

        public Page()

        {

            InitializeComponent();

        }

 

        private void rectDraggable_MouseDown(object sender, MouseButtonEventArgs e)

        {

            clickPostion = e.GetPosition(sender as UIElement);

            rectDraggable.CaptureMouse();

            isMouseCaptured = true;

        }

 

        private void rectDraggable_MouseUp(object sender, MouseButtonEventArgs e)

        {

            rectDraggable.ReleaseMouseCapture();

            isMouseCaptured = false;

        }

 

        private void rectDraggable_MouseMove(object sender, MouseEventArgs e)

        {

            if (isMouseCaptured)

            {

                double diffX = e.GetPosition(this).X – clickPostion.X;

                double diffY = e.GetPosition(this).Y – clickPostion.Y;

                recttranslateTransform.X = diffX;

                recttranslateTransform.Y = diffY;

              

            }

        }

    }

}

 

 Remember if you are choosing the left and top property way object should be wrapped in a canvas.

How to upgrade Silverlight app from Beta 2 to Silverlight 2

If you are working on Silverlight with Silverlight SDK beta (silverlight_chainer.exe) please note that the Silverlight 2.0 is released so the Silverlight 2 beta 2 app will no longer work.

To upgrade your application you have to take these steps.

1- Uninstall Silverlight 2 beta 1, beta 2, Silverlight SDK.

2- Install Silverlight 2.0 (Silverlight.2.0.exe)

3- Install VS90sp1-KB945140-ENU.exe (a small exe file to make it compatible with Silverlight 2.0 SDK SP1) then install Silverlight_Tools.exe (Silverlight 2 SDK SP1) which may take more than an hour.

4- To install expression blend you should have blend 2(either trial version or original but not June or march preview) and then you need to install BlendV2SP1_en.exe .

After installation, build your project with VS2008. May be you get some error for button or other components which you have to fix (may be by redoing).

Keep Silverlighting!!

“Surface” implementation with silverlight 2.0

To See Drag Twist Album Click below:
Drag-Twist Album

From last couple of weeks I worked on silverlight and got exited with the feeling of immense opportunity to doing things. I made an application Drag-Twist album which is inspired by Microsoft Surface image and video browsing. It took very few days to develop. Here you can resize and scale image and video as well as you can drag it. A lot of things you can do with silverlight

Drag Twist Album

Silverlight is making media richer day by day. Here by applying some transformations achieved the wanted results. In same way we can create different kind of games like image puzzles.

But still a lot of improvement is needed in silverlight. Some time it needs more resources form client system and in the result some time it’s animations get affected badly. So presently we should avoid putting moving objects in silverlight applications some time motion is not smooth. I think in next 2-3 year silverlight become mature enough to use it in any way.

Silverlight – How to start

After knowing the fact that everybody is interested in silverlight but don’t know how to start, I decided to write a small post on my blog.

As you know silverlight is a very interesting technology not just because it’s new but also for a lot special effects which it generate. Till now silverlight 1.0 is has been released and beta version of silverlight 2.0 is available.

First some points you should know before starting silverlight.

1. What is silverlight and why silverlight?

2. What is WPF?

3. What is Xaml?

4. So what is difference between flash and silverlight?

5. Why is silverlight always surrounded with ajax??

I will try to explain about this in very short and for details Contact our God – Google J

 1. What is silverlight :

 Microsoft Silverlight is a programmable web browser plugin that provides support for rich internet applications such as animation, vector graphics and audio-video playback. Silverlight competes with products such as Adobe Flash, Adobe Flex, Adobe Shockwave, and JavaFX. Now in beta-testing, version 2.0 brings improved interactivity and support for .NET languages and development tools.

  

2. What is WPF:

 The Windows Presentation Foundation (or WPF), formerly code-named Avalon, is a graphical subsystem in .NET Framework 3.0 (formerly called WinFX)^[1] and is directly related to XAML.^[2] Version 3.0 of WPF is pre-installed in Windows Vista,^[3] the latest version of the Microsoft Windows operating system. WPF is also available for installation on Windows XP SP2 and Windows Server 2003. It provides a consistent programming model for building applications and provides a clear separation between the UI and the business logic. A WPF application can be deployed on the desktop or hosted in a web browser. It also enables rich control, design, and development of the visual aspects of Windows programs. It aims to unify a host of application services: user interface, 2D and 3D drawing, fixed and adaptive documents, advanced typography, vector graphics, raster graphics, animation, data binding, audio and video. Although WinForms will continue to be widely used, and Microsoft has created only a few WPF applications, the company promotes WPF for line of business applications.Remember Silverlight is a subset of WPF.

 3. What is Xaml.

 Extensible Application Markup Language (XAML, pronounced zammel ([zæ:mɛl]) is a declarative XML-based language created by Microsoft which is used to initialize structured values and objects. It is available under Microsoft’s Open Specification Promise.^[1] The acronym originally stood for Extensible Avalon Markup Language – Avalon being the code-name for Windows Presentation Foundation (WPF).

 4. So what is difference between flash and silverlight.

 I hope will get answer very early but first think why I asked this question.

 5. Why silverlight always surrounded with ajax??

 

Hmmmm ……. now I get caught. Actually most of the things (specially definitions) are from Wikipedia But I know you still not getting the point…

  

Now let me explain. As I think silverlight is nothing but a new technology which is developed to improve web presentation layer.

 

 You might ask what need of improvement is or where is the need of improvement?? So as you have already experienced if you need a background with different colors and gradient of the colors, what will you do?? Answer is very simple you will put an image in back ground or to make it lighter you will cut strip only and repeat it in x or y direction.

  

And this is the place where I need improvement I want more flexibility in html. I want to give glassy or 3D effects to my website and here html get failed.

 

So obviously if you have to play with presentation layer then you should have to play with markup language. And XAML is nothing but it’s your tool here. Actually Xaml is the markup language which has all these capabilities. And how can you use, you can learn easily with Visual Studio or Expression Blend.

 

I hope now will get the point why silverlight always discuss with ajax. Yes you are right as silverlight is deals with client side so to communicate with server you need ajax (xmlhttp request) .

 

I am providing here some links that you can start your Silverlight Mission.

 

There are 8 tutorials from Mr. Scott .

 

Part 1 – Creating a Hello World with Silverlight 2 and VS 2008
Part 2 – Using Layout Management
Part 3 – Using Networking to Retrieve Data and Populate a DataGrid
Part 4 – Using Style Elements to Better Encapsulate Look and Feel
Part 5 – Using the ListBox and DataBinding to Display List Data
Part 6 – Using User Controls to Implement Master/Details Scenarios
Part 7 – Using Templates to Customize Look and Feel
Part 8 – Creating a Digg Desktop Version of our Application using WPF

 

Again Microsoft silverlight website has also very good videos and tips.

 

http://silverlight.net/getstarted/

  

Next time we will discuss some more on silverlight. Till bye n take care.

Is SubmitChanges() not Working in LinQ ?

Some times this type of problem comes especially when you are working with N-tier application. I got this problem when I was trying to made a change in database and I wrote

(Here Domain is a class and table in database and permission is a field of this table)

public static void UpdateXmlByDomainID(int domainID, Settings permissions)

        {

MiniSitesDataContext DataContext = MSD.GetDataContext();

 

XElement xml = Util.GetXmlInXElement(permissions);

 

            Domain updatedDomain = GetDomainByID(domainID);

           

updatedDomain.Permissionsxml = xml;          

            DataContext.SubmitChanges(); 

 

        

        }

Where GetDomainByID(domainID) is a function to fetch Domain but by this method I was unable to change then I a made a change.

Hurrah! It’s working

public static void UpdateXmlByDomainID(int domainID, Settings permissions)

        {

            MiniSitesDataContext DataContext = MSD.GetDataContext();

                        

XElement xml = Util.GetXmlInXElement(permissions);

 

            Domain updatedDomain = new Domain();

           

updatedDomain = DataContext.Domains.Single(d => d.DomainID == domainID);

           

updatedDomain.Permissionsxml = xml;          

            DataContext.SubmitChanges();          

                    

        }

Actually problem is this, LinQ put DataContext on track so this type of problems arising. In first one DataContext was not identifying that this domain is related to it but in second one we are fetching object from datacontext so when we submit changes it make change in database.

Note: This example is not related to only xml functions. Applicable any where. If your problem is still unsolved you are free to ask, may be I can help you  

Problem in linQ Updates – Object-tracking and Caching

As I told I am working on linQ and daily I get some interesting problems. I feel LinQ has some issues and today I made an application to research. I am surprised because I found a major issue which I am going to discuss.

The problem is related to database update. After fetching an object from database if you are assigning it some other value and then you submit your changes or not but in application it will show you have changed the value. If you submit those changes then it will reflect in database. Irrespective of database changes, it shows in application that it’s changed.
Even I fetched data again using different object but it shows changed value in spite of the fact that I didn’t submit changes.

I want to show an example of this,

In database I have a table by name ‘Contact’

namespace WebApplication1

{

    public partial class _Default : System.Web.UI.Page

    {

        DataClasses3DataContext db = new DataClasses3DataContext();

        Contact c, d;

        protected void Page_Load(object sender, EventArgs e)

        {   

            // feching data for contactid 7

            c = db.Contacts.Single(a => a.ContactID == 7);           

 

            TextBox1.Text = c.ContactID.ToString();

            TextBox2.Text = c.Name;

            TextBox3.Text = c.Organization; 

           

        }

    }

}

 

Result  

 

 

 

 

 

Again I made some change in code and write a button event also

 

namespace WebApplication1

{

    public partial class _Default : System.Web.UI.Page

    {

        DataClasses3DataContext db = new DataClasses3DataContext();

        Contact c, d;

        protected void Page_Load(object sender, EventArgs e)

        {   

            // feching data for contactid 7

            c = db.Contacts.Single(a => a.ContactID == 7);

 

            c.Name = “changed”; // assigning the value

 

            TextBox1.Text = c.ContactID.ToString();

            TextBox2.Text = c.Name; // now it have new value “changed”

            TextBox3.Text = c.Organization;           

 

 

            c = db.Contacts.Single(a => a.ContactID == 7);         

          

 

            TextBox1.Text = c.ContactID.ToString();

            TextBox2.Text = c.Name; // now it shoulda have value from database which is larry

            TextBox3.Text = c.Organization;

          

           

        }

 

        protected void Button1_Click(object sender, EventArgs e)

        {

 

            d = db.Contacts.SingleOrDefault(a => a.ContactID == 7);

                     

            TextBox6.Text = d.ContactID.ToString();

            TextBox7.Text = d.Name; // now it should have value from database which is larry

            TextBox8.Text = d.Organization;       

 

        }

 

 

 

    }

}

 And the result is

 

 

Remember I didn’t use any where SubmitChanges().

So now what should we do??

Answer is very simple don’t assign value to object member, if you haven’t made any change.
If it’s conditional then first check, and if change is needed then assign.

Actually the reason of the problem is tracking and caching of objects, so there is one more option available for that and you can disable object tracking by a single line of code. But it should be written just after creating DataContext.

DataClasses3DataContext db = new DataClasses3DataContext();

db.ObjectTrackingEnabled = false;

and code should be written before LinQ-query.

Sql to LinQ : Stored procedure

Two month ago our client had decided to change the middle tier of the project which was implemented using Sql Helper to Linq. I and my team started work on LinQ. We had only very initial level knowledge of LinQ but the best part was this that we have a good knowledge of ORMs(Object Relational Mapping). Initially we were very much exited with LinQ because it looks very simple in implementation. Very small and effective query makes life easy.

But after some time we start facing different kind of problems. I want to share some of them here.

Stored Procedure: whenever we talk about linq implementation the biggest problem is sprocs. In the process of creating .dbml file we have to drag and drop the tables on designer. Designer (Sql to LinQ) generates code for sproc also. The problem starts here, the function which is auto generated by designer always return int type by default. So if you want to map it to any other object or collection then you are bound to change result type in Designer.cs file like this.

Generated:

 

[Function(Name="dbo.GetActivitesByPage")]

           

public int GetActivitesByPage([Parameter(Name="CurrentPage", DbType="Int")] System.Nullable<int> currentPage, [Parameter(Name="PageSize", DbType="Int")] System.Nullable<int> pageSize, [Parameter(DbType="NVarChar(4000)")] string sql, [Parameter(DbType="NVarChar(25)")] string programType)

           

{

                 

IExecuteResult result = this.ExecuteMethodCall(this, ((MethodInfo)(MethodInfo.GetCurrentMethod())), currentPage, pageSize, sql, programType);

                 

return ((int)(result.ReturnValue));

           

}

 

Changed:

 

[Function(Name="dbo.GetActivitesByPage")]

[ResultType(typeof(Program))]

[ResultType(typeof(int))]

 

public IMultipleResults GetActivitesByPage([Parameter(Name="CurrentPage", DbType="Int")] System.Nullable<int> currentPage, [Parameter(Name="PageSize", DbType="Int")] System.Nullable<int> pageSize, [Parameter(DbType="NVarChar(4000)")] string sql, [Parameter(DbType="NVarChar(25)")] string programType)

           

{

 

IExecuteResult result = this.ExecuteMethodCall(this, ((MethodInfo)(MethodInfo.GetCurrentMethod())), currentPage, pageSize, sql, programType);

 

return (IMultipleResults) result.ReturnValue; 

 

}

 

But the problem will not end with this. The main problem is this if you want to make any change in schema, for that you have to do again whole process. Because any change on designer automatically is reflected to designer.cs file so it is automatically updated and the change you made vanish.

To avoid this, one solution might be to use two separate Sql to LinQ file one for tables and one for sprocs with same namespace.