안녕하세요.
오늘은 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
'C# > WPF' 카테고리의 다른 글
[WPF] ComboBox(콤보박스) MVVM 패턴으로 데이터 바인딩 하기 (0) | 2021.01.15 |
---|---|
[WPF] WPF 의존 프로퍼티(Dependency Property) 사용 방법 (0) | 2021.01.14 |
[C# WPF] WPF WrapPanel ScrollBar(스크롤바) 추가하는 방법 (0) | 2020.11.24 |
[C# WPF] WPF 로 이미지로더(Image Loader) 프로그램 만들기 (0) | 2020.11.21 |
[C# WPF] WPF MVVM 패턴 이용하여 TextBox 컨트롤 문자 입력 감지하기 (0) | 2020.11.05 |
이 글을 공유하기