학습자료/windows 8 RT 2013. 7. 1. 22:40

 

page -Grid - image

              - Stackpenel - button1

                               - button2

 

1. 위와 같은 비주얼 트리를 가지고 있을때, 만약 button을 누르면 어떠한 레이아웃이 이벤트에 반응할까?

   순서는 button -> stackpenel -> Grid 순으로 버블링이 일어난다.

 

2. 버튼들 사이, 빈공간의 stackpenel을 클릭했을때는 어떠할까?

  Grid 이벤트만 발생한다.(stackpenel 은 무시가 된다)

 

 

XMAL 엔진은 빈공간을 인식하고 이벤트를 실행하지 않는다. 하여 빈 stackpenel에는 'click'이나 'tapped'와 같은 이벤트 핸들러를 붙여도 전혀 실행 되지 않는다.

 

이러한 빈공간에 이벤트를 처리하고 싶다면 백그라운드를 Transparent로 설정하면 된다. 이것은 백그라운드를 지정하지 않는것과 동일한 효과를 가지지만 이벤트를 처리할 수 있는 투명한 표면을 가지게 된다.

 

또한 stackpenel -> grid로의 버블링을 막을 수도 있다.

stackpenel에 이벤트 핸들러에 다음 코드를 추가 하면 된다.

    e.Hangled = true;

 

'학습자료 > windows 8 RT' 카테고리의 다른 글

