240503 C# WPF - 개요, StackPanel, Grid, WrapPanel, Label, Binding, AccessText, TextBox, Button, TextBlock, HyperLink, TextBox, PasswordBox

이슬기·2024년 5월 3일
C#wpf
0

C#

목록 보기
1/5

1. 개요

xaml에서 "안녕하세요."로 입력했어도

<Window x:Class="FirstApp.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:FirstApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel>
        <Label x:Name="lsg"  Content="안녕하세요." />
        <Label Content="Label" HorizontalAlignment="Left" Margin="531,116,0,0" VerticalAlignment="Top"/>
        <Button Content="클릭"/>
        <Button>Click</Button>
        <Label>레이블</Label>
    </StackPanel>
</Window>

xaml.cs의 MainWindow에서 입력한 것이 우선!

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 FirstApp
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            lsg.Content = "Hello World";
        }
    }
}

2. StackPanel

<Window x:Class="FirstApp.ch2"
        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:FirstApp"
        mc:Ignorable="d"
        Title="스택패널" Height="450" Width="800">
    <StackPanel Orientation="Vertical">
        <Button HorizontalAlignment="Left" Content="버튼1"/>
        <Button HorizontalAlignment="Right" Content="버튼2"/>
        <Button HorizontalAlignment="Center" Content="버튼3"/>
        <Button HorizontalAlignment="Stretch" Content="버튼4"/>
        <StackPanel Orientation="Horizontal"
                    HorizontalAlignment="Center"
                    >
            <Button Margin="10" Content="버튼1-1"/>
            <Button Margin="10" Content="버튼2-1"/>
            <Button Margin="10" Content="버튼3-1"/>
            <Button Margin="10" Content="버튼4-1"/>
        </StackPanel>
    </StackPanel>
</Window>

3. Grid

<Window x:Class="FirstApp.ch3"
        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:FirstApp"
        mc:Ignorable="d"
        Title="ch3" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="2*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Button Width="100" Grid.Row="0" Grid.Column="0" Content="버튼1"/>
        <Button Grid.Row="0" Grid.Column="1" Content="버튼2"/>
        <Button Grid.Row="0" Grid.Column="2" Content="버튼3"/>
        <Button Grid.Row="0" Grid.Column="3" Content="버튼4"/>

        <Button Width="100" Grid.Row="1" 
                Grid.RowSpan="2"
                Grid.Column="0" Content="버튼1-1"/>
        <Button Grid.Row="1" Grid.Column="1" Content="버튼2-1"/>
        <Button Grid.Row="1" Grid.ColumnSpan="2" Grid.Column="2" Content="버튼3-1"/>
    </Grid>
</Window>

4. StackPanel VS WrapPanel

Stackpanel은 화면 크기에 상관없이 계속 생성되지만,
WrapPanel은 화면 크기에 맞춰 생성된다.

<Window x:Class="FirstApp.ch4"
        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:FirstApp"
        mc:Ignorable="d"
        Title="ch4" Height="450" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal">
            <Button Content="버튼1"/>
            <Button Content="버튼1"/>
            <Button Content="버튼1"/>
            <Button Content="버튼1"/>
            <Button Content="버튼1"/>
            <Button Content="버튼1"/>
            <Button Content="버튼1"/>
            <Button Content="버튼1"/>
            <Button Content="버튼1"/>
        </StackPanel>
        <WrapPanel Orientation="Horizontal" Grid.Row="1" Margin="5">
            <Button Content="버튼1"/>
            <Button Content="버튼1"/>
            <Button Content="버튼1"/>
            <Button Content="버튼1"/>
            <Button Content="버튼1"/>
            <Button Content="버튼1"/>
            <Button Content="버튼1"/>
            <Button Content="버튼1"/>
            <Button Content="버튼1"/>
        </WrapPanel>
    </Grid>
</Window>

5. Label, Binding, AccessText, TextBox

Label은 짧은 text를 표시하는데 적합한 control

