[UWP] 개념 공부

stack Panel

: 자식요소를 행이나 열로 나열하는데 매우 간단한 컨트롤

 Orientation = "Horizontal" or "Vertical"

Grid

: 컨트롤의 열과 행을 배분하고자 할 때 사용

IUICommand

: Represent Command in a context menu or message dialog box 

+) https://docs.microsoft.com/en-us/uwp/api/windows.ui.popups.iuicommand

Async

비동기 : 동시에 일어나지 않음 -> 순서가 있음

async를 쓰면 Task가 들어가고

async Task<return할 값>

await라는 걸 써서 그 함수가 다 끝나기 이전가지 실행하지 않음

+) https://msdn.microsoft.com/ko-kr/library/hh191443(v=vs.110).aspx

----------------------------------------------------------------------------------------------------

출처 : https://www.youtube.com/watch?v=0gE3HL_DULM

Windows10은 Windows8과 많이 다르다

Windows10에서 개발을 하려면 개발자 모드를 이용하여 권한을 풀어줘야하는데 

win+i -> 업데이트 및 복구 -> 개발자 모드를 풀어주면 된다

universal window platorm 은 기존에 가능한 xaml directX html .net c++ wwa가 가능할 뿐만 아니라

ios android web win32까지 개발이 가능하도록 만들었다

Canvas

- canvas란 layout control안에 절대좌표를 이용해서 그림 -> flexible한 ui에서는 잘 사용되지 않음

- rectangle /  Ellipse /  Polygon

StackPanel

- ui의 elemet를 배치할때 사용 (Vertical(default), Horizontal)

Grid

- 자신이 가로 세로를 나눠서 그 안에 ui를 배치할 수 있음

WrapGrid

- 자동으로 개행되는 기능 (word에서도 보면 화면에 끝에가면 자동으로 줄이 넘어간다->word wrap)

- flexible한 ui에 매우 적절

ScrollViewer

- 내용이 많은데 scroll이 생기지 않을때 사용

Viewbox

-Viewbox의 사이즈에 따라서 안의 내용의 사이즈도 달라짐

+) obejct의 개수가 많아지게 하려면 wrapgrid를 사용

   크기가 변경되게 하려면 viewbox를 사용

RelativePanel(새로 추가된 기능)

- 상대적인 위치값

ex) a box는 b box 오른쪽에 c는 아래쪽에 -> 화면이 변경되어도 모양이 유지

Button

- repeatbutton : 사용자가 눌렀다가 놓을 때까지 반응 (매 프레임마다 값을 반환)

- togglebutton : on / off 버튼 처럼 두가지 상태를 전환할 수 있는 버튼

+) 반응형 웹은 보통 메뉴가 세로로 있음 (가로로 있을 때 줄이면 메뉴가 보여지지 않음)

   세로로 생긴 메뉴는 햄버거 메뉴라고 부름 (누르면 커졌다가 다시 작아지는 메뉴)

SplitView

- 햄버거 메뉴를 지원해주는 코드 

- Compact가 들어가면 작은 메뉴가 보이는지 보이지 않는지

- IsPanelOpen 은 메뉴가 보이는지 보이지 않는지의 차이

ex)

<Page x:Class="App1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <SplitView x:Name="MySplitView" DisplayMode="CompactOverlay" IsPaneOpen="False" CompactPaneLength="50" OpenPaneLength="150"> <SplitView.Pane> <StackPanel Background="Gray"> <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/> <StackPanel Orientation="Horizontal"> <Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent"/> <TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" /> </StackPanel> <StackPanel Orientation="Horizontal"> <Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent"/> <TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" /> </StackPanel> <StackPanel Orientation="Horizontal"> <Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent"/> <TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" /> </StackPanel> </StackPanel> </SplitView.Pane> <SplitView.Content> <Grid> <TextBlock Text="SplitView Basic" FontSize="54" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </SplitView.Content> </SplitView> </Page>

private void HamburgerButton_Click(object sender, RoutedEventArgs e) { MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen; }

Appbar

- 앱을 모아두는 bar

- isopen은 항상 나와있는 상태를 의미

Networking

daum에서 search api를 가져온 후 parsing 하는 과정 중 networking 사용 방법

1. daum api에서 api key와 주소를 가져온다

2. 아래와 같이 코드를 구현한다.

