본문 바로가기

Programming/Windows App

[XAML] 윈도우10 앱 ListView에 헤더(Header) 추가하기 XAML의 ListView에 헤더를 추가하는 방법입니다.관련된 자료가 많지 않기 때문에 편법으로 헤더를 추가했습니다.ListView위에 선택이 되지 않는 ListView를 하나 더 추가하는 방법을 사용했습니다.먼저 윈도우 10 앱 프로젝트를 생성합니다.Universal의 Blank App을 선택하고 프로젝트 이름을 입력하고 OK를 누르면 됩니다.프로젝트가 생성되면 MainPage.xaml을 엽니다. 와 사이에 다음과 같이 그리드를 나눠주는 코드를 추가합니다. 그리고 바로 아래에 헤더로 사용할 ListView를 추가합니다.선택이 불가능하도록 SelectionMode와 IsHitTestVisible을 속성을 사용합니다. 실행하면 헤더와 같이 상단에 추가되는 것을 확인할 수 있습니다.이제 실제 ListView.. 더보기
[C++] 윈도우10 앱 타이틀바 커스터마이징 윈도우10 앱의 타이틀바는 기본적으로 색상이 정해져 있습니다.윈도우10의 기본 앱인 스토어의 타이틀바는 흰 바탕에 검은색 글씨로 되어 있습니다.간단한 코드를 추가해서 타이틀바를 수정할 수 있습니다.먼저 간단하게 윈도우10 앱을 생성합니다.Blank App으로 생성을 했으며 프로젝트는 TitleBarDemo라는 이름으로 작성했습니다.MainPage.xaml 파일을 열고 태그 사이에 아래 코드를 추가합니다. MainPage.xaml.h 파일에 아래 코드를 추가합니다.타이틀바는 Windows::UI::ViewManagement::ApplicationViewTitleBar^를 통해서 접근할 수 있습니다. private: Windows::UI::ViewManagement::ApplicationViewTitleBa.. 더보기
[XAML] 아이콘으로 사용이 가능한 Segoe MDL2 Assets 폰트 햄버거 버튼에서 Segoe MDL2 Assets 폰트를 사용해서 이미지를 표현했습니다.이 폰트는 아이콘을 모아놓은 폰트입니다.Word를 실행해서 메뉴의 기호를 클릭하고 다른 기호를 선택합니다.기호를 추가할 수 있는 다이얼로그가 표시가 됩니다.글꼴을 Segoe MDL2 Assets으로 설정하면 다양한 아이콘이 표시되는 것을 확인할 수 있습니다.햄버거 버튼에서 사용한 E700 버튼도 있다는 것을 확인할 수 있습니다.리스트를 보면 햄버거 메뉴에 사용할 수 있는 아이콘들을 볼 수 있습니다.양이 상당히 방대한 편이기 때문에 대부분 원하는 아이콘을 발견할 수 있을 것입니다.이미지를 따로 구하기 어려운 경우에 활용하시기 바랍니다.아래 링크는 몇몇 자주 사용될 아이콘들의 리스트를 정리한 사이트입니다.http://mod.. 더보기
[XAML] 윈도우10 앱에 햄버거 메뉴 추가 Windows Universal App이나 다른 플랫폼의 앱을 보면 다음과 같은 형태의 메뉴를 볼 수 있습니다.왼쪽 상단의 버튼을 누르면 다음과 같이 메뉴가 펼쳐집니다.햄버거 메뉴(Hamburger Menu)라고 불리는 메뉴입니다.간단하게 햄버거 메뉴를 추가하는 방법에 대해서 알아보도록 하겠습니다.먼저 Visual Studio 2015에서 프로젝트를 생성합니다.Templates > Visual C# > Windows > Universal로 이동해서 Blank App을 생성합니다.프로젝트 이름은 HamburgerDemo 라고 작성하고 OK를 누릅니다.프로젝트가 생성되며 윈도우 10은 하나의 프로젝트로 생성이 됩니다.햄버거 메뉴는 XAML의 SplitView를 통해서 구현이 가능합니다.MainPage.xam.. 더보기
[XAML] 윈도우10 앱 크기별 UI 적용(VisualStateManager) 2015/10/02 - [Programming/Windows App] - [C++] 윈도우10 앱(Universal Windows App) 개발 시작하기2015/10/05 - [Programming/Windows App] - [XAML] 윈도우10 앱(Universal Windows App) 기본 테마 변경2015/10/12 - [Programming/Windows App] - [XAML] 윈도우10 앱(Universal Windows App)에 시스템 스타일 적용먼저 위에 있는 글을 따라서 HelloWorld 프로젝트를 작성합니다.Windows Universal App은 하나의 프로젝트를 통해서 모든 플랫폼에 작동하는 앱을 작성합니다.그렇기 때문에 일반 PC를 위해 작성한 앱의 UI는 스마트폰에서는 적.. 더보기
[XAML] 윈도우10 앱(Universal Windows App)에 시스템 스타일 적용 이전 글을 통해서 기본적인 Hello World를 작성하는 방법을 확인할 수 있었습니다.아래 글을 통해서 Hello World를 작성하는 방법을 확인할 수 있습니다.2015/10/02 - [Programming/Windows App] - [C++] 윈도우10 앱(Universal Windows App) 개발 시작하기여기에 시스템 스타일을 적용하는 방법입니다.먼저 기본적으로 Hello World를 실행하면 다음과 같이 실행됩니다.MainPage.xaml 파일을 열고 What's your name? 부분을 선택합니다.Properties Window(Alt + Enter)를 누르고 우측 상단의 스패너 모양의 아이콘을 클릭합니다.Text 그룹을 확장하고 크기를 12로 조절합니다. Miscellaneous 그룹을.. 더보기
[XAML] 윈도우10 앱(Universal Windows App) 기본 테마 변경 윈도우 앱은 C++, C#, JavaScript 등 다양한 언어로 개발이 가능합니다.그리고 XAML이라는 형식을 통해서 UI를 구현하게 됩니다.윈도우 10 앱을 기본적으로 작성하는 방법은 아래의 링크를 참조하면 됩니다.2015/10/02 - [Programming/Windows App] - [C++] 윈도우 앱(Universal Windows App) 개발 시작하기기본적으로 윈도우 앱은 밝은 색상의 라이트 테마(Light Theme)을 사용하게 됩니다. 위의 링크와 같이 어두운 테마(Dark Theme)를 사용할 수도 있습니다.먼저 App.xaml 파일을 엽니다.Application 태그가 열리는 부분에 RequestedTheme 속성을 확인할 수 있습니다.기본값은 다음과 같이 되어 있습니다.Reques.. 더보기
[C++] 윈도우10 앱(Universal Windows App) 개발 시작하기 Visual Studio 2015에서 유니버셜 윈도우 앱(Universal Windows App)을 개발할 수 있습니다.시작은 역시 Hello World부터 시작합니다.먼저 메뉴에서 File > New > Project로 프로젝트를 생성합니다.다음과 같이 Installed > Templates > Visual C++ > Universal의 Blank App을 선택합니다.프로젝트 이름은 HelloWorld입니다.만약 첫 번째 UWP(Universal Windows Platform) 프로젝트인 경우 개발자 모드 활성화 다이얼로그가 뜹니다.개발자 모드를 설정하면 됩니다.설정의 업데이트 및 복구에서 개발자용 메뉴로 이동하면 개발자 모드를 활성화하는 것이 가능합니다.다양한 파일들이 포함된 프로젝트가 생성됩니다. .. 더보기