Lucky Lotto

Choose your Lotto Numbers with this simple Tutorial using Random Numbers and features correctly coloured balls for the UK Lotto.

Printer Friendly Download Tutorial (183KB) Download Source Code (6.49KB) Online Demonstration

Step 1

Start Microsoft Visual Web Developer 2010 Express, then Select File then New Project... Select "Visual Basic" then "Silverlight Application" from Templates, select a Location if you wish, then enter a name for the Project and then click OK, see below:

New Project

Step 2

New Silverlight Application window should appear, uncheck the box "Host the Silverlight Application in a new Web site" and then select the required Silverlight Version, see below:

New Silverlight Application

Step 3

A Blank Page named MainPage.xaml should then appear, see below:

MainPage.xaml

Step 4

Then from the All Silverlight Controls section in the Toolbox select the Canvas control:

Canvas Control

Step 5

Draw a Canvas that fill the whole Page or in the XAML Pane between the "<Grid>" and "</Grid>" lines type the following XAML:

<Canvas Height="300" Width="400" HorizontalAlignment="Left" VerticalAlignment="Top" Name="Page">
</Canvas>

See below:

MainPage with Canvas

Step 6

Then from the All Silverlight Controls section in the Toolbox select the StackPanel control:

StackPanel Control

Step 7

Draw a StackPanel on the Canvas by dragging a StackPanel from the Toolbox onto the Canvas then in the XAML Pane inbetween the "<Canvas>" and "</Canvas>" tags change the "<StackPanel> line to the following:

<StackPanel Canvas.Left="40" Canvas.Top="35" Height="65" Width="320" Orientation="Horizontal" Name="Lottery"/>

See below:

MainPage with Canvas and StackPanel

Step 8

Then from the Common Silverlight Controls section in the Toolbox select the Button control:

Button Control

Step 9

Draw a Button on the Canvas by dragging the Button from the Toolbox onto the Canvas, then in the XAML Pane below the "<StackPanel>" tag change the "<Button>" line to the following:

<Button Canvas.Left="163" Canvas.Top="263" Height="23" Width="75" Name="Choose" Content="Choose"/> 

See below:

MainPage with Canvas, StackPanel and Button

Step 10

Right Click on the Page or the entry for "MainPage.xaml" in Solution Explorer and choose the "View Code" option. In the Code View below "End Sub" for "Public Sub New()" Constructor type the following Function:

Private Function Numbers() As List(Of Integer)
  Dim _number As Integer
  Dim _numbers As New List(Of Integer)
  While _Numbers.Count < 6 ' Select 6 Numbers
    Randomize(Timer) ' Random Number with Seed
    _number = Int((49 * Rnd()) + 1) ' Between 1 - 49
    If Not _numbers.Contains(_number) _
      Or _numbers.Count < 1 Then ' If Chosen or None
      _numbers.Add(_number) ' Add Number
    End If
  End While
  Return _Numbers
End Function

See Below:

MainPage Numbers Function

Step 11

While still in the Code View for MainPage.xaml, below "End Function" for "Private Function Numbers()" Function, type the following Sub:

Private Sub Draw(ByRef Stack As StackPanel)
  Stack.Children.Clear()
  For Each _number As Integer In Numbers() ' Choose Numbers
    Dim _container As New Canvas
    Dim _ball As New Ellipse
    Dim _text As New TextBlock
    _container.Margin = New Thickness(2)
    _container.Width = 48
    _container.Height = 48
    _ball.Width = _container.Width
    _ball.Height = _container.Height
    Select Case _number
      Case 1 To 9
        _ball.Fill = New SolidColorBrush(Colors.White)
      Case 10 To 19 ' Sky Blue
        _ball.Fill = New SolidColorBrush(Color.FromArgb(255, 112, 200, 236))
      Case 20 To 29
        _ball.Fill = New SolidColorBrush(Colors.Magenta)
      Case 30 To 39 ' Lawn Green
        _ball.Fill = New SolidColorBrush(Color.FromArgb(255, 112, 255, 0))
      Case 40 To 49
        _ball.Fill = New SolidColorBrush(Colors.Yellow)
    End Select
    _ball.Effect = New Effects.DropShadowEffect
    _container.Children.Add(_ball)
    _text.FontSize = 12
    _text.Text = _number
    _text.Margin = New Thickness(16)
    _container.Children.Add(_text)
    Stack.Children.Add(_container)
  Next
End Sub

See Below:

MainPage Draw Function

Step 12

Return to the Designer View, by selecting the "MainPage.xaml" Tab, or Right Click on the Page or the Entry for "MainPage.xaml" in Solution Explorer and choose the "View Designer" option.
Double Click on the "Choose" Button Control and type in the Choose_Click Sub:

Draw(Lottery)

See Below:

Choose Button Click Event

Step 13

Save the Project as you have now finished the Silverlight application. Select Debug then Start Debugging or click on Start Debugging:

Start Debugging

After you do, the following will appear in a new Web Browser window:

Application Running

Step 14

Click the Choose Button to select your Lotto Numbers, see below:

Lucky Lotto

Step 15

Close the Browser window by clicking on the Close Button Close on the top right of the Web Browser to Stop the application.

This is a very simple Lotto Number Chooser using a Random Number generator and SIlverlight, you can customise the ball colours to match your Lotto, instead of the UK colours used here. Try making changes to show the numbers in ascending or descending order, it is up to you!

Share

Creative Commons License

Copyright Comentsys © 2009 - 2010, All rights reserved. About | Contact | Link to Page
Valid XHTML 1.1! Valid CSS Level Double-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0 This website is ICRA rated Creative Commons License