+) async는 비동기인데 주로 network이나 file download같은 오래 걸리는 작업을 효율적으로 처리하기 위함이다.

   await와 async는 쌍으로 나와야 한다 -> 아니면 오류

3. string을 xaml로 parsing

using  System.Xml.Linq;

XDocument xDoc = XDocument.Parse(responseBody);

4. 담을 class를 생성

=> Linq의 개념을 알아야 다음 단계로 넘어갈 수 있음

Linq란? 객체 query 기술 

item으로 검색하면 책 한권 단위로 가져올 수 있음

새로운 class를 만들고 그 BookItem이라는 class에 각각의 속성을 집어넣음

xaml이 끝날때까지 진행

저렇게까지만 코드를 짜면 books에 객체 배열이 들어가 있느냐 -> 아니다

var booklist = books.ToList();

를 실행 해줘야 들어간다

listBooks.ItemSource = booklist;

그 list를 ItemSource로 넣었다

=> Adaptive 기법? 그때 그때 상황에 따라서 예쁘게 보여주는 것 (ex) 가로 / 세로)

   Tailor Design 기법? 각각의 device마다 ui를 따로 만들어놓음

Tailor 기법의 예제)

아래와 같이 물리적인 사이즈를 정해놓음

+) cross platform이란? 하나의 platform이 아닌 여러개의 platform을 지원하는 것(multi platform)

=> Visual State : inch를 사용하는 것을 권장 (pixel은 경우의 수가 많이 생겨서 정확하지 않음)

VisualStateManager.GoToState(this,state,true);

: device에 맞게 선택되게 해주는 코드

=> Data Binding : Binding을 ui에 붙이면 data가 다다닥 붙는 형식 (진짜 멋진 기술)

+) mvvm pattern : sample로 hard coding을 할 때 좋음 

 coding을 하는 기술을 이야기함

Data Binding의 종류

1. one time : 한번 데이터를 보여주고 넘어감

2. one way : 객체가 변경되었을 때는 ui가 변경 but ui가 변경되었을 때 객체는 변경되지 않음

3. two way : 객체 or ui를 고치면 ui or 객체가 변경

=> SQLite : 거의 모든 모바일 플랫폼에서 사용되는 sql -> 보통 c++을 지원

SQLitePCL은 객체스럽지 않음 & string으로 되어있음 -> runtime 오류가 발생할 수 있음

but 사람들이 많이 선호 (익숙한 명령어이기 때문)

SQLite 시작하기

1.SQLitePCL 설치

+) App.xaml.cs -> global area(전역)

+) App.xaml.cs에 생성

   public static SQLiteConnection SQLCon; //Connection 객체 생성 

   SQLCon = new SQLiteConnection("Master.db"); 

   //현재 확실한 경로를 주지 않았기 때문에 app이 생성되어있는 곳이 있음

   //즉 앱을 삭제하면 db도 삭제됨

   string sql =@"sql 명령어";

   var satement = SQLCon.Prepare(sql);

   statement.Step();

-> 이 코드가 실행되면 connection의 생성자가 생김 -> 이 의미는 app이 실행될때마다 이 코드가 실행

if master database가 존재하지 않으면 생성 & if table이 없으면 생성 & 연결

+) data는 각 device에 저장되기 때문에 computer에서 저장하더라도 mobile에서는 저장이 되지 않음

+) MainPage.xaml.cs

public SQLiteConnection SQLConn = App.SQLCon; //App영역에서 이 변수를 가져오겠다 라는 의미

동영상에 있는 것을 가져온 것인데 대충 어떻게 사용하는지 구조만 보면 될 것 같다.

+) book.Step(); //실제로 query가 실행되는 코드

+) select 예시

+) delete 예시

+) update 예시

+) Frame.Navigate(typeof(StoredBook),null); //페이지 이동 -> 새로운 ui 생성해서 (StoredBook이 새로운 ui)

=> ToastNotification : window에 알림 띄우는 기능

using Windows.UI.Notifications;

-> 여러가지 Toast가 있음 (Schedule 된것도!) 그러니까 조금 알아보기!

Toast를 띄우면 windows10의 Action Center에 남음 -> window에서 message누르면 오른쪽에서 열리는 창

따라서 간단한 것은 popup에 올리면 됨

Toast가 짧은 시간안에 여러개의 action이 일어나면 popup을 사용하는 것이 좋음

왜? Toast는 나타난 후 다시 사라지는 것에 시간이 조금 걸림