このページは役に立ちましたか。
このページのコンテンツについての ご意見をお待ちしております
その他にご意見はありますか。
残り 1500 文字
MSDN ライブラリ
情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

チュートリアル: Windows Phone のパノラマ ページでのアプリ バーの作成

2014/06/18

対象: Windows Phone 8 および Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

このチュートリアルでは、「チュートリアル: Windows Phone のアプリ バー テスト アプリを作成する」で作成したアプリケーションをビルドします。

このトピックは、次のセクションで構成されています。

このチュートリアルを完了するには、「チュートリアル: Windows Phone のアプリ バー テスト アプリを作成する」の手順を完了している必要があります。

パノラマ ページでアプリケーション バーを作成するには

  1. ソリューション エクスプローラーで、PanoramaPage.xaml をダブルクリックしてデザイナー内に開きます。

  2. XAML コードで controls:Panorama 要素を見つけ、次のコードに置き換えます。これにより、3 つのパノラマ項目が作成され、アプリケーションおよびパノラマ項目のタイトルが設定されます。

    注意注意:

    controls:Panorama 要素の直後にある LayoutRoot GRID 要素の終了タグを削除しないように注意してください。

    <controls:Panorama x:Name="PanoControl" Title="panorama" >
    
        <!--Panorama item one-->
        <controls:PanoramaItem Header="pano1">
        </controls:PanoramaItem>
    
        <!--Panorama item two-->
        <controls:PanoramaItem Header="pano2">
            <StackPanel>
                <TextBlock Text="p2"/>
            </StackPanel>
        </controls:PanoramaItem>
    
        <!--Panorama item three-->
        <controls:PanoramaItem Header="pano3">
            <StackPanel>
                <TextBlock Text="p3"/>
            </StackPanel>
        </controls:PanoramaItem>
    </controls:Panorama>
    
  3. ページの最終行を見つけます。パノラマ ページにはアプリケーション バーを含むことができないという警告が表示される場合がありますが、これは正しくありません。パノラマ ページで使用できるように、ミニサイズの新しいアプリケーション バーが設計されています。

  4. ページの終了行 (最後の </phone:PhoneApplicationPage> タグ) の前に、次のコードを追加します。このコードはアプリケーション バーを作成します。このコードは、4 つのボタンを作成し、以前に追加した画像をアイコンとして使用します。また、2 つのメニュー項目も作成します。これはパノラマ ページなので、サイズ モード プロパティは最小に設定されます。これによりアイコン ボタンが非表示になり、省略記号のみが表示されます。

    <!--Panorama-based applications should not show an ApplicationBar-->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Minimized" Opacity="1.0" >
    
            <shell:ApplicationBarIconButton IconUri="/Images/save.png" Text="save" Click="Button1_Click" />
            <shell:ApplicationBarIconButton IconUri="/Images/delete.png" Text="delete" Click="Button2_Click" />
            <shell:ApplicationBarIconButton IconUri="/Images/help.png" Text="help" Click="Button3_Click" />
            <shell:ApplicationBarIconButton IconUri="/Images/settings.png" Text="settings" Click="Button4_Click" />
    
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="get default size value" Click="MenuItem1_Click" />
                <shell:ApplicationBarMenuItem Text="get mini size value" Click="MenuItem2_Click" />
            </shell:ApplicationBar.MenuItems>
    
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
    
  5. 最初のパノラマ項目内のみに、add 次のコードを追加します。このコードは、アプリケーションのユーザー インターフェイスを作成します。さらに、アプリケーション バーの各プロパティのオプション ボタンも含みます。オプション ボタンをクリックすると、アプリケーション バーが動的に変更され、さまざまなプロパティとそれらの相互作用をテストできます。

    <ScrollViewer x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <StackPanel>
    
            <TextBlock Text="foreground color" Foreground="{StaticResource PhoneAccentBrush}" />
            <StackPanel Orientation="Horizontal">
                <RadioButton Checked="ForeColorChanged" Name="ForeNormal" Content="normal" />
                <RadioButton Checked="ForeColorChanged" Name="ForeAccent" Content="accent" />
            </StackPanel>
    
            <TextBlock Text="background color" Foreground="{StaticResource PhoneAccentBrush}" />
            <StackPanel Orientation="Horizontal">
                <RadioButton Checked="BackColorChanged" Name="BackNormal" Content="normal" />
                <RadioButton Checked="BackColorChanged" Name="BackAccent" Content="accent" />
            </StackPanel>
    
            <TextBlock Text="opacity" Foreground="{StaticResource PhoneAccentBrush}" />
            <StackPanel Orientation="Horizontal">
                <RadioButton Checked="OpacityChanged" Name="One" Content="1.0" />
                <RadioButton Checked="OpacityChanged" Name="Half" Content="0.5" />
                <RadioButton Checked="OpacityChanged" Name="Zero" Content="0.0" />
            </StackPanel>
    
            <TextBlock Text="size mode (NEW PROPERTY!)" Foreground="{StaticResource PhoneAccentBrush}" />
            <StackPanel Orientation="Horizontal">
                <RadioButton Checked="ModeChanged" Name="DefaultSize" Content="default" />
                <RadioButton Checked="ModeChanged" Name="Mini" Content="mini" />
            </StackPanel>
    
            <TextBlock Text="menu items" Foreground="{StaticResource PhoneAccentBrush}" />
            <StackPanel Orientation="Horizontal">
                <RadioButton Checked="MenuEnabledChanged" Name="Enabled" Content="enabled" />
                <RadioButton Checked="MenuEnabledChanged" Name="Disabled" Content="disabled" />
            </StackPanel>
    
            <TextBlock Text="visibility" Foreground="{StaticResource PhoneAccentBrush}" />
            <StackPanel Orientation="Horizontal">
                <RadioButton Checked="VisibilityChanged" Name="Visible" Content="visible" />
                <RadioButton Checked="VisibilityChanged" Name="Hidden" Content="hidden" />
            </StackPanel>
        </StackPanel>
    </ScrollViewer>
    
    
  6. ページの分離コード ファイルを開きます。先頭に、次のステートメントを追加します。

    using Microsoft.Phone.Shell;
    
  7. ページ コンストラクターで、InitializeComponent の呼び出しの後に次のコードを追加します。このコードはアプリケーション バーのプロパティの初期値を設定します。これはパノラマ ページなので、サイズ モード プロパティは最小に設定されます。これによりアイコン ボタンが非表示になり、省略記号のみが表示されます。

    //Set the initial values for the Application Bar properties by checking the radio buttons.
    ForeNormal.IsChecked = true;
    BackNormal.IsChecked = true;
    One.IsChecked = true;
    Mini.IsChecked = true;
    Visible.IsChecked = true;
    Enabled.IsChecked = true;
    
  8. ページ コンストラクターの後に、次のコードを追加します。これらはオプション ボタンのクリック イベント ハンドラーです。オプション ボタンをクリックすると、このコードによって、アプリケーション バーのプロパティが動的に変更されます。

    private void ForeColorChanged(object sender, RoutedEventArgs e)
    {
        String option = ((RadioButton)sender).Name;
        switch (option)
        {
            case "ForeNormal":
                ApplicationBar.ForegroundColor = (Color)Resources["PhoneForegroundColor"];
                break;
    
            case "ForeAccent":
                ApplicationBar.ForegroundColor = (Color)Resources["PhoneAccentColor"];
                break;
        }
    }
    
    private void BackColorChanged(object sender, RoutedEventArgs e)
    {
        String option = ((RadioButton)sender).Name;
        switch (option)
        {
            case "BackNormal":
                ApplicationBar.BackgroundColor = new Color() {A=0, R=0, G=0, B=0};
                break;
    
            case "BackAccent":
                ApplicationBar.BackgroundColor= (Color)Resources["PhoneAccentColor"];
                break;
        }
    }
            
    private void OpacityChanged(object sender, RoutedEventArgs e)
    {
        String option = ((RadioButton)sender).Name;
        switch (option)
        {
            case "One":
                ApplicationBar.Opacity = 1.0;
                break;
    
            case "Half":
                ApplicationBar.Opacity = 0.5;
                break;
    
            case "Zero":
                ApplicationBar.Opacity = 0.0;
                break;
        }
    }
    
    private void ModeChanged(object sender, RoutedEventArgs e)
    {
        String option = ((RadioButton)sender).Name;
        switch (option)
        {
            case "DefaultSize":
                ApplicationBar.Mode = ApplicationBarMode.Default;
                break;
    
            case "Mini":
                ApplicationBar.Mode = ApplicationBarMode.Minimized;
                break;
        }
    }
    
    private void VisibilityChanged(object sender, RoutedEventArgs e)
    {
        String option = ((RadioButton)sender).Name;
        switch (option)
        {
            case "Visible":
                ApplicationBar.IsVisible = true;
                break;
    
            case "Hidden":
                ApplicationBar.IsVisible = false;
                break;
        }
    }
    
    private void MenuEnabledChanged(object sender, RoutedEventArgs e)
    {
        String option = ((RadioButton)sender).Name;
        switch (option)
        {
            case "Enabled":
                ApplicationBar.IsMenuEnabled = true;
                break;
    
            case "Disabled":
                ApplicationBar.IsMenuEnabled = false;
                break;
        }
    }
    
  9. 次のコードをページに追加します。これらは、アプリケーション バーのボタンとメニュー項目のクリック イベント ハンドラーです。このテスト アプリケーションでは、ボタンとメニュー項目にメッセージ ボックスが表示されます。実際のアプリケーションでは、ボタンとメニュー項目は有効な操作を実行します。

    private void Button1_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Button 1 works!  Do something useful in your application.");
    }
    
    private void Button2_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Button 2 works!  Do something useful in your application.");
    }
    
    private void Button3_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Button 3 works!  Do something useful in your application.");
    }
    
    private void Button4_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Button 4 works!  Do something useful in your application.");
    }
            
    private void MenuItem1_Click(object sender, EventArgs e)
    {
        MessageBox.Show("The default Application Bar size is " + ApplicationBar.DefaultSize + " pixels.");
    }
    
    private void MenuItem2_Click(object sender, EventArgs e)
    {
        MessageBox.Show("The mini Application Bar size is " + ApplicationBar.MiniSize + " pixels.");
    }
    

