back

アプリバーとフライアウト (2/5)

■アプリバーを作ってみよう

では、簡単なアプリバーを実際に作ってみましょう。下にMainPage.Xamlのソースコードを掲載しておきます。アプリを実行し、マウスの右ボタンを押すと、「Button 1」「Button 2」という２つのアイコンの並ぶアプリバーが表示されます。

■<AppBarButton>について
アプリバーに表示されているアイコンは、<AppBarButton>というタグを使って作成されています。これは、表示するアイコンに関するタグを内部に含んでいます。整理するとこんな感じになります。
<AppBarButton Label="ラベル">
    <AppBarButton.Icon>
        <SymbolIcon Symbol="アイコン名" />
    </AppBarButton.Icon>
</AppBarButton>

<AppBarButton.Icon>というタグの中に、<SymbolIcon>というタグが用意されています。<SymbolIcon>タグは、Windows 8に標準で用意されているシンボルアイコンのタグです。Symbolに使用するアイコンの名前を指定することで、そのアイコンが表示されたボタンを作れます。

このシンボルアイコンは非常にたくさんのものが用意されています。以下のページでざっと確認してみると面白いでしょう。「emoji」なんてものもあるんですね。

http://msdn.microsoft.com/en-us/library/windows/apps/hh770557.aspx

このようにしてAppBarButtonを用意することで、アプリバーは簡単に作れます。またクリックした時の処理は、<AppBarButton Click="メソッド名">というようにして、通常のButtonコントロールとまったく同じようにメソッドを割り当て設定することができます。



(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

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

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="textblock1" HorizontalAlignment="Left" Margin="113,78,0,0" 
                   TextWrapping="Wrap" Text="Win 8 App" VerticalAlignment="Top" 
                   Height="67" Width="1052" FontSize="48"/>

        <AppBar Background="#33ff00ff" >
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                
                <StackPanel Orientation="Horizontal">
                    
                    <AppBarButton Label="Button1">
                        <AppBarButton.Icon>
                            <SymbolIcon Symbol="Home" />
                        </AppBarButton.Icon>
                    </AppBarButton>
                    <AppBarButton Label="Button2">
                        <AppBarButton.Icon>
                            <SymbolIcon Symbol="Help" />
                        </AppBarButton.Icon>
                    </AppBarButton>

                </StackPanel>
                
            </Grid>
        </AppBar>
     </Grid>
</Page>




　 　

記事のリストに戻る



PC Site G+ mail
copyright 2009. SYODA-tuyano.