[windows8 RT] 1.앱바 만들기 (C#, xaml)

순서는 다음과 같다.

 

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"/>