<Window x:Class="FirstApp.ch5"
        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:FirstApp"
        mc:Ignorable="d"
        Title="ch5" Height="450" Width="800">
    <StackPanel>
        <Label>레이블</Label>
        <Label Content="레이블"
               Background="SaddleBrown"
               Foreground="White"
               FontSize="15"
               FontWeight="Bold"
               />
        <Label>
            <Image Width="50" 
                   Source="https://cdn0.iconfinder.com/data/icons/free-daily-icon-set/512/Dollar-256.png"></Image>
        </Label>
        <Label Target="{Binding ElementName=txtName}"> <!-- 바인딩 : 무언가 연결할 때 사용 -->
            <StackPanel Orientation="Horizontal"> <!--이미지와 글자 모두 표시 가능-->
                <Image Width="50" 
                   Source="https://cdn0.iconfinder.com/data/icons/free-daily-icon-set/512/Dollar-256.png"></Image>
                <AccessText Text="_Name"></AccessText> <!-- AccessText: 단축키 역할 - Alt + N 누르면 txtName으로 감(Binding으로 연결했기 때문)-->
                <TextBox Width="200" Name="txtName"/>
            </StackPanel>
        </Label>
        <Label Target="{Binding ElementName=txtAge}">
            <!-- 바인딩 : 무언가 연결할 때 사용 -->
            <StackPanel Orientation="Horizontal">
                <!--이미지와 글자 모두 표시 가능-->
                <Image Width="50" 
           Source="https://cdn0.iconfinder.com/data/icons/free-daily-icon-set/512/Dollar-256.png"></Image>
                <AccessText Text="_Age"></AccessText>
            </StackPanel>
        </Label>
        <TextBox Width="200" Name="txtAge"/> <!-- 연결할 control을 같은 label에 두지 않아도 binding 됨 -->
    </StackPanel>
</Window>

6. Button

  • 클릭 이벤트 : Tab, Tab을 누른 후, F7을 누르면 xaml.cs로 이동
    • 클릭, 더블클릭 설정 가능
  • 타원형 만들기 : Width의 1/2을 Setter Property Value의 값으로 넣으면 타원형 생성
  • 그림자 생성
    • ShadowDepth : 그림자 깊이
    • Direction : 그림자 방향 (270을 하면 좀 더 아래로 내려감)
    • Color : 색
    • Opacity : 투명도
    • BlurRadius : 흐릿함 정도
<Window x:Class="FirstApp.ch6"
        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:FirstApp"
        mc:Ignorable="d"
        Title="ch6" Height="450" Width="800">
    <StackPanel VerticalAlignment="Center">
        <Button
            Background="SaddleBrown"
            Foreground="White"
            ToolTip="정보표시"
            Width="100"
            Height="100"
            Name="btn1"
            Click="btn1_Click"
            >버튼1</Button>
        <Button
            Background="Coral"
            Foreground="White"
            Width="200"
            Height="100"
            MouseDoubleClick="Button_MouseDoubleClick" 
            >버튼2
            <Button.Resources>
                <Style TargetType="Border">
                    <Setter Property="CornerRadius" Value="100"></Setter>
                </Style>
            </Button.Resources>
        </Button>
        <Button
            Background="Coral"
            Foreground="White"
            Width="200"
            Height="100"
            MouseDoubleClick="Button_MouseDoubleClick" 
            >버튼2
            <Button.Resources>
                <Style TargetType="Border">
                    <Setter Property="CornerRadius" Value="100"></Setter>
                </Style>
            </Button.Resources>
            <Button.Effect>
                <DropShadowEffect
                    ShadowDepth="4"
                    Direction="330"
                    Color="Black"
                    Opacity="0.5"
                    BlurRadius="4"
                    />
            </Button.Effect>
        </Button>
    </StackPanel>
</Window>

7. TextBlock, HyperLink

  • TextBlock
  • Bold
  • LinkBreak(엔터)
  • HyperLink : Name을 준 뒤, MouseEnter, MouseLeave, RequestNavigate 이벤트를 생성
    • 아직 HyperLink 기능은 되지 않는 상태

<Window x:Class="FirstApp.ch7"
        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:FirstApp"
        mc:Ignorable="d"
        Title="ch7" Height="450" Width="800">
    <Grid>
        <TextBlock>
            동해물과 <Bold>백두산</Bold>이 마르고 닳도록
            <LineBreak/> <!-- 엔터 -->
            하나님이 보우하사 
            <Span Background="Red" Foreground="White">
                우리나라 만세</Span>
            <Hyperlink Name="hyper" TextDecorations="None"
                       MouseEnter="hyper_MouseEnter"
                       MouseLeave="hyper_MouseLeave"
                       RequestNavigate="hyper_RequestNavigate"
                       NavigateUri="https://www.msn.com"
                       >
                MSN
            </Hyperlink>
        </TextBlock>
    </Grid>
