现在的位置: 首页 > 综合 > 正文

[Silverlight入门系列]动态创建控件和绑定

2011年06月08日 ⁄ 综合 ⁄ 共 2877字 ⁄ 字号 评论关闭

通常我们开发Silverlight界面都是在XAML里面定义好UI,但如何实现Silverlight界面自定义,在运行时动态生成界面?一种方法是动态加载Xaml字符串,相当于批量生成控件,另外一个方法是用代码一行一行生成每个控件。例如,我们通常定义的界面是在Xaml里面:

   1: <Grid Margin="10">

   2:     <Grid.ColumnDefinitions>

   3:         <ColumnDefinition Width="100" />

   4:         <ColumnDefinition Width="*" />

   5:     </Grid.ColumnDefinitions>

   6:              

   7:     <Grid.RowDefinitions>

   8:         <RowDefinition Height="Auto" />

   9:         <RowDefinition Height="Auto" />

  10:         <RowDefinition Height="Auto" />

  11:         <RowDefinition Height="*" />

  12:     </Grid.RowDefinitions>

  13:  

  14:     <TextBlock Text="First Name"

  15:                 Height="19"

  16:                 Margin="0,7,31,4" />          

  17:     <TextBox x:Name="FirstName"

  18:                 Margin="3"

  19:                 Grid.Row="0"

  20:                 Grid.Column="1" />

  21:              

  22:     <TextBlock Text="Last Name"

  23:                 Margin="0,7,6,3"

  24:                 Grid.Row="1"

  25:                 Height="20" />

  26:     <TextBox x:Name="LastName"

  27:                 Margin="3"

  28:                 Grid.Row="1"

  29:                 Grid.Column="1" />

  30:  

  31:  

  32:     <TextBlock Text="Date of Birth"

  33:                 Grid.Row="2"

  34:                 Margin="0,9,0,0"

  35:                 Height="21" />

  36:     <sdk:DatePicker x:Name="DateOfBirth"

  37:                     Margin="3"

  38:                     Grid.Row="2"

  39:                     Grid.Column="1" />

  40:  

  41:  

  42:     <Button x:Name="SubmitChanges"

  43:             Grid.Row="3"

  44:             Grid.Column="3"

  45:             HorizontalAlignment="Right"

  46:             VerticalAlignment="Top"

  47:             Margin="3"

  48:             Width="80"

  49:             Height="25"

  50:             Content="Save" />

  51: </Grid>

现在我们来动态加载Xaml字符串,相当于批量生成控件:

   1: public MainPage()

   2: {

   3:     InitializeComponent();

   4:  

   5:     Loaded += new RoutedEventHandler(MainPage_Loaded);

   6: }

   7:  

   8: void MainPage_Loaded(object sender, RoutedEventArgs e)

   9: {

  10:     CreateControls();

  11: }

  12:  

  13:  

  14: private void CreateControls()

  15: {

  16:     string xaml =

  17:     "<Grid Margin='10' " +

  18:         "xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' " +

  19:         "xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' " +

  20:         "xmlns:sdk='http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk'>" +

  21:         "<Grid.ColumnDefinitions>" +

  22:             "<ColumnDefinition Width='100' />" +

  23:             "<ColumnDefinition Width='*' />" +

  24:         "</Grid.ColumnDefinitions>" +

  25:  

  26:         "<Grid.RowDefinitions>" +

  27:             "<RowDefinition Height='Auto' />" +

  28:             "<RowDefinition Height='Auto' />" +

  29:             "<RowDefinition Height='Auto' />" +

  30:             "<RowDefinition Height='*' />" +

  31:         "</Grid.RowDefinitions>" +

  32:  

  33:         "<TextBlock Text='First Name' Height='19' Margin='0,7,31,4' />" +

  34:         "<TextBox x:Name='FirstName' Margin='3' Grid.Row='0' Grid.Column='1' />" +

  35:  

  36:         "<TextBlock Text='Last Name' Margin='0,7,6,3' Grid.Row='1' Height='20' />" +

  37:         "<TextBox x:Name='LastName' Margin='3' Grid.Row='1' Grid.Column='1' />" +

  38:  

  39:         "<TextBlock Text='Date of Birth' Grid.Row='2' Margin='0,9,0,0' Height='21' />" +

  40:         "<sdk:DatePicker x:Name='DateOfBirth' Margin='3' Grid.Row='2' Grid.Column='1' />" +

  41:  

  42:         "<Button x:Name='SubmitChanges' Grid.Row='3' Grid.Column='3' " +

  43:             "HorizontalAlignment='Right' VerticalAlignment='Top' " +

  44:             "Margin='3' Width='80' Height='25' Content='Save' />" +

  45:     "</Grid>";

  46:  

  47:  

  48:     UIElement tree = (UIElement)XamlReader.Load(xaml);

  49:  

  50:     LayoutRoot.Children.Add(tree);

  51: }

第二种方法是用代码动态生成每一个Silverlight控件:

   1: private void CreateControlsUsingObjects()

   2: {

   3:     // <Grid Margin="10">

   4:     Grid rootGrid = new Grid();

   5:     rootGrid.Margin = new Thickness(10.0);

   6:              

   7:     // <Grid.ColumnDefinitions>

   8:     //   <ColumnDefinition Width="100" /><

抱歉!评论已关闭.