Post Page Advertisement [Top]

Prerequisites


You need the following components to complete this walkthrough:
  • Visual Studio 2010.
  • Silverlight 4 Tools for Visual Studio 2010.
All of the Silverlight software is available from the Silverlight download site.

To create a Silverlight project

  1. Create a new Silverlight Application project named HelloSilverlight in Visual Basic or Visual C#. Clear the Host the Silverlight application in a new Web site check box. For more information, see How to: Create a New Silverlight Project.
  2. Open Solution Explorer and notice that there are App.xaml and a MainPage.xaml files.
    App.xaml allows you to specify resources and code that applies to the entire application. MainPage.xaml defines a page, similar to a page in a Web site.
  3. In Solution Explorer, expand the MainPage.xaml node.
    MainPage.xaml.vb or MainPage.xaml.cs is the code-behind file that you write your managed code. This model is similar to one used in ASP.NET.
  4. If MainPage.xaml is not already open, double-click it in Solution Explorer.
    In the center of Visual Studio, you should see a white rectangular area. This area is called Design view. You can drag controls from the Toolbox and position elements to create your layout.





Visual Studio provides several options and windows to visually create your application. This section shows you how to start customizing your application by setting the background color using the Properties window and XAML view.

To set the background color

  1. Click the white rectangular area in Design view to select the Grid element.
    By default, Silverlight projects include a Grid.
  2. In the Properties window, find the Background property.
  3. In the second column, click the down arrow to open the color picker.




    1. Use the various controls to select a color.
      Design view updates with the new color.
      You can also set the background color manually in XAML view. XAML is an XML-based declarative language that you use to define your user interface (UI). For more information about XAML, see XAML Overview.
    2. In XAML view, find the Grid element.
    3. In the Grid start tag, change the Background color by typing another color.
      As you type, you should see an IntelliSense window with a list of colors to choose. When you specify a color, Design view updates with the new color.




      Grid allows you to create a table-type layout similar to a table in HTML. This section describes how to create a Grid layout.

      To define the Grid layout

      1. Make sure the Grid is still selected.
      2. In the Properties window, find the ShowGridLines property.
      3. In the second column, add a check mark to enable this property.
        In XAML view, notice that that the ShowGridLines property for the Grid is set to True.

        <Grid x:Name="LayoutRoot" Background="Beige" ShowGridLines="True">
        
        This property specifies to add lines to identify rows and columns in the Grid. This is a useful debugging feature when you are creating Grid layouts.
      4. Move your mouse pointer along the left or top edge of the Grid in Design view.
        The left and top edges are called grid rails. Your mouse pointer changes to cross hairs and a horizontal or a vertical line appears.
        5.Click the left grid rail to add a horizontal gridline
        6.Drag the gridline so that it is about 45 units from the top.The position appears as a number in the grid rail
        7.Add another horizontal gridline about 45 units from the bottom.






9.Press F5 or click the Start Debugging toolbar button to run the application.



has several controls to help you display data and get input from the user. This section describes how to add TextBlockTextBoxStackPanelCalendar, and Button controls to yourGrid layout.

To add controls

  1. Open the Toolbox window if it is not already open.
    Silverlight XAML controls in the Toolbox
  2. From the Toolbox, drag a TextBlock control to the first row and first column of the Grid.
    The following markup is added to XAML view.

    <TextBlock Height="23" HorizontalAlignment="Left" Margin="12,12,0,0" 
    Name="textBlock1" VerticalAlignment="Top" />
    
  3. Drag another TextBlock control to the second row and first column.
  4. Drag a TextBox control to the first row and second column.
  5. Drag a StackPanel control to the second row and second column.
    StackPanel is a useful control to stack elements vertically or horizontally. In the Grid cell below the TextBox, you will stack two controls vertically.
  6. Right-click the StackPanel, click Reset Layout, and then click All.
    The StackPanel fills the grid cell. The All command removes all of the absolute size and position settings.
  7. Drag a Calendar control to within the StackPanel element.
    When you add the Calendar control, notice that the tag name in XAML view is slightly different than the other controls. It is prefixed with sdk:. The Calendar control is not part of the core Silverlight controls and is implemented in a different assembly. The Calendar control is part of the Silverlight SDK. To use the Silverlight SDK controls, you must add an XML namespace and a reference to the assembly. When you drag a Silverlight SDK control to Design view or XAML view, an XML namespace is added automatically at the top of the MainPage.xaml file in the <UserControl> tag. As can be seen in the following markup, the sdk namespace uses a specific URI as described in Prefixes and Mappings for Silverlight Libraries.

    <UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    
    For more information about the Silverlight SDK and the controls in the Silverlight SDK, see Silverlight Tools and Controls by Function.
  8. Drag a TextBlock control just under the Calendar control, but within the StackPanel.
  9. Drag a Button control to the third row and second column of the Grid.
  10. Run the application.
    You can type text in the TextBox, you can select dates in the Calendar, but the Button does not do anything because code has not been added yet.




    Each control has events that enable you to respond to actions from the user. You create a method, called an event handler, to handle the event. To access controls and other elements programmatically, the elements have to be named. Previously in this walkthrough, you set the Name property for most of the controls you added to the application. This section describes how to create an event handler and add logic in the code-behind file.

    To create an event handler

    1. Select the Button.
    2. At the top of the Properties window, click the Events tab.
      All of the events for the Button are listed.
      Events tab
    3. Double-click the Click event.
      A default event handler for the Button is created. MainPage.xaml.vb or MainPage.xaml.cs is opened and the cursor is positioned in the okButton_Click event handler.
    4. Add the following code to the okButton_Click event handler.




      private void okButton_Click(object sender, RoutedEventArgs e)
      {
          string dateString;
          if (cal1.SelectedDate == null)
          {
              dateString = "<date not selected>";
          }
          else
          {
              dateString = cal1.SelectedDate.ToString();
          }
          message1.Text = "Hi " + name1.Text + "\n" +
              "Selected Date: " + dateString;
      }
        
      5.On the File menu, click Save All 
      6.Run the application 
      7.Type your name in the name box, select a date in the Calendar, and then click OK.
      1. Your name and selected date are displayed. Dynamic layout in browsercd
      You can dowload this simple application from HERE.

1 yorum:

Bottom Ad [Post Page]