c#,wpf 채팅프로그램 만들기 - 8 - 소켓통신(TcpListener, TcpClient)을 이용한 채팅프로그램을 만들어보자(wpf를 사용하여 메인화면 만들기)

채팅프로그램 만들기는 총 12개의 게시글로 구성되어있습니다.

 

첫번째 게시글 : 1:1단발성통신(동기서버 동기클라)

 

두번째 게시글 : 1:1지속성통신(동기서버 완성본 동기 클라이언트)

 

세번째 게시글 : 1:1통신(비동기서버)

 

네번째 게시글: 1:N통신(여기서부터는 여러명을 받아야하므로 당연히 비동기서버입니다.)

 

다섯번째 게시글 : 채팅프로그램 콘솔 서버

 

여섯번째 게시글 : 채팅프로그램 콘솔 클라이언트

 

일곱번째 게시글 : wpf를 통해 View를 구현한 서버

 

여덟번째 게시글 : wpf를 통해 View를 구현한 클라이언트(메인화면 만들기)

 

아홉번째 게시글 : wpf를 통해 View를 구현한 클라이언트(로그인화면 만들기)

 

열번째 게시글 : wpf를 통해 View를 구현한 클라이언트(채팅상대 선택화면 만들기)

 

열한번째 게시글 : wpf를 통해 View를 구현한 클라이언트(채팅화면 만들기)

 

열두번째 게시글 : wpf를 통해 View를 구현한 클라이언트(로직 구현)

 

---

 

이번 게시글에에서는 채팅프로그램 클라이언트편(메인화면 만들기)을 포스팅하겠습니다.

 

wpf에 익숙하지 않은 분들도 쉽게 접할 수 있도록

 

제 코드에서 사용되는 대부분의 내용을 블로그에 예제화 하여 포스팅하였습니다.

 

모르시는 내용이 있다면 예제를 따라 만들어보고 만드시는걸 추천드립니다.

 

frozenpond.tistory.com/49?category=1126752

[wpf] Gird, StackPanel 레이아웃 사용법 및 예제(구글메인 페이지 따라 만들기)

frozenpond.tistory.com/44?category=1126752

[wpf] 화면 이동하기 -2- Window 사용법, 예제(사용자 입력 받기)

 

frozenpond.tistory.com/52?category=1126752

[wpf] MessageBox 사용법 및 예제

 

frozenpond.tistory.com/4?category=1126752frozenpond.tistory.com/4

[WPF] WPF ListView 사용법 및 예제 - 1 -

또한 게시글을 여러개로 분할 할 예정입니다.

 

먼저 메인화면부터 만들어 보겠습니다.

1. MainWindow.xaml

<Window x:Class="ChattingClient.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:ChattingClient"
        mc:Ignorable="d"
        Title="ChattingServiceClient" Height="450" Width="800" Background="#BCBCBC">
    <Border BorderThickness="0" CornerRadius="10" Margin="10,30,10,10" Background="White">
        <StackPanel Orientation="Vertical" Margin="40,15,40,5">
            <TextBlock Foreground="Gray" FontSize="50" FontFamily="Ebrima" Text="Chatting Program" TextAlignment="Center" Margin="0,0,0,20"></TextBlock>
            <TextBlock x:Name="Info" Foreground="Gray" FontSize="20" Text="채팅프로그램을 이용려면 먼저 로그인해주세요" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,30"></TextBlock>
            <Button x:Name="Login_Btn" FontSize="20" Content ="로그인" Margin="0,0,0,25" Height="45" Click="Login_Btn_Click"/>
            <Button x:Name="OneOnOneChatting_Btn" FontSize="20" Content ="1:1채팅" Margin="0,0,0,25" Height="45" Click="OneOnOneChatting_Btn_Click"/>
            <Button x:Name="GroupChatting_Btn" FontSize="20" Content ="그룹채팅" Margin="0,0,0,25" Height="45" Click="GroupChatting_Btn_Click"/>
        </StackPanel>
    </Border>
</Window>

보더와 스택패널을 이용하여 최소한의 디자인을 하였습니다.

 

 

2. MainWIndow.cs

namespace ChattingClient
{
    /// <summary>
    /// MainWindow.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Login_Btn_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("로그인하기", "Information", MessageBoxButton.OK, MessageBoxImage.Information);
        }

        private void OneOnOneChatting_Btn_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("1:1 채팅하기", "Information", MessageBoxButton.OK, MessageBoxImage.Information);        
        }

        private void GroupChatting_Btn_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("그룹 채팅하기", "Information", MessageBoxButton.OK, MessageBoxImage.Information);
        }
    }
}

버튼을 클릭시 메시지박스를 띄워주었습니다.

 

 

3. 실행화면