Windows 8 practical tips series: 1. Use Xaml + C # to develop the first Metro Style Application

First we need to install Windows 8 and VS2012,: http://msdn.microsoft.com/zh-CN/windows/apps/br229516/

Open VS2012, select Windows Metro Style, and then create a Blank App project, as shown in:

650) this. width = 650; "alt =" "data-mce-src =" http://www.bkjia.com/uploads/allimg/131228/1FP04W8-0.jpg "src =" http://www.bkjia.com/uploads/allimg/131228/1FP04W8-0.jpg "/>

The newly created project structure is as follows:

650) this. width = 650; "alt =" "data-mce-src =" http://www.bkjia.com/uploads/allimg/131228/1FP052E-2.jpg "src =" http://www.bkjia.com/uploads/allimg/131228/1FP052E-2.jpg "/>

Drag a button and ListBox to the interface and set the button event and the DataTemplate of ListBox, as shown in the following Xaml code:

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">        <Button Content="Button" Name="button1" HorizontalAlignment="Left"                 Margin="135,124,0,0" VerticalAlignment="Top" Click="button1_Click"/>        <ListBox HorizontalAlignment="Left" Name="listbox1" Height="100"                 Margin="135,187,0,0" VerticalAlignment="Top" Width="140">            <ListBox.ItemTemplate>                <DataTemplate>                    <TextBlock  Width="60" Text="{Binding ItemName}"/>                                    </DataTemplate>            </ListBox.ItemTemplate>        </ListBox>    </Grid>

The Xaml. cs file is as follows:

/// <Summary> // An empty page that can be used on its own or navigated to within a Frame. /// </summary> public sealed partial class MainPage: Page {public MainPage () {this. initializeComponent (); listbox1.ItemsSource = ItemModel. getItem (); button1.Content = "Windows 8 button";} // <summary> // Invoked when this page is about to be displayed in a Frame. /// </summary> /// <param name = "e"> Event data that describes how this page was reached. the Parameter // property is typically used to configure the page. </param> protected override void OnNavigatedTo (NavigationEventArgs e) {} private void button#click (object sender, RoutedEventArgs e) {this. button1.Content = this. button1.Content + "1 ";}}

The source code of the Data bound to ListBox is as follows:

Public class ItemModel {public string ItemName {get; set;} public string ItemValue {get; set;} public static List <ItemModel> GetItem () {List <ItemModel> list = new List <ItemModel> (); list. add (new ItemModel () {ItemName = "Beijing", ItemValue = "010"}); list. add (new ItemModel () {ItemName = "Shanghai", ItemValue = "020"}); list. add (new ItemModel () {ItemName = "Chengdu", ItemValue = "028"}); return list ;}}

Run the following command:

650) this. width = 650; "alt =" "data-mce-src =" http://www.bkjia.com/uploads/allimg/131228/1FP05X9-4.jpg "src =" http://www.bkjia.com/uploads/allimg/131228/1FP05X9-4.jpg "/>

This article is from the "Cheng Xingliang-Silverlight" blog, please be sure to keep this source http://chengxingliang.blog.51cto.com/3972944/1009048