우리 로또 번호을 universal app으로 만들어 봅시다

먼저 로또번호가 나와야할 Textblock이 하나 필요하겠네요

두번째 로는 버튼이 필요할 것 같네요 버튼을 누를때 마다 새로운 로또 번호를 생성하도록 만들어 보겠습니다

첫번째로는 xaml 파일로 버튼과 텍스트 블록을 만들어 줍니다. 위치나 크기 등등은 마음대로 해보세요

이렇게 위치도 바꾸어 보고 만져보면서 xaml에 더 나아가 윈도우앱에 익숙해집니다!



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<Page
    x:Class="uniappTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:uniappTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
 
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="0,0,-647,0">
        <Button x:Name="button" Content="로또 번호 생성하기" HorizontalAlignment="Left" Margin="675,188,0,0" VerticalAlignment="Top" Click="button_Click"/>
        <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="148,188,0,0" TextWrapping="Wrap" Text="로또 번호 생성기" VerticalAlignment="Top" Width="522" Height="32"/>
 
 
    </Grid>
</Page>
 
cs

 저같은 경우는 텍스트 블록을 하나두고 로또번호 생성기라고 처음에 넣어줄겁니다

그냥 하얀 화면에 버튼만 보인다면 심심하니까요?

그리고 그 옆에 버튼을 하나 두어서 누를때 마다 새로운 로또번호가 나오게 할 것 입니다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
 
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
 
namespace uniappTest
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        int[] number;
        Random my_rand;
        public MainPage()
        {
            number = new int[7];
            my_rand = new Random();
            this.InitializeComponent();
        }
 
        private void button_Click(object sender, RoutedEventArgs e)
        {
            MakeNumber();
            textBlock.Text = " "// 초기화 전에 있던 거 지우기
            
           
            for (int i = 0; i < number.Length;i++)
            {
                
                if (number.Length-1==i)
                {
                    textBlock.Text += " 보너스 번호는 " + number[number.Length - 1];
                }
                else
                {
                    textBlock.Text += " " + number[i];
                }
            }
        }
        void MakeNumber()
        {
            int a;
            for (int i = 0; i < number.Length; i++)
            {
                a = my_rand.Next(145);
                if (true == CheckSame(i, a))
                {
                    number[i] = a;
                }
                else
                {
                    i--;
                }
            }
 
        }
        bool CheckSame(int index,int value)
        {
            for (int i = 0; i < index; i++)
            {
                if (value == number[i])
                {
                    return false;
                }
            }
            return true;
        }
       
    }
}
 
cs


나머지는 앞에서 콘솔로 만들었던 것과 같습니다! 조금 달랐던점은 제가 주석으로 표시를 해두었으니 참고하시면서

꼭 자기손으로 만들어 보시길 바랍니다!


실행화면










올해 발표하고 많은 사람들이 업데이트한 Windows 10!

마이크로소프트의 차기 운영체제로 마이크로소프트에서도 밀고 있는 운영체제인데요 지금까지 배운 C#으로

GUI 프로그래밍을 해보겠습니다.

첫 번째로 프로젝트를 만들어 봅시다!

1. File -> New  -> Project 를 누릅니다.



2.Visual C# -> Universal -> Blank App(Universal Windows) 를 누르고 이름을 HelloWindows10 을 하고 OK를 눌러줍니다.

짠 하고 생성되었습니다 다른것들은 차차 알아갈테니 우리가 가장 중요하게 봐야 하는것!

MainPage.xaml을 클릭해줍니다


그럼 이렇게 Xaml과 Degin이 생깁니다.

우리가 중점을 두어야 할 것은 바로 이 Xaml입니다. 마이크로소프트는 처음에 C언어와 C++언어를 이용해서 윈도우즈 프로그래밍 언어를 만들게끔 도구들을 제공했습니다. 바로 Win32 API와 MFC 인데요 하지만 너무 어려웠고 비주얼 스튜디오때문에 쓴다는 말이 있을 정도로 그렇게 까지 좋지 않았습니다.

그렇게 발전하고 발전하다가 나온게 xaml이라는 마크업 언어로 디자인을 하고 C#/C++/VB로 코딩을 하는 방법을 나오게 되었고 지금 wpf->windows 8->windows 10이런식으로 발전하면서 윈도우즈 프로그래밍은 이렇게 만드는 것으로 고착화?가 된듯 합니다. 이런 배경이 궁금하신분들은 찾아보시고! 우리 Hello Windows 10을 만들어 봅시다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<Page
    x:Class="HelloWindows10.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWindows10"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
 
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
    </Grid>
</Page>
 
cs

바로 생성된 xaml 파일! 하나하나 볼까요?

      x:Class="HelloWindows10.MainPage"

이것은 xaml 파일의 가장 중요한 루트(뿌리)에서만 나타나며 C#에 의하면 class 와 같은 의미를 가지는 것입니다 즉 HelloWindows10이라는 네임스페이스 하위의 Mainpage 클래스는 Page로부터 나타난 것이다 라고 생각하시면 됩니다.

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

2006년이 마이크로소프트가 이런 방식과 xaml을 처음으로 선보인 해 입니다. winfx라는것은 이런 방식이 wpf라고도 하는데 이렇게 발표되기 전에는 Winfx라고도 불렸다네요 그래서 winfx가 삽입되어 있습니다. xaml은 WPF,실버라이트,윈도우폰,윈도우즈 사이에서 어느정도 호환은 되지만 공통되는 것은 클래스와 속성과 기능뿐입니다.

나머지 세줄은 마이크로소프트에서 디자인과 기획툴로 사용되는 블랜드라는 툴을 위한 코드이므로 무시하셔도 됩니다!

자그럼 우리 Hello Windows 10을 만들어 볼까요?

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    </Grid>

사이에 코드를 적어 봅시다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<Page
    x:Class="HelloWindows10.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWindows10"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
 
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Text="Hello, Windows 10"
                   FontFamily="segoe UI"
                   FontSize="96"
                   Foreground="SkyBlue"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center" />
    </Grid>
</Page>
 
cs

1. TextBlock 글자를 보여주는 도구 입니다 그안에 여러가지 속성이 있습니다.

Text=Text="Hello, Windows 10"""  ""안에 우리가 쓰고 싶은 글자를 써주시면 됩니다

FontFamily="segoe UI"               ""안에 원하는 폰트 이름을 넣어주시면 됩니다. 저는 윈도우 공식폰트인 segoe UI

FontSize="100"                         폰트 사이즈! 저는 단순하게 100 넣어볼게요!

Foreground="SkyBlue"              색생! 저는 시원하게 Skyblue를 넣어 보겠습니다!

 HorizontalAlignment="Center"   수평으로 가운데! 라는 뜻인데요 어느 플랫폼이든 가운데에 넣을 수 있게 됩니다!

 VerticalAlignment="Center"      수직으로 가운데! 이또한 어느 플랫폼이나 기기든 가운데에 넣을수 있게 됩니다.


이렇게 나오면 잘 됮거에요!

그럼 실행해 봅시다!


우아 먼가 멋있죠? 아 뭔가 예뻐... 우리의 첫 GUI 프로그램 Hello World가 완성되었습니다.

Xaml 생각보다 어렵지 않고 신기하죠? 다음은 로또번호 생성기를 만들면서 버튼도 만들어 보겠습니다!


+ Recent posts