win8的第一个应用

赶上有个microsoft的应用提交比赛,迅速的学习了一下win8 app的开发,原来对wp7和sl没有什么了解，现学现卖了哈~

学习过程中，除了microsoft的培训之外，主要还是系统的学习了传智播客.net培训Windows 8开发视频教程",讲的深入浅出,看着不累,适合初学者

记录一下我做这个简单地不能再简单的应用的过程吧~

target:简单的实现了,文字连连看

step1.首先写配置界面,可以自己定义创建Grid的行列数,以及用于连连看中配对的文字

<Grid Name="llkConfig" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <TextBox x:Name="txtRow" HorizontalAlignment="Left" Margin="508,391,0,0" TextWrapping="Wrap" Text="10" VerticalAlignment="Top"/>
    <TextBox x:Name="txtCol" HorizontalAlignment="Left" Margin="720,391,0,0" TextWrapping="Wrap" Text="10" VerticalAlignment="Top"/>
    <TextBox x:Name="txtText" HorizontalAlignment="Left" Margin="508,458,0,0" TextWrapping="Wrap" Text="传智播客培训开发视频教程" VerticalAlignment="Top" Width="276"/>
    <Button x:Name="btnRun" Style="{StaticResource AppNextAppBarButtonStyle}" HorizontalAlignment="Left" Margin="840,391,0,0" VerticalAlignment="Top" Height="99" Width="130"  Click="btnRun_Click"/>
    <TextBlock x:Name="lblRow" HorizontalAlignment="Left" Margin="402,391,0,0" TextWrapping="Wrap" Text="行数：" VerticalAlignment="Top" Width="101" FontSize="30"/>
    <TextBlock x:Name="lblCol" HorizontalAlignment="Left" Margin="614,391,0,0" TextWrapping="Wrap" Text="列数：" VerticalAlignment="Top" Width="101" FontSize="30"/>
    <TextBlock x:Name="lblText" HorizontalAlignment="Left" Margin="346,454,0,0" TextWrapping="Wrap" Text="显示文本：" VerticalAlignment="Top" Width="157" FontSize="30"/>
    <TextBlock x:Name="lblTitle" Style="{StaticResource TitleTextStyle}"  HorizontalAlignment="Left" Margin="508,178,0,0" TextWrapping="Wrap" Text="文字连连看" VerticalAlignment="Top" FontSize="72"/>
</Grid>

step2.根据输入的参数生成Grid，并且随机生成Grid中的元素

private void InitGridPanel()
{
    // 生成10行10列布局的Grid
    for (int i = 0; i < RowDef; i++)
    {
        RowDefinition rowDef = new RowDefinition();
        llkGrid.RowDefinitions.Add(rowDef);
    }
    for (int j = 0; j < ColDef; j++)
    {
        ColumnDefinition colDef = new ColumnDefinition();
        llkGrid.ColumnDefinitions.Add(colDef);
    }

    // 创建文字数组
    string[] badge = new string[Text.Length];
    for (int i = 0; i < Text.Length; i++)
    {
        badge[i] = Text[i].ToString();
    }

    // 将文字数组放到指定行列的Grid数组中
    List<string> stringList = new List<string>();
    for (int i = 0; i < RowDef * ColDef / 2; i++)
    {
        int num = new Random(i + DateTime.Now.Millisecond).Next(badge.Length);
        stringList.Add(badge[num]); 
        stringList.Add(badge[num]);
    }

    for (int row = 0; row < RowDef; row++)
    {
        for (int col = 0; col < ColDef; col++)
        {
            int num = new Random(row + col + DateTime.Now.Millisecond).Next(stringList.Count);
            Button button = new Button();
            // 给Button的Content赋值
            button.Content = stringList[num];
            // 移除已被赋值的stringList
            stringList.RemoveAt(num);
            // 给Button指定样式
            button.FontSize = 50;
            button.FontFamily = new FontFamily("宋体");
            // 增加点击事件
            button.Click += new RoutedEventHandler(this.button_Click);

            llkGrid.Children.Add(button);
            // 这里设置button在Grid中的位置，因为button已经在上一行确定了在哪个Grid，所以这里不用指定Grid了
            Grid.SetRow(button, row);
            Grid.SetColumn(button, col);
        }
    }
}

step3.添加对按钮的监听事件

private void button_Click(object sender, RoutedEventArgs e)
{
    Button button = (Button)sender;
    if (OriginalButton == null)
    {
        // 第一次点击，或上一次点击消除了一对按钮
        OriginalButton = button;
        button.Foreground = GetColorFromHexa("#FFF50000");
    }
    else
    {
        if (OriginalButton.Equals(button))
        {
            OriginalButton.Foreground = GetColorFromHexa("#FFFFFFFF");
        }
        else
        {
            if (OriginalButton.Content.ToString().Equals(button.Content.ToString()))
            {
                // 两次点击的相同，消除按钮
                button.Content = "";
                OriginalButton.Content = "";
                button.Visibility = Visibility.Collapsed;
                OriginalButton.Visibility = Visibility.Collapsed;
                Sum -= 2;
                if (Sum == 0)
                {
                    ShowMessageDialog("游戏通关", "提示");
                    GoToMainPage();
                }
            }
            else
            {
                OriginalButton.Foreground = GetColorFromHexa("#FFFFFFFF");
            }
        }
        OriginalButton = null;
    }
}

finally,对输入行列数做一个验证，行列成绩须为偶数等等细节，就可以了~

开始实验一把~

通关~

请多指教~