Sign In

Visual Basic 9 and Silverlight

Posted By: Christian Liensberger | Nov 30th, 2007 @ 11:26 PM
Mario (a student partner from Austria) wrote an article on how to start with Silverlight 2.0 (1.1 has been renamed to 2.0, for those who are confused right now). The article is really nice and I thought it is worth to post it here on Channel 8:

Visual Basic 9 and Silverlight
Silverlight is a very interesting Technology. Version 2.0 (1.1 got renamed to 2.0, for those who are confused now) is now available as Alpha Release, which enables developers to built Silverlight-Web applications with Visual Basic (and Visual Studio). To use Silverlight with Visual Basic, you need to install Silverlight 2.0 Tools Alpha for Visual Studio 2008. When the environment is set up, you can create a new Silverlight Project. First, you will see some files in the Project Folder.



The most important Files are Page.xaml and Page.xaml.vb. Page.xaml the Design-File which Contains XML-Markup Code XAML. The second file is the Codefile.
Initially, we create a TextBlock and a Rectangle in our Designfile (page.xaml).

Both Elements need a name because we want to access them from the source code. This is only possible with a name. Width and Height are easy to set. If we want to set the Top and Left Property, we need the “Canvas.Top” and “Canvas.Left” Property. To Fill an Element we need a Color. If we want to have a GradientBrush, we need to GradientStop-Elements with an offset and a color for each element.

<Rectangle x:Name="Rect" Width="100" Height="100" Canvas.Left="100" Canvas.Top="100">
<Rectangle.Fill>
<LinearGradientBrush>
  <GradientStop Offset="0" Color="#FFCCFF00" />
  <GradientStop Offset="1" Color="#FF00FFCC"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock x:Name="Text" Canvas.Left="100" Canvas.Top="100" Text="(empty)" />


Now we can access our elements directly from the source code.



First, we change the Mouse cursor, when we move over the TextBlock-Control. This works with the Cursor-Property.

Public Sub Page_Loaded(ByVal o As Object, ByVal e As EventArgs)
  ' Required to initialize variables
  InitializeComponent()
  Text.Cursor = Cursors.Hand
End Sub

After that, we look at the Events. We could easily change the Fill-Property with one line of code:

Private Sub Text_MouseEnter(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles Text.MouseEnter
  Rect.Fill = New SolidColorBrush(Color.FromArgb(255, 100, 100, 255))
End Sub


If the Mouse cursor is placed over the TextBlock-control we set a new SolidColorBrush.

But the SolidColorBrush looks a bit boring, right? Well, let us have a LinearGradientBrush! The only thing we need is a new LinearGradientBrush with two GradientStops. The GradientStops needs the Color and Position. But we set this for the “MouseLeave” event, because we want a fancy mouseover effect.

Private Sub Text_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) Handles Text.MouseLeave
  Dim gb As New LinearGradientBrush
  Dim g1, g2 As New GradientStop
  g1.Color = Color.FromArgb(255, 100, 255, 100)
  g1.Offset = 0
  g2.Color = Color.FromArgb(255, 255, 255, 100)
  g2.Offset = 1
  gb.GradientStops.Add(g1)
  gb.GradientStops.Add(g2)
  Rect.Fill = gb
End Sub


Last but not least we want to use an animation. We need to define the animation in the XAML-File (well, we could also create one in VB-Code, but XAML is ways cooler;P). We will place the Animation in a new Element „Canvas.Resources“. We could also place the Animation (“Storyboard”) in an Event trigger. There are several ways for animations;). For the Animation we need a Storyboard (just like in a movie). As we want to use this animation in our source code, we set the x:Name attribute. The animation itself uses a DoubleAnimation. The TargetName-Attribute indicates the Object to be animated, TargetProperty the Property. We also need to set the duration an the From and To-Attributes.

<Canvas.Resources>
  <Storyboard x:Name="Animate" >
  <DoubleAnimation Storyboard.TargetName="Rect" Storyboard.TargetProperty="Width" Duration="00:00:01" From="100" To="200" />
  </Storyboard>
</Canvas.Resources>


Now we can easily execute the Animation – also with one single line of code.

Private Sub Text_MouseLeftButtonDown(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles Text.MouseLeftButtonDown
  Animate.Begin()
  Text.Text = "Hey! Silverlight rocks!"
End Sub


By the way, the second one changes the Text.



You can download the Silverlight tools for Visual Studio from here.
Tags: , , ,
Rating:
0
0
Views (2,870)
|
Comments (2)
|
Downloads
|
#Dec 3rd, 2007 @ 11:45 AM
sriram
sriram
silverlight is good ! personally i'm more of a c# guy, so its a c# + silverlight for me.
#Dec 4th, 2007 @ 3:56 AM
mario_mh
mario_mh
hey,

when i code silverlight i honestly use c# for it - i just wanted to 'support' the vb community cuz most articles on silverlight are in c# ... so my intention is to demonstrate that sl supports both Wink. i think i will write more on sl soon since it is really cool. really interesting is deploying on iis in connection with webservices which isn't the easiest thing to do ...