この手順では、アプリケーションを実行してパノラマ ページでアプリケーション バーをテストします。

アプリケーションをテストするには

  1. エミュレーターでアプリケーションを起動します。必要に応じて、最初のチェックポイントの指示を使用します。

    アプリケーションがエミュレーターで起動し、メイン ページが表示されます。

  2. リンク パノラマ ページをクリックして、作成したページに移動します。

  3. オプション ボタンをクリックすることによって、さまざまなプロパティを試してみます。一部のプロパティはまとめて容易にテストすることができます。たとえば、[アクセント] に設定された背景プロパティと一緒に不透明度プロパティをテストすると簡単です。

  4. 他のパノラマ項目にスワイプします。すべてのパノラマ項目でアプリケーション バーは同じであり、プロパティの状態が維持されています。

  5. アイコン ボタンをテストするには、各ボタンをクリックして、メッセージ ボックスが表示されることを確認します。

  6. メニュー項目をテストするには、各項目をクリックして、メッセージ ボックスが表示されることを確認します。

  7. [デバッグ] メニューの [デバッグの停止] をクリックします。(F5)

このアプリケーションの構築を続行するには、次の 1 つ以上のオプションのトピックの手順を完了します。手順を順に完了する必要はありません。

次の方法でアプリケーションの機能を拡張できます。

表示:
© 2015 Microsoft