[wp7] Application Bar를 사용해보자.

윈도우용 폰에서 아래에 Application Bar를 사용해보자~

 

하단에 버튼 3개 요게 application bar이다 ㅋㅋ

일단 소스를 보자..

xaml 상단을 보자

<navigation:PhoneApplicationPage 
    x:Class="RanDomNumber.Page1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:navigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"
    xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone.Shell"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    SupportedOrientations="Portrait"
    mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="480"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}">

    <phoneNavigation:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar.new.dark.png" x:Name="BackButton" Click="BackButton_Click"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar.refresh.dark.png" x:Name="StartButton" Click="StartButton_Click"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar.feature.settings.dark.png" x:Name="SettingButton"/>
        </shell:ApplicationBar>
    </phoneNavigation:PhoneApplicationPage.ApplicationBar>
    
    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">        
        <Grid.RowDefinitions>
            <RowDefinition Height="170"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--This is the name of the application and page title-->
        <Grid Grid.Row="0" x:Name="TitleGrid">
            <StackPanel>
                <TextBlock Text="APP BOX" x:Name="textBlockPageTitle"/>
                <TextBlock Text="Random Number" x:Name="textBlockListTitle" FontSize="60"/>
            </StackPanel>
        </Grid>

        <!--This section is empty. Place new content here Grid.Row="1"-->
        <Grid Grid.Row="1" x:Name="ContentGrid">  
            
            <TextBlock x:Name="ResultBox" Text="0" FontSize="200" HorizontalAlignment="Center"/>
        </Grid>
    </Grid>
</navigation:PhoneApplicationPage>

보이는거와 같이 젤 상단에서 설정한다. 대부분 grid안에 넣을꺼라고 생각했지만 오산..

물론 Phonenavigation 이랑 shell 레퍼런스는 추가해야 한다.

이벤트도 xaml에서 걸었다…(이상하게 이건 behind에서  안되더라…)

그리고 그냥 사용하면 된다. 이미지 uri  바꿔서…

그리고 젤 중요한거….

이미지 비쥬얼 스튜디오에 첨부시키면 이미지 속성(Build Action)이 resource로 나오는데 이걸 모두 Content 로 고친다.

이거만 해놓으면 문제 없다… Content를 꼭 기억하자…