[winow8 RT] 개발 참고 사이트  (0) 2013.06.26
[windows8 RT] 1.앱바 만들기 (C#, xaml)  (0) 2013.06.26
[windows8] 개발환경 구축  (0) 2013.04.18
posted by cozyboy
:
학습자료/windows 8 RT 2013. 6. 26. 19:45

ms MVP로 활동중인 사람 블로그 : http://loveu012u.blog.me/100161538685

msdn : http://msdn.microsoft.com/ko-KR/

네이카페 : http://cafe.naver.com/metroapp (기본 위젯 및 컨트롤)

UI 애니메이션 : http://msdn.microsoft.com/ko-kr/library/windows/apps/hh452701.aspx

 

posted by cozyboy
:
학습자료/windows 8 RT 2013. 6. 26. 13:12

순서는 다음과 같다.

 

1. 기본 프로젝트 생성

2. common/SandardStyles.xaml 에서 주석풀기

3. Mainpage.xaml 파일에 appbar 코드 삽입

 

 


 

  •  우선 결과

 

 

 

  • 코드

MainPage.xaml

<Page
    x:Class="AppBar.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppBar"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
      
    </Grid>
    <Page.BottomAppBar>
        <AppBar x:Name="BottAppbar1" Padding="10,0,10,0" AutomationProperties.Name="Bott App bar">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="45*"/>
                    <ColumnDefinition Width="10*"/>
                    <ColumnDefinition Width="45*"/>
                </Grid.ColumnDefinitions>
                <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                    <Button x:Name="Open" Style="{StaticResource OpenFileAppBarButtonStyle}" Tag="Open"/>
                    <Button x:Name="Bookmark" Style="{StaticResource BookmarksAppBarButtonStyle}" Tag="Bookmark"/>
                </StackPanel>
                <StackPanel x:Name="MidlePanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Center">
                    <TextBox x:Name="PageControlText" Padding="10, 10, 10, 10"></TextBox>
                </StackPanel>
                <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="2" HorizontalAlignment="Right">
                    <Button x:Name="NextPage" Style="{StaticResource NextAppBarButtonStyle}" Tag="Next"/>
                    <Button x:Name="Page" Style="{StaticResource TwoPageAppBarButtonStyle}" Tag="Two"/>
                </StackPanel>
               
            </Grid>
        </AppBar>
    </Page.BottomAppBar>
</Page>

 

위의 붉은 글씨가 기본 프로젝트에서 추가한 소스 구문이다.

코딩순서는 다음과 같다.

 

1. 앱바를 3개의 칼럼(45%, 10%, 45%의 비율)을 가진 그리드로 구성한다.

2. common/SandardStyles.xaml에서 기본적으로 제공하는 앱바 아이콘을 이용한다.

 -> 많은 아이콘들을 제공한다. 하지만 주석으로 처리되어 있으며 필요한 것들만 주석을 풀어 사용하라고 한다.

 

3. 각 칼럼에 필요한 위젯들을 삽입한다.

코드는 간단하여 위의 순서만 보아도 의미파악을 할 수 있다.

 

 


그래도 간단히 설명을 하자면 다음과 같다.

 

 

1. 칼럼 나누기 

<ColumnDefinition Width="45*"/>
<ColumnDefinition Width="10*"/>

<ColumnDefinition Width="45*"/>

앱바에 45%, 10%, 45% 차지 하는 칼럼을 만든다.

 


2. 기본제공 앱바 아이콘 사용

<Button x:Name="Bookmark" Style="{StaticResource BookmarksAppBarButtonStyle}" Tag="Bookmark"/>

button 을 찾아보면 StaticResource 구문의 key 로 사용된 값들을 볼수 있다. 그 값들을 common/SandardStyles.xaml에서 찾아내어 주석을 풀어준다.

 

 

3. 해당 칼럼에 위젯 삽입

<StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="2" HorizontalAlignment="Right">

3개의 stackpanel을 볼수 있다. 그 속정중 Grid.Colume값을 이용하여 해당 칼럼에 배치 한다.

Grid.Colume="1"이면 가장 왼쪽 칼럼에

Grid.Colume="2"이면 중앙에 두번째 칼럼에

Grid.Colume="3"이면 마지막 세번째 칼럼에 삽입된다.

 

각 Stackpanel에 넣고 싶은 위젯을 삽입한다.

<Button x:Name="Bookmark" Style="{StaticResource BookmarksAppBarButtonStyle}" Tag="Bookmark"/>

 

 

 

posted by cozyboy
:
학습자료/windows 8 RT 2013. 4. 18. 08:44

 

 

드림스파크는 visual stdio와 같은 소프트웨어를 공짜로 쓸수 있게해주는 곳이다.

학생의 신분과 일반인의 신분이 구분되며, 수입이 어느정도 이하의 소규모 회사에도 소프트웨어를 무료로 지원하는 것으로 알고 있다.

 

아직 해보진 않았지만, 개발자 등록도 어느정도 무료로 등록 할수도 있단다

한마디로 개발 장려 사이트라 본다.

 

 

 

Visual Studio Express 2012 for Windows 8     또는

Visual Studio Professional 2012 다운로드(인증 필요)  

 

위의 두가지 버전은 차이점이 있다.

 

1. express 버전은 인증이 필요 없지만, 오직 윈도우8 metro style(RT) 개발만 할수 있다.

2. professional 버전은 기본적인 c, c++, c# vb도 개발 할수 있다. 

 

여기서 중요한 점은, 윈도우 RT는 c, c++ c#, ,VB, javascript로 개발할수 있다는 것이다.

RT는 위의 5가지 언어로 개발한다는 것이다.

자신의 자신있는 언어로 개발을 하면 된다.

 

다만 2번 환경은 RT도 개발할 수 있고, 기본언어 개발도 가능한 환경이다.

 

 

 

1번환경(express)은 위 그림에서 metro style apps만,

2번환경은 metro style apps와 Desktop apps가 둘다 되는 것이다.

 

 

위 그림의 view쪽을 보자.

마이크로 소프트가 만든 xaml(제믈 파일)과 www의 html이 있다.  RT에선 xaml과 html을 이용하여 UI를 만들고, 그에 대한 기능(함수)는 Model controller 언어를 이용하는 것이다.

 

 

 

여담)

metro style의 app은 기존 소프트웨어처럼 program files에 깔리거나 하지 않는다.

package manager가 존재하여 install/uninstall을 알아서 관리하게 된다.

 

 

 

posted by cozyboy
: