VS02(22-04-06)

[1]WPF에 hello출력하기

<Window x:Class="_025_WPFHello.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_025_WPFHello"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="500">
    <Grid x:Name="grid1" Background="Orange">
        <TextBlock
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            FontSize="36"
            Foreground="Blue"
            FontWeight="Bold"
            MouseDown="MouseDownEvent">Hello World!</TextBlock> 
    </Grid>
    
</Window>

WPF에 helloworld를 출력하는 xaml코드이다.

<Grid x:Name="grid1" Background="Orange">
        <TextBlock
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            FontSize="36"
            Foreground="Blue"
            FontWeight="Bold"
            MouseDown="MouseDownEvent">Hello World!</TextBlock> 
    </Grid>

마크업언어의 특성을 활용해주었다.

꺽쇠괄호 안에 특성을 코딩해준다.

수평정렬을 센터로

수직정렬도 센터로

폰트사이즈와 foreground(글자색)

background가 배경색이다.

fontweight는 bold(굵게)로 설정해주었다.

mousedown은 클릭 이벤트이다.

텍스트블록 클릭 시에 mousedownevent를 실행해준다.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace _025_WPFHello
{
  /// <summary>
  /// Interaction logic for MainWindow.xaml
  /// </summary>
  public partial class MainWindow : Window
  {
    public MainWindow()
    {
      InitializeComponent();
    }

    private void MouseDownEvent(object sender, MouseButtonEventArgs e)
    {
      MessageBox.Show("TextBlock Clicked!", "Msg");
      if(grid1.Background == Brushes.Orange)
        grid1.Background = Brushes.Aqua;
      else
        grid1.Background = Brushes.Orange;
    }
  }
}

앞서 설정한 mousedownevent에 대한 함수를 설정해준다.

텍스트블록이 클릭되면 Msg라는 title을 가진 Textblock Clicked라는 내용의 메세지박스를 출력한다.

그리고 grid1의 배경이 오렌지로 브러쉬되어있으면 aqua로 

아니라면 orange로 변경해준다.

지금은 background를 pink로 설정해주었다.

---

[2]xaml로 레이아웃 격자 꾸미기

<Window x:Class="_026_grid.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_026_grid"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="500">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Button Margin="10,10,10,5" Grid.Row="0">Click Me 1</Button>
        <Button Margin="10,5,10, 5" 
                Grid.Row="1"
                Grid.Column="1">Click Me 2</Button>
        <Button Margin="10,5,10,10" 
                Grid.Row="2"
                Grid.Column="2">Click Me 3</Button>
    </Grid>
</Window>

grid에 행과열을 만들어 비율을 설정하고 버튼을 추가해주었다.

<Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

행열선언부이다.

행과 열을 세 개씩 추가해주었고

첫번째 행의 높이를 두배로 설정해주었다.

두번째와 세번째의 너비를 두배로 설정해주었다.

(총량의 5등분을 하여 2칸을 할당해준 것)

<Button Margin="10,10,10,5" Grid.Row="0">Click Me 1</Button>
        <Button Margin="10,5,10, 5" 
                Grid.Row="1"
                Grid.Column="1">Click Me 2</Button>
        <Button Margin="10,5,10,10" 
                Grid.Row="2"
                Grid.Column="2">Click Me 3</Button>

margin(왼쪽,위쪽,오른쪽,아래쪽)을 px단위로 설정해준다. 텍스트는 'Click me 1'

위치는 row0이다 cloumn은 설정을 안하면 자동으로 0번째 열에 배정되는건지 모르겠다.

두번째 버튼은 1,1에 배치해주고

세번째 버튼은 2,2에 배치해주었다.

cs파일은 편집하지 않았다.

출력과 편집창이다.

---

[3]stackpanel

<Window x:Class="_027_stackPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_027_stackPanel"
        mc:Ignorable="d"
        Title="MainWindow" Height="380" Width="500">
    <Grid Background="LightSteelBlue">
        <StackPanel Margin="50" Background="AliceBlue">
            <TextBlock HorizontalAlignment="Center"
                       FontSize="18"
                       FontWeight="Bold"
                       Padding="10">로그인</TextBlock>
            <StackPanel Orientation="Horizontal"
                        Margin="20,20,20,10">
                <TextBlock HorizontalAlignment="Right"
                           FontSize="18"
                           MinWidth="100">Id:</TextBlock>
                <TextBox x:Name="txtId" FontSize="18" MinWidth="200"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal"
                        Margin="20,20,20,10">
                <TextBlock HorizontalAlignment="Right"
                           FontSize="18"
                           MinWidth="100">Password:</TextBlock>
                <PasswordBox 
                    x:Name="txtPassword" FontSize="18" MinWidth="200"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock 
                    MinWidth="100"></TextBlock>
                <Button x:Name="btnLogin"
                        Content="Login" 
                        Margin="20"
                        FontSize="18" 
                        MinWidth="200"
                        Click="btnLogin_Click"/>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

