오늘은 WPF의 Layout 기능을 이용한 어플 시작 페이지를 만들어 보고자 합니다.
무엇을 만들지 먼저 알아야 겠죠? 결과물 부터 확인 해 보겠습니다.
|
어플 시작 화면 |
로고 이미지는 구글에 무료 이미지를 검색해 임의로 사용 하였습니다.
Logo 이미지, 계정 만들기 버튼, 로그인 버튼, 안내 문구 순으로 정렬이 되어 있습니다.
이런 구조는 StackPanel을 사용하는 것이 좋다고 생각이 되어 이번 Layout의 구조는 StackPanel을 이용 하겠습니다.
그럼 XAML 코드를 한번 볼까요?
StackPanel을 선언 합니다.
StackPanel에 Width, Margin을 적당하게 설정 합니다. 저는 창을 늘려도 폼이 늘어나는게 싫어 MaxWidth 속성을 사용했습니다.
1: <Window x:Class="WunderlistDoIt.StartWindow"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6: xmlns:local="clr-namespace:WunderlistDoIt"
7: mc:Ignorable="d"
8: Title="StartWindow"
9: Height="650"
10: Width="450"
11: Background="#F1F1F1"
12: FontSize="18"
13: FontWeight="Bold"
14: WindowStyle="SingleBorderWindow">
15: <StackPanel Margin="10" MaxWidth="450">
16: </StackPanel>
17: </Window>
Logo 이미지를 생성 합니다.
Image 태그의 Source 속성을 이용해 Logo 이미지 경로를 설정 합니다.
1: <StackPanel Margin="10" MaxWidth="450">
2: <Image Source="Images/start_logo.jpg" Height="400" Stretch="Uniform" />
3: </StackPanel>
계정 만들기 버튼을 생성 합니다.
Button 태그를 이용해 버튼을 생성 하고, 배경색을 바꾸기 위해 Backgound 속성에 변경하고자 하는 RGB값을 넣습니다. 버튼은 기본으로 Border 속성 값이 설정 되어 있지만, 이번에 필요가 없으 BorderThickness 속성을 0으로 설정 합니다.
1: <Button Name="btnRegister"
2: Margin="5"
3: Background="#2B88D9"
4: BorderThickness="0"
5: Foreground="White"
6: Height="40" Content="무료 계정 만들기" />
로그인 버튼을 생성 합니다.
Button 태그를 이용해 로그인 버튼을 생성하고, 계정 만들기 버튼과 비슷한 설정을 합니다.
1: <Button Name="btnLogin"
2: Margin="5"
3: Background="#CCCCCC"
4: BorderThickness="0"
5: Height="40" Content="로그인" />
안내 문구를 생성 합니다.
TextBlock 태그를 이용해 안내 문구를 작성 합니다. 밑줄이 들어간 부분은 웹 사이트 링크라는 것이므로 HyperLink 태그를 사용하도록 하고, 한 줄로 표현하기에 문장이 길어 TextBlock 태그를 2번 사용 합니다.
1: <TextBlock Foreground="#CCCCCC"
2: FontSize="14"
3: Margin="30,30,30,0"
4: HorizontalAlignment="Center">
5: <Bold>계정을 만들면</Bold>
6: <Hyperlink Foreground="#CCCCCC" NavigateUri="https://naver.com" RequestNavigate="Hyperlink_RequestNavigate">이용약관</Hyperlink> 및
7: <Hyperlink Foreground="#CCCCCC" NavigateUri="https://naver.com" RequestNavigate="Hyperlink_RequestNavigate">개인정보취급방침</Hyperlink>에 동의하게
8: </TextBlock>
9: <TextBlock Foreground="#CCCCCC"
10: FontSize="14"
11: HorizontalAlignment="Center">
12: 됩니다.
13: </TextBlock>
여기까지 StackPanel를 이용한 Layout 작업을 마무리 하겠습니다.
댓글
댓글 쓰기