[WPF] 공공데이터 포털 API 이용 클라이언트 구현 Part 3

이미지
그룹핑 ListViewItem 그룹핑 할 수 있습니다. 먼저 CheckBox에 Checked 이벤트를 통해 그룹핑을 추가하고 RemoveChecked 이벤트를 통해 그룹핑을 제거 할 수 있도록 CheckBox를 선언 합니다. 1: <!-- Group CheckBox --> 2: <CheckBox Grid.Column="0" 3: Grid.Row="0" 4: Checked="AddGrouping" 5: Unchecked="RemoveGrouping">Group by Name</CheckBox> 그룹 스타일 선언 GroupStyle 속성에 ContainerStyle 속성을 이용해 Style을 지정 합니다. Expander 컨트롤을 이용해 아파트명과 그룹 아이템의 개수를 Expander Header에 표시 하도록 ControlTemlate를 선언 합니다. 1: <!-- Group Style --> 2: <ListView.GroupStyle> 3: <GroupStyle> 4: <GroupStyle.ContainerStyle> 5: <Style TargetType="{x:Type GroupItem}"> 6: <Setter Property="Margin" Value="0,0,0,5" /> 7: <Setter Property="Te...

WPF Layout를 이용한 시작 윈도우 만들기

오늘은 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 작업을 마무리 하겠습니다.

댓글

이 블로그의 인기 게시물

[C#] Task 완료 시 다른 Task를 자동으로 수행

[C#] 태스크(Task)가 완료될 때 까지 대기하여 결과를 얻는 방법

[C#] 명시적으로 Task 생성 및 실행