15. C#/Xaml Windows 10 app 강좌 Hello, Windows 10

올해 발표하고 많은 사람들이 업데이트한 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을 만들어 봅시다

<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>
 

바로 생성된 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>

사이에 코드를 적어 봅시다

<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>
 

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 생각보다 어렵지 않고 신기하죠? 다음은 로또번호 생성기를 만들면서 버튼도 만들어 보겠습니다!