Panorama コントロールのページ移動をプログラムで処理するには?


#wp7dev_jp

Panorama は Pivot と違って、SelectedIndex でページ移動できません。ただ、DefaultPage を設定すると、そのページを表示する特性があるのでそれでページ移動ができます。

ただ、アニメーション無しでぱっと移っちゃうのでちょっと微妙かも。

実装

まずはパノラマを準備。ページに名前がなくても何とかなります。

<Grid x:Name="LayoutRoot" Background="Transparent">
  <controls:Panorama Title="Sample" Name="myPanorama">
        <controls:PanoramaItem Header="Page1" />
        <controls:PanoramaItem Header="Page2"/>
        <controls:PanoramaItem Header="Page3"/>
        <controls:PanoramaItem Header="Page4"/>
    </controls:Panorama>
</Grid>

今回はApplicationBarを使って移動します。

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="1" Click="ApplicationBarIconButton_Click" />
        <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="2" Click="ApplicationBarIconButton_Click" />
        <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="3" Click="ApplicationBarIconButton_Click" />
        <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="4" Click="ApplicationBarIconButton_Click" />
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

バーのボタンが押されたら移動する処理。

private void ApplicationBarIconButton_Click(object sender, EventArgs e)
{
    int i = ApplicationBar.Buttons.IndexOf((sender as ApplicationBarIconButton));
    myPanorama.DefaultItem = myPanorama.Items[i];
}

一応ほかのページから戻ってきたときには標準の状態に戻しておきます。

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    base.OnNavigatedTo(e);
    myPanorama.DefaultItem = myPanorama.Items[0];
}

4つのApplicationBarIconButtonで4つのページに移動します。4つのボタンのイベントを実装するの面倒なので、1つのメソッドに集約。ボタンの番号を取得して、それをそのまま表示ページにしてます(サンプル上の仕様ということで)

ただ、他のページから戻ってきたときなどは、ちゃんと最初のページが表示されることが望ましいので、OnNavigatedTo で最初のページにDefaultPageを残しています。

Comments (0)