[WPF] 카카오톡 구현 3 - 로그인 화면 만들기(Login Control)

 

💻 App.xaml에 Buttons.xaml / Fonts.xaml 추가

<Application x:Class="SunjeongTalk.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:SunjeongTalk">
    <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>
</Application>

 

💻 Styles 폴더에 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>

 

💻 Styles 폴더에 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="FontNormal">15</system:Double>
    <system:Double x:Key="FontSmall">12</system:Double>
</ResourceDictionary>

 

💻 LoginControl.xaml 

<UserControl x:Class="SunjeongTalk.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:SunjeongTalk.Controls" 
             xmlns:fa6="http://schemas.fontawesome.com/icons/svg" xmlns:system="clr-namespace:System;assembly=System.Runtime"
             mc:Ignorable="d" 
             d:DesignHeight="550" d:DesignWidth="350">

    <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 Background="{StaticResource ColorPrimary}"
          Margin="20 40 20 20">
        <Grid.RowDefinitions>
            <RowDefinition Height="1.3*"/>
            <RowDefinition Height="3*"/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>
        
    <!--로고-->
        <fa6:SvgAwesome Icon="Brands_Rocketchat" 
                        Margin="20"
                        PrimaryColor="{StaticResource ColorGray}"/>
        
    <!--Body-->
        <StackPanel Grid.Row="1"
                    Margin="30 10">
            <ComboBox Height="{StaticResource ElementHeight}"/>
            <PasswordBox Height="{StaticResource ElementHeight}"/>
            <Button Content="로그인" Height="{StaticResource ElementHeight}"
                    Margin="0 10 0 0"/>
            <!--또는 Seperator-->
            <Grid Height="{StaticResource ElementHeight}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Separator Grid.Column="0"/>
                <TextBlock Grid.Column="1" 
                           VerticalAlignment="Center"
                           Text="또는"
                           Margin="8 0"/>
                <Separator Grid.Column="2"/>
            </Grid>
            <Button Content="QR코드 로 그인"
                     Height="{StaticResource ElementHeight}"
                    Margin="0 10 0 0"/>

            <StackPanel Orientation="Horizontal" Height="{StaticResource ElementHeight}">
                <CheckBox Content="자동로그인"
                          VerticalContentAlignment="Center"/>
                <Button BorderThickness="2"
                        Background="#FFEDD607"
                        BorderBrush="#FFA99900"
                        Width="17"
                        Height="17"
                        Margin="5 0">
                    <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>
        
    <!--Bottom-->
        <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>
    </Grid>
</UserControl>