WPF UI 코딩 배우기1

 

WPF 강의를 찾던 도중 초급자(작성자) 기준에 맞는 튜토리얼을 찾아서 공유합니다.

* 강의는 전부 영어로 되어 있지만, 코드만 따라 쳐도 도움이 된다고 생각합니다.

 

 

강의를 듣기 전 알고 있으면 좋은 내용

• HTML의 태그(Tag)로 이루어진 구조
• CSS에 대한 지식

- WPF에 XAML이라는 마크업 언어가 사용되는데 같은 마크업 언어인 HTML을 이해하고 있다면 쉽게 배울 수 있습니다.

- CSS에서 Margin, Padding과 같은 명령어에 대한 지식이 있으면 다양한 디자인을 해볼 수 있습니다.

 

 

 

 

www.youtube.com/watch?v=Vjldip84CXQ

 

 

 

 

 

 

영상을 보고 작성한 코드

<Window x:Class="WpfStudy.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:WpfStudy"
        mc:Ignorable="d"
        Title="Wpf Basics" Height="800" Width="400">
    <Border Margin="5" Padding="10" BorderBrush="Black" BorderThickness="1" CornerRadius="4">
        <!-- Buttons -->
        <StackPanel>
            <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" Cursor="Hand"/>
                <Button x:Name="ResetButton" Click="ResetButton_Click" Margin="0 0 10 0" Grid.Column="1" Content="Reset" Cursor="Hand"/>
                <Button Grid.Column="2" Content="Refresh" Cursor="Hand"/>
            </Grid>
            <TextBlock Text="Pulse Properties" FontWeight="Bold" Margin="0 10" />
            
            <!-- Description -->
            <TextBlock Text="Description"/>
            <TextBox x:Name="DescriptionText" Padding="2" />
            
            <!-- Status and Revision -->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                 
                <!-- Status -->
                <StackPanel Grid.Column="0" Margin="0 0 10 0">
                    <TextBlock Text="Status"/>
                    <TextBox IsReadOnly="True" Background="#eee" />
                </StackPanel>
                
                <!-- Revision -->
                <StackPanel Grid.Column="1">
                    <TextBlock Text="Revision" />
                    <TextBox IsReadOnly="True" Background="#eee" />
                </StackPanel>
            </Grid>
            
            <!-- Part Number -->
            <TextBlock Text="Part Number"/>
            <TextBox Padding="2" IsReadOnly="True" Background="#eee" />
            
            <!-- Raw Material -->
            <TextBlock Text="Raw Material" FontWeight="Bold" Margin="0 10"/>

            <TextBlock Text="Material" />
            <ComboBox Padding="2" />

            <!-- Manufacturing Information -->
            <TextBlock Text="Manufacturing Information" FontWeight="Bold" Margin="0 10"/>
            
            <!-- Work Centres -->
            <TextBlock Text="Work Centres" Margin="0 0 0 10"/>
            
            <!-- Check Boxes -->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                 <!-- Column1 -->
                <StackPanel Grid.Column="0">
                    <CheckBox x:Name="WeldCheckBox" Content="Weld"/>
                    <CheckBox x:Name="AssemblyCheckBox" Content="Assembly"/>
                    <CheckBox x:Name="PlasmaCheckBox" Content="Plasma"/>
                    <CheckBox x:Name="LaserCheckBox" Content="Laser"/>
                    <CheckBox x:Name="PurchaseCheckBox" Content="Purchase"/>
                </StackPanel>
                
                <!-- Column2 -->
                <StackPanel Grid.Column="1" >
                    <CheckBox x:Name="LatheCheckBox" Content="Lathe"/>
                    <CheckBox x:Name="DrillCheckBox" Content="Drill"/>
                    <CheckBox x:Name="FoldCheckBox" Content="Fold"/>
                    <CheckBox x:Name="RollCheckBox" Content="Roll"/>
                    <CheckBox x:Name="SawCheckBox" Content="Saw"/>
                </StackPanel>
            </Grid>

            <!-- Length -->
            <TextBlock Text="Length" Margin="0 10 0 0"/>
            <TextBox Padding="2" />

            <!-- Mass -->
            <TextBlock Text="Mass" Margin="0 10 0 0"/>
            <TextBox Padding="2" />

            <!-- Finish -->
            <TextBlock Text="Finish" Margin="0 10 0 0" />
            <ComboBox SelectedIndex="0" Padding="2">
                <ComboBoxItem>Painted</ComboBoxItem>
                <ComboBoxItem>Not Painted</ComboBoxItem>
            </ComboBox>

            <!-- Purchase Info -->
            <TextBlock Text="Purchase Information" Margin="0 10 0 0" />
            <ComboBox SelectedIndex="0" Padding="2">
                <ComboBoxItem>Rubber</ComboBoxItem>
                <ComboBoxItem>Not Rubber</ComboBoxItem>
            </ComboBox>
            
            <!-- Supplier Name -->
            <TextBlock Text="Supplier Name" Margin="0 10 0 0"/>
            <TextBox Padding="2"/>

            <!-- Supplier Code -->
            <TextBlock Text="Supplier Code" Margin="0 10 0 0"/>
            <TextBox Padding="2"/>

            <TextBlock Text="Additional Info" FontWeight="Bold" Margin="0 10"/>
            
            <!-- Note -->
            <TextBlock Text="Note"/>
            <TextBox Padding="2"/>

        </StackPanel>
    </Border>
</Window>

 

 

 

 

 

 

결과물