스택패널을 사용하여 로그인 창을 코딩해보았다.

그리드의 배경색을 라이트 스틸 블루로 설정해주었다.

<StackPanel Margin="50" Background="AliceBlue">
            <TextBlock HorizontalAlignment="Center"
                       FontSize="18"
                       FontWeight="Bold"
                       Padding="10">로그인</TextBlock>
            <StackPanel Orientation="Horizontal"
                        Margin="20,20,20,10">
                <TextBlock HorizontalAlignment="Right"
                           FontSize="18"
                           MinWidth="100">Id:</TextBlock>
                <TextBox x:Name="txtId" FontSize="18" MinWidth="200"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal"
                        Margin="20,20,20,10">
                <TextBlock HorizontalAlignment="Right"
                           FontSize="18"
                           MinWidth="100">Password:</TextBlock>
                <PasswordBox 
                    x:Name="txtPassword" FontSize="18" MinWidth="200"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock 
                    MinWidth="100"></TextBlock>
                <Button x:Name="btnLogin"
                        Content="Login" 
                        Margin="20"
                        FontSize="18" 
                        MinWidth="200"
                        Click="btnLogin_Click"/>
            </StackPanel>
        </StackPanel>

스택패널 구현부이다.

기본적으로 stackpanel은 vertical을 default로 가진다.

정의는 말 그대로 panel들을 stack구조처럼 쌓는 것이다.(정렬)

가장 큰 틀의 stackpanel을 vertical로 설정하고 색을 설정해주었다.

그 후 로그인 이라는 텍스트블록을 설정하여 수평정렬을 중앙으로 하고 패딩을 10px주었다.

[margin과 padding의 차이는 마진은 실 범위 바깥쪽으로 여유공간을 주는 것이고 패딩은 실 범위 안쪽으로 여백을 주는 것이다.

같아보일 수 있지만 예를들면 두개의 버튼을 붙여야할 땐 padding을 써야한다.

margin을 사용하면 두 버튼사이에 유격이 생긴다.]

 

<TextBlock HorizontalAlignment="Right"
                           FontSize="18"
                           MinWidth="100">Id:</TextBlock>
                <TextBox x:Name="txtId" FontSize="18" MinWidth="200"/>

이 부분에서 horizontalAlignment = "str"

str에 right,left,center를 넣어도 출력이 같다. 이유를 모르겠다.

여튼 id라는 텍스트를 가진 텍스트블록을 선언해준다.

그다음 txtid라는 name을 가진 텍스트박스를 선언해주고 최소너비를 200으로 설정하여 밑에 선언해줄 패스워드박스와 길이를 맞춰주었다.

밑엔 패스워드박스를 선언해주었다.

<StackPanel Orientation="Horizontal">
                <TextBlock 
                    MinWidth="100"></TextBlock>
                <Button x:Name="btnLogin"
                        Content="Login" 
                        Margin="20"
                        FontSize="18" 
                        MinWidth="200"
                        Click="btnLogin_Click"/>
            </StackPanel>

그리고 이 부분에 새로 스택배널을 생성해주고

빈 텍스트박스를 선언해준다.(이걸 선언하지 않으면 스택 구조상 뒤에 선언해줄 버튼이 앞쪽으로 밀려나기 때문)

그 다음 버튼을 선언하여 name을 btnlogin으로 content(텍스트)를 Login으로 

최소너비를 200으로 맞추어 위에 텍스트박스와 패스워드박스와의 너비를 맞춰주었다.

Click이벤트의 이름은 btnLogin_Click으로 설정해주었다.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace _027_stackPanel
{
  /// <summary>
  /// Interaction logic for MainWindow.xaml
  /// </summary>
  public partial class MainWindow : Window
  {
    public MainWindow()
    {
      InitializeComponent();
    }

    private void btnLogin_Click(object sender, RoutedEventArgs e)
    {
      if (txtId.Text == "abcd" && txtPassword.Password == "1234")
        MessageBox.Show("Login Success!");
      else
        MessageBox.Show("Login Failed!");
    }
  }
}

cs파일에서 위에 설정해준 Click이벤트를 설정해주었다.

txtid의 텍스트가 abcd이고 패스워드가 1234인 경우 Success메시지박스를 출력하고

아닐경우 failed를 출력한다.

실행결과