[C#프로그래밍] [WPF] PC 카카오톡 만들기 #05 - 로그인 컨트롤 디자인하기

C#/C# 프로그래밍

[C#프로그래밍] [WPF] PC 카카오톡 만들기 #05 - 로그인 컨트롤 디자인하기

냠냠쿠 2023. 8. 23. 14:06

728x90

https://www.youtube.com/watch?v=pd_aMJnI-1U&list=PLlrfTSXS0LLKHfOfwM31jJw3SHuDnkF49&index=6

📌 Header, Bottom, Body로 나누기

- LoginControl.xaml

<UserControl x:Class="seungjjangTalk.Controls.LoginControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:seungjjangTalk.Controls" xmlns:fa6="http://schemas.fontawesome.com/icons/svg"
             mc:Ignorable="d" 
             d:DesignHeight="550" d:DesignWidth="350">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1.3*"/>
            <RowDefinition Height="3*"/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>
        
        <!-- 로고 -->
        <fa6:SvgAwesome Icon="Brands_Rocketchat" Margin="20" PrimaryColor="{StaticResource ColorGray}"/>


        <!-- 바디 -->
        <StackPanel Grid.Row="1">
            <ComboBox/>
            <PasswordBox/>
            <Button Content="로그인"/>
            
            <!-- 또는 Separator-->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Separator Grid.Column="0"/>
                <TextBlock Grid.Column="1" Text="또는"/>
                <Separator Grid.Column="2"/>
            </Grid>

            <Button Content="QR코드 로그인"/>

            <StackPanel Orientation="Horizontal">
                <CheckBox Content="자동로그인"/>
                <Button BorderThickness="2"
                        Background="#FFEDD607"
                        BorderBrush="#FFA99900"
                        Height="17"
                        Width="17">
                    <Button.Resources>
                        <Style TargetType="{x:Type Border}">
                            <Setter Property="CornerRadius" Value="30"/>
                        </Style>
                    </Button.Resources>
                    <fa6:SvgAwesome Icon="Solid_Info" PrimaryColor="#FFA99900"/>
                </Button>
            </StackPanel>
        </StackPanel>
        
        <!-- 바텀 -->
        <Grid Grid.Row="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition/>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <Button Grid.Column="0" 
                    Content="계정찾기"/>
            
            <Separator Grid.Column="1"
                       Width="1"
                       Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}"
                       Margin="0 5"/>
            
            <Button Grid.Column="2" 
                    Content="비밀번호 재설정"/>
            
            <Separator Grid.Column="3"
                       Width="1"
                       Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}"
                       Margin="0 5"/>
            
            <Button Grid.Column="4"
                    Content="회원가입"/>
        </Grid>
        
    </Grid>
</UserControl>

- Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}} 로 지정하면 Vertical Separator가 만들어진다.

📌 세부 디자인 조정하기

- LoginControl.xaml

    <Grid Background="{StaticResource ColorPrimary}"
          Margin="20 40 20 20">
          
          ...
          
        <!-- 바디 -->
        <StackPanel Grid.Row="1"
                    Margin="30 10">
                    
                    
         ...

◾ Grid 내 일정하게 간격 조절하기

- LoginControl.xaml

    <UserControl.Resources>
        <system:Double x:Key="ElementHeight">35</system:Double>
    </UserControl.Resources>
    
    ...
    
        <!-- 바디 -->
        <StackPanel Grid.Row="1"
                    Margin="30 10">
            <ComboBox Height="{StaticResource ElementHeight}"/>
            <PasswordBox Height="{StaticResource ElementHeight}"/>
            <Button Content="로그인" Height="{StaticResource ElementHeight}"/>
            
            <!-- 또는 Separator-->
            <Grid Height="{StaticResource ElementHeight}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Separator Grid.Column="0"/>
                <TextBlock Grid.Column="1" Text="또는"/>
                <Separator Grid.Column="2"/>
            </Grid>

            <Button Content="QR코드 로그인"
                    Height="{StaticResource ElementHeight}"/>

            <StackPanel Orientation="Horizontal"
                        Height="{StaticResource ElementHeight}">
                <CheckBox Content="자동로그인"/>
   ...

◾ 로그인 버튼과 비밀번호 버튼 사이 간격 조절하기

- LoginControl.xaml

            <Button Content="로그인" 
                    Height="{StaticResource ElementHeight}"
                    Margin="0 10 0 0"/>

◾ 또는, 자동로그인 가운데 정렬하기

- LoginControl.xaml

...

				<TextBlock Grid.Column="1" 
                           VerticalAlignment="Center"
                           Text="또는"/>
                <Separator Grid.Column="2"/>
                
...

                <CheckBox Content="자동로그인"
                          VerticalContentAlignment="Center"/>
                          
...

이까지 하고나면

제법 카카오톡 스럽게 만들어진다...

📌 버튼 색 바꾸기

- App.xaml

        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Styles/Colors.xaml"/>
                <ResourceDictionary Source="/Styles/Buttons.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>

- Styles 에 Buttons 리소스사전 추가

- Buttons.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="{x:Type Button}">
        <Setter Property="BorderBrush" Value="LightBlue"/>
        <Setter Property="Background" Value="White"/>
    </Style>
</ResourceDictionary>

📌 Bottom 버튼 색깔 바꾸기

- LoginControl.xaml

...
    <UserControl.Resources>
        <system:Double x:Key="ElementHeight">35</system:Double>
        <Style x:Key="BottomButton" TargetType="{x:Type Button}">
            <Setter Property="Foreground" Value="{StaticResource ColorGray}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="FontSize" Value="{StaticResource FontSmall}"/>
        </Style>
    </UserControl.Resources>
...
        <!-- 바텀 -->
        <Grid Grid.Row="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition/>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <Button Grid.Column="0" 
                    Content="계정찾기"
                    Style="{StaticResource BottomButton}"/>
            
            <Separator Grid.Column="1"
                       Width="1"
                       Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}"
                       Margin="0 5"
                       />
            
            <Button Grid.Column="2" 
                    Content="비밀번호 재설정"
                    Style="{StaticResource BottomButton}"/>
            
            <Separator Grid.Column="3"
                       Width="1"
                       Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}"
                       Margin="0 5"/>
            
            <Button Grid.Column="4"
                    Content="회원가입"
                    Style="{StaticResource BottomButton}"/>
        </Grid>

-App.xaml

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Styles/Colors.xaml"/>
                <ResourceDictionary Source="/Styles/Buttons.xaml"/>
                <ResourceDictionary Source="/Styles/Fonts.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

- Styles 에 Fonts 리소스사전 추가

- Fonts.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:system="clr-namespace:System;assembly=System.Runtime">
    <system:Double x:Key="FontLarge">18</system:Double>
    <system:Double x:Key="FontNomal">15</system:Double>
    <system:Double x:Key="FontSmall">12</system:Double>
</ResourceDictionary>

◾ 자동로그인과 인포메이션 버튼 및 또는 부분에 margin 주기

- LoginControl.xaml

 ...
 				<Separator Grid.Column="0"/>
                <TextBlock Grid.Column="1" 
                           VerticalAlignment="Center"
                           Text="또는"
                           Margin="8 0"/>
                <Separator Grid.Column="2"/>

				<CheckBox Content="자동로그인"
                          VerticalContentAlignment="Center"/>
                <Button BorderThickness="2"
                        Background="#FFEDD607"
                        BorderBrush="#FFA99900"
                        Height="17"
                        Width="17"
                        Margin="5 0">
...

728x90