VP02(22-05-11)

WPF으로 login레이아웃과 20개 cell의 색을 바꾸는 프로그램을 만들어보았다.

 

[1] Login 화면 구성하기(DB extension이 되어있지 않아 xaml만 구성해보았음)

<Window x:Class="_033_WPFLogin.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:_033_WPFLogin"
        mc:Ignorable="d"
        Title="Login" Height="340" Width="300" 
        Background="SteelBlue">
  <Border Background="White" Margin="20">
    <StackPanel Margin="20">
      <TextBlock Text="Login" FontSize="20" 
                 HorizontalAlignment="Center"
                 Margin="10"/>
      <Separator Background="Orange"/>
      <TextBlock Text="UserName" FontSize="16" 
                 Margin="0,5"/>
      <TextBox x:Name="txtUserName" FontSize="16"/>
      <TextBlock Text="Password" FontSize="16" 
                 Margin="0,5"/>
      <TextBox x:Name="txtPassword" FontSize="16"/>
      <Button x:Name="btnLogin" Content="로그인"
              FontSize="16" Width="100" 
              Margin="10,20" Click="btnLogin_Click"/>
    </StackPanel>
  </Border>
</Window>

윈도우의 높이는 340 너비는 300으로 맞춰준 뒤 배경색은 SteelBlue로 설정

Border안에 사방 margin을 20으로 통일해준 StackPanel(Vertical)을 선언

{Border는 그냥 테두리임}

login(TextBlock)을 생성해준 뒤 separator을 그어줌

그 후 텍스트박스와 텍스트블록을 두 쌍 선언해줌

그리고 마지막으로 버튼을 생성

위와같은 레이아웃이 구성되었으며 DB는 추후에 구축할 예정이다.

---

[2] Splash(DB를 사용하여 그리드에 색을 출력하는 프로그램)(DB extension이 되어있지 않아 xaml만 구성해보았음)

<Window x:Class="_034_Splash.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:_034_Splash"
        mc:Ignorable="d"
        Title="MainWindow" Height="600" Width="700">
  <Grid>
    <Button Content="랜덤 색깔 표시" 
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Margin="20,20,0,0"  Width="150"
            x:Name="btnRandom"
            Click="btnRandom_Click"/>
    <Button Content="DB에 저장된 색깔 표시" 
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Margin="20,50,0,0"  Width="150"
            x:Name="btnDB"
            Click="btnDB_Click"/>

    <Button Content="DB Reset" 
            HorizontalAlignment="Right"
            VerticalAlignment="Top"
            Margin="0,20,20,0"  Width="150"
            x:Name="btnReset"
            Click="btnReset_Click"/>
    <Button Content="종료" 
            HorizontalAlignment="Right"
            VerticalAlignment="Top"
            Margin="0,50,20,0"  Width="150"
            x:Name="btnExit"
            Click="btnExit_Click"/>
    <TextBlock HorizontalAlignment="Left"
               VerticalAlignment="Top"
               TextAlignment="Center"
               Margin="275,20,0,0" 
               Width="150"
               x:Name="lblDate"/>
    <TextBlock HorizontalAlignment="Left"
               VerticalAlignment="Top"
               TextAlignment="Center"
               Margin="275,50,0,0" 
               Width="150"
               x:Name="lblTime"/>
    <Grid Margin="20,90,20,20" 
          Background="AntiqueWhite" 
          Height="200" 
          VerticalAlignment="Top">
      <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
      </Grid.ColumnDefinitions>
      <Border Margin="1" x:Name="bd1" 
              Grid.Row="0" Grid.Column="0"/>
      <Border Margin="1" x:Name="bd2" 
              Grid.Row="0" Grid.Column="1"/>
      <Border Margin="1" x:Name="bd3" 
              Grid.Row="0" Grid.Column="2"/>
      <Border Margin="1" x:Name="bd4" 
              Grid.Row="0" Grid.Column="3"/>
      <Border Margin="1" x:Name="bd5" 
              Grid.Row="0" Grid.Column="4"/>
      <!--두번째 줄-->
      <Border Margin="1" x:Name="bd6" 
              Grid.Row="1" Grid.Column="0"/>
      <Border Margin="1" x:Name="bd7" 
              Grid.Row="1" Grid.Column="1"/>
      <Border Margin="1" x:Name="bd8" 
              Grid.Row="1" Grid.Column="2"/>
      <Border Margin="1" x:Name="bd9" 
              Grid.Row="1" Grid.Column="3"/>
      <Border Margin="1" x:Name="bd10" 
              Grid.Row="1" Grid.Column="4"/>
      <!--세번째 줄-->
      <Border Margin="1" x:Name="bd11" 
              Grid.Row="2" Grid.Column="0"/>
      <Border Margin="1" x:Name="bd12" 
              Grid.Row="2" Grid.Column="1"/>
      <Border Margin="1" x:Name="bd13" 
              Grid.Row="2" Grid.Column="2"/>
      <Border Margin="1" x:Name="bd14" 
              Grid.Row="2" Grid.Column="3"/>
      <Border Margin="1" x:Name="bd15" 
              Grid.Row="2" Grid.Column="4"/>
      <!--네번째 줄-->
      <Border Margin="1" x:Name="bd16" 
              Grid.Row="3" Grid.Column="0"/>
      <Border Margin="1" x:Name="bd17" 
              Grid.Row="3" Grid.Column="1"/>
      <Border Margin="1" x:Name="bd18" 
              Grid.Row="3" Grid.Column="2"/>
      <Border Margin="1" x:Name="bd19" 
              Grid.Row="3" Grid.Column="3"/>
      <Border Margin="1" x:Name="bd20" 
              Grid.Row="3" Grid.Column="4"/>
    </Grid>
    <ListBox Background="AliceBlue"
             x:Name="lstDB" 
             Margin="20,310,20,20"/>
  </Grid>
</Window>

구성은 4개의 버튼과 두개의 TextBlock 그리고 4행5열을 가진 그리드와 리스트박스를 가지는 그리드 한개로 구성된다.

정리 : Top,Bottom등의 위치와 margin등을 지정하는건 parent를 기준으로 한다.

텍스트블록의 위치는 버튼의 사이이며 위 박스엔 날짜를 아래박스엔 시간을 표시할 예정이다.

 

다음시간엔 구현해 볼 예정이다.