</Window>

이벤트 처리를 해줌으로써 msn에 마우스를 대면 underline이 생기고 떨어지면 사라지기, 하이퍼링크 경로로 이동하기가 가능해짐.

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.Shapes;

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

        private void hyper_MouseEnter(object sender, MouseEventArgs e)
        {
            hyper.TextDecorations = TextDecorations.Underline;
        }

        private void hyper_MouseLeave(object sender, MouseEventArgs e)
        {
            hyper.TextDecorations = null;
        }

        private void hyper_RequestNavigate(object sender, System.Windows.Navigation.RequestNavigateEventArgs e)
        {
            System.Diagnostics.Process.Start(e.Uri.AbsoluteUri); // 절대 참조 형식으로 Navigate Uri를 참조하여 해당 사이트 접근 
        }
    }
}

8. TextBox, PasswordBox

  • TextWrapping="NoWrap" : 입력 값이 한 줄로 계속 입력
  • TextWrapping="Wrap" : TextBox 내에서만 입력 (자동 줄 바꿈)
  • TextWrapping="WrapWithOverflow" : Space를 누르고 입력하면 TextBox를 초과할 때 아래 줄로 내려가 입력됨
<Window x:Class="FirstApp.ch8"
        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:FirstApp"
        mc:Ignorable="d"
        Title="ch8" Height="450" Width="800">
    <StackPanel>
        <TextBox></TextBox> <!--TextBox : 데이터를 입력받을 수 있음-->
        <TextBox Background="Salmon" Foreground="White"></TextBox>
        <TextBox Width="300" TextWrapping="NoWrap"></TextBox>
        <TextBox Width="300" TextWrapping="Wrap"></TextBox>
        <TextBox Width="300" TextWrapping="WrapWithOverflow"></TextBox>
    </StackPanel>
</Window>
  • TextBox에 값 입력 후, 엔터 키를 누르면 창이 뜨도록

ch8.xaml (TextBox)

<Window x:Class="FirstApp.ch8"
        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:FirstApp"
        mc:Ignorable="d"
        Title="ch8" Height="450" Width="800">
    <StackPanel>
        <TextBox></TextBox> <!--TextBox : 데이터를 입력받을 수 있음-->
        <TextBox Background="Salmon" Foreground="White"></TextBox>
        <TextBox Width="300" TextWrapping="NoWrap"></TextBox>
        <TextBox Width="300" TextWrapping="Wrap"></TextBox>
        <TextBox Name="txt" KeyDown="txt_KeyDown" Width="300" TextWrapping="WrapWithOverflow"></TextBox>
    </StackPanel>
</Window>

ch8.xaml.cs (TextBox)

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.Shapes;

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

        private void txt_KeyDown(object sender, KeyEventArgs e)
        {
            if(e.Key == Key.Enter) // 입력된 키가 enter 키 일 경우,
                MessageBox.Show(txt.Text); // 메시지 박스가 나타나도록 함
        }
    }
}

ch8.xaml (PasswordBox)

  • 기본 PasswordBox : ⚫⚫로 표기, 글자 수 제한 없음
  • 설정 passwordBox : PasswordChar를 어떻게 표기할 것인지, MaxLength로 글자 수 제한 둘 수 있음
<Window x:Class="FirstApp.ch8"
        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:FirstApp"
        mc:Ignorable="d"
        Title="ch8" Height="450" Width="800">
    <StackPanel>
        <TextBox></TextBox> <!--TextBox : 데이터를 입력받을 수 있음-->
        <TextBox Background="Salmon" Foreground="White"></TextBox>
        <TextBox Width="300" TextWrapping="NoWrap"></TextBox>
        <TextBox Width="300" TextWrapping="Wrap"></TextBox>
        <TextBox Name="txt" KeyDown="txt_KeyDown" Width="300" TextWrapping="WrapWithOverflow"></TextBox>
        <PasswordBox></PasswordBox>
        <PasswordBox PasswordChar="*" MaxLength="10"></PasswordBox>
    </StackPanel>
</Window>
profile
이슬기

0개의 댓글