[C# WPF] WPF 기본 컨트롤 사용하기(Textblock, TextBox, Button, ComboBox, Grid, StackPanel)

안녕하세요.

 

오늘은 WPF에서 기본 컨트롤들 Textblock, TextBox, Button, ComboBox, Gird,

StackPanel 등과 같은 기본 컨트롤들을 가지고 Xaml 소스로 직접 타이핑 하여

레이아웃 구성 및 배치를 해보도록 하겠습니다.

 

참고는 아래 유튜브 사이트를 보면서 직접 따라 해본 것이고, 저도 지금 WPF를 독학으로 배우면서 부족한 부분들이 많기 때문에 여러분들도 아래 사이트에서 하나씩 강의를 보시면서 학습하시는 걸 추천 드리겠습니다!

 

유튜브 링크

https://www.youtube.com/watch?v=Vjldip84CXQ

 

그럼 바로 아래와 같은 이미지대로 UI 구성 되도록 Xaml 소스 코드를 작성해 보도록 하겠습니다.

 

UI 구성

 

예제 소스
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<Window x:Class="WpfBasics.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:WpfBasics"
        mc:Ignorable="d"
        Title="Wpf Basics" Height="800" Width="400">
 
    <Border Padding="10">
        <StackPanel>
            
            <!--Buttons-->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
 
                <Button x:Name="ApplyButton" Click="ApplyButton_Click" Margin="0 0 10 0" Grid.Column="0" Content="Apply"/>
                <Button x:Name="ResetButton" Click="ResetButton_Click" Margin="0 0 10 0" Grid.Column="1" Content="Reset"/>
                <Button x:Name="RefreshButton" Click="RefreshButton_Click" Margin="0 0 10 0" Grid.Column="2" Content="Refresh"/>
            </Grid>
            
            <!--TextBlock-->
            <TextBlock Text="Pulse Properties" FontWeight="Bold" Margin="0 10 0 0"/>
            
            <!--TextBox-->
            <TextBlock Text="Description" FontWeight="Light" Margin="0 10 0 0"/>
            <TextBox x:Name="Description_Scrpt" Padding="2"/>
 
            <!--Status & Revisions-->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
 
                <StackPanel Grid.Column="0" Margin="0 0 10 0">
                    <TextBlock Text="Status"></TextBlock>
                    <TextBox Padding="2" IsReadOnly="True" Background="#eeeeee"></TextBox>
                </StackPanel>
 
                <StackPanel Grid.Column="1">
                    <TextBlock Text="Revision"></TextBlock>
                    <TextBox Padding="2" IsReadOnly="True" Background="#eeeeee"></TextBox>
                </StackPanel>
            </Grid>
 
            <TextBlock Text="Part Number"></TextBlock>
            <TextBox IsReadOnly="True" Padding="2" Background="#eeeeee"></TextBox>
            
            <TextBlock Text="Raw Materials" FontWeight="Bold" Margin="0 10"></TextBlock>
            
            <!--Materials-->
            <TextBlock Text="Materials"/>
            <ComboBox Padding="2"/>
            
            <!--Manufacturing Info-->
            <TextBlock Text="Manufacturing Info" FontWeight="Bold" Margin="0 10"/>
 
            <TextBlock Text="Work Centres" Margin="0 0 0 10"/>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
 
                <StackPanel Grid.Column="0">
                    <CheckBox Content="Weld"></CheckBox>
                    <CheckBox Content="Assembly"></CheckBox>
                    <CheckBox Content="Plassma"></CheckBox>
                    <CheckBox Content="Laser"></CheckBox>
                    <CheckBox Content="Purchase"></CheckBox>
                </StackPanel>
 
                <StackPanel Grid.Column="1">
                    <CheckBox Content="Weld"></CheckBox>
                    <CheckBox Content="Assembly"></CheckBox>
                    <CheckBox Content="Plassma"></CheckBox>
                    <CheckBox Content="Laser"></CheckBox>
                    <CheckBox Content="Purchase"></CheckBox>
                </StackPanel>
            </Grid>
 
            <TextBlock Text="Length" Margin="0 10"></TextBlock>
            <TextBox IsReadOnly="True" Padding="2" Background="#eeeeee"/>
 
            <TextBlock Text="Mass"/>
            <TextBox IsReadOnly="True" Padding="2" Background="#eeeeee"/>
            
            <!--Finsish-->
            <TextBlock Text="Finish"/>
            <ComboBox SelectedIndex="0" Padding="2">
                <ComboBoxItem>Painted</ComboBoxItem>
                <ComboBoxItem>Not Painted</ComboBoxItem>
            </ComboBox>
 
            <TextBlock Text="Purchase Information"/>
            <ComboBox SelectedIndex="0" Padding="2">
                <ComboBoxItem>Rubber</ComboBoxItem>
                <ComboBoxItem>Not Rubber</ComboBoxItem>
            </ComboBox>
 
            <TextBlock Text="Supplier Name"/>
            <TextBox Padding="2"/>
 
            <TextBlock Text="Supplier Code"/>
            <TextBox Padding="2"/>
 
            <TextBlock Text="Additional Info" FontWeight="Bold" Margin="0 10 0 0"/>
 
            <TextBlock Text="Note" Margin="0 10 0 0"/>
            <TextBox Padding="2"/>
 
 
        </StackPanel>
    </Border>
</Window>
 
cs

이렇게 오로지 Xaml 소스코드로만 기본 컨트롤들의 레이아웃 구성 및 배치를 해보았습니다.

 

천천히 하나씩 살펴 보면 크게 어려운 부분 없이 단순 타이핑으로 레이아웃 구성이 되는 점이 매우 괜찮고, 이렇게 몇 번 더 연습 하면 금방 WPF UI에 익숙해질 것 같네요!ㅎㅎ

 

다음에 또 WPF 공부를 하게 되면 해당 소스코드를 정리해서 올리도록 하겠습니다.

 

감사합니다.^^

728x90

이 글을 공유하기

댓글

Designed by JB FACTORY