ارشيف January, 2010

On the Silverlight.Net Forums, I see repeated questions arise, and after a “Web Developer Conference” this morning, I realized that there really still are a lot of developers out there that have not actually tried their hand at Silverlight yet because of the perceived complexity involved.

Couple that with the fact that many of the existing ‘Tutorials’ seem to want to jump right into Visual Studio and AJAX, I thought I’d take a shot at simplifying this all even further.

The purpose of this tutorial is to show how simple it is to Silverlight-enhance a More >

Up to now, there have been two Tutorials, but really only one Canvas. I wanted to ease into the whole HTML/XAML idea and hopefully get more people quickly involved. There’s lots yet to explore, so I thought I’d look a little at the Rectangle object this time, and also take a first look at handling some mouse events. This will get us into Java Script, and if you’re not familiar with it, don’t worry, it’s very minimal, and just a cut-and-paste

I thought I’d throw the XAML for this page right up front, so it can be More >

In this fifth Tutorial, I’m going to show a couple more of the mouse events we have available and how to use them. I’m also going to demonstrate the Ellipse object and talk a bit about Canvases and Opacity.

Here is the XAML for the canvas above:

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

   <Ellipse x:Name="ellipse" Canvas.Left="10" Canvas.Top="10" Height="60" Width="200" Fill="LightBlue" Stroke="Black" StrokeThickness="2"/>

   <Canvas x:Name="RectangleCanvas" Canvas.Left="57" Canvas.Top="27" Cursor="Hand" MouseLeftButtonUp="MouseClicked" MouseEnter="RollIntoButton" MouseLeave="RollOutofButton">
      <Rectangle x:Name="EnclosingRectangle" Width="103" Height="25" Stroke="Black" StrokeThickness="2" Fill="White" />
      <TextBlock x:Name="Hello" FontSize="12" Canvas.Left="5" Canvas.Top="5" Foreground="Blue" Text="Hello Silverlight" />
   </Canvas>

   <Ellipse x:Name="ellipse2" Canvas.Left="10" Canvas.Top="10" Height="60" Width="200" Fill="Blue" Opacity="0" Visibility="Collapsed"/>

</Canvas>

Here is the More >

As I was playing with the Radial Gradient in Tutorial 08, I saw something I wanted to investigate further, and while I was at it, I figured it would make a good tutorial in it’s own right.

The investigation this time involves moving the Origin of the Radial Gradient with the mouse at run-time.

As always, I’d like to give a reference to the Microsoft Silverlight SDK Online.

Here is the XAML for the canvas above:

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <TextBlock x:Name="Origin" Canvas.Left="0" Canvas.Top="0" Foreground="Blue" Text="GradientOrigin=.5, .5"/>

    <Rectangle x:Name="RadialGradient" Canvas.Left="0" Canvas.Top="40" Width="300" Height="150"  Cursor="Hand" MouseLeftButtonDown="GradientMouseDown" MouseLeftButtonUp="GradientMouseUp" MouseMove="GradientMouseMove">
        <Rectangle.Fill>
              <RadialGradientBrush x:Name="GradientBrush" GradientOrigin=".5, .5"> More >