pivotでスワイプ操作

WP7 Silverlight で　GoogleReader　クライアントを作っていますが、その作業中にやったことを紹介していこうと思います


Readerの記事送り操作にスワイプ（フリック？）で前後へ移動できるようにしてみました
具体的にはPivotを使います。

全部の記事リストをpivot itemに突っ込んでしまうのはリソースを食らいすぎると思われるのでcurrentのページと前後のページで 3item をあらかじめ作りました。

こんなイメージ

この３つは繋がっているのでスワイプでぐるぐる回して切り替え表示ができます。



pivo tの xaml

view plainprint?

1. <controls:Pivot Name="pivot1" Title="uGReader" ItemsSource="{Binding items}"  
2. 　    HeaderTemplate="{StaticResource HeaderTemplate}"  
3.       ItemTemplate="{StaticResource PivotItemTemp}"  
4.       d:DataContext="{d:DesignData SampleData/ContentSampleData.xaml}"  
5.       SelectionChanged="pivot1_SelectionChanged" LoadedPivotItem="pivot1_LoadedPivotItem">  
6. </controls:Pivot>  

<controls:Pivot Name="pivot1" Title="uGReader" ItemsSource="{Binding items}"
　    HeaderTemplate="{StaticResource HeaderTemplate}"
      ItemTemplate="{StaticResource PivotItemTemp}"
      d:DataContext="{d:DesignData SampleData/ContentSampleData.xaml}"
      SelectionChanged="pivot1_SelectionChanged" LoadedPivotItem="pivot1_LoadedPivotItem">
</controls:Pivot>

Header , Item の表示内容はtemplateで指定しています

template定義

view plainprint?

1. <phone:PhoneApplicationPage.Resources>  
2. <DataTemplate x:Key="HeaderTemplate">  
3.     <StackPanel Orientation="Vertical" Width="400" Margin="0">  
4.         <TextBlock Text="{Binding bTitle}" FontSize="22" TextAlignment="Left" HorizontalAlignment="Left"   
5.                     Width="400"  
6.                     TextWrapping="Wrap" />  
7.         <StackPanel Orientation="Horizontal">  
8.             <ToggleButton Content="ToggleButton"   
9.                     HorizontalAlignment="Right"   
10.                             Width="20"   
11.                             Height="20"   
12.                     Margin="8,0,8,0"  
13.                     IsChecked="{Binding bStared}"  
14.                     Style="{StaticResource StarButtonStyle}"   
15.                     VerticalAlignment="Center"   
16.                             Click="ToggleButton_Click" />  
17.             <TextBlock Text="{Binding bSiteTitle}"  FontSize="20" />  
18.         </StackPanel>  
19.         <StackPanel Orientation="Horizontal">  
20.             <TextBlock Text="{Binding bAuthor}" FontSize="20" Margin="0,0,18,0"/>  
21.             <TextBlock Text="{Binding bPublished}" FontSize="20" />  
22.         </StackPanel>  
23.     </StackPanel>  
24. </DataTemplate>  
25. <DataTemplate x:Key="PivotItemTemp">  
26.     <Grid Margin="0,-20,0,0">  
27.         <phone:WebBrowser local:BrowserBehavior.DocumentText="{Binding bContent}" Margin="8,0,8,20" >  
28.         </phone:WebBrowser>  
29.     </Grid>  
30. </DataTemplate>  
31. </phone:PhoneApplicationPage.Resources>  

<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="HeaderTemplate">
    <StackPanel Orientation="Vertical" Width="400" Margin="0">
        <TextBlock Text="{Binding bTitle}" FontSize="22" TextAlignment="Left" HorizontalAlignment="Left" 
                    Width="400"
                    TextWrapping="Wrap" />
        <StackPanel Orientation="Horizontal">
            <ToggleButton Content="ToggleButton" 
                    HorizontalAlignment="Right" 
                            Width="20" 
                            Height="20" 
                    Margin="8,0,8,0"
                    IsChecked="{Binding bStared}"
                    Style="{StaticResource StarButtonStyle}" 
                    VerticalAlignment="Center" 
                            Click="ToggleButton_Click" />
            <TextBlock Text="{Binding bSiteTitle}"  FontSize="20" />
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding bAuthor}" FontSize="20" Margin="0,0,18,0"/>
            <TextBlock Text="{Binding bPublished}" FontSize="20" />
        </StackPanel>
    </StackPanel>
</DataTemplate>
<DataTemplate x:Key="PivotItemTemp">
    <Grid Margin="0,-20,0,0">
        <phone:WebBrowser local:BrowserBehavior.DocumentText="{Binding bContent}" Margin="8,0,8,20" >
        </phone:WebBrowser>
    </Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>

view plainprint?

1. public ObservableCollection<ReaderItem> items { get; set; }  
2. protected override void OnNavigatedTo(NavigationEventArgs e)  
3. {  
4.     items.Add(App.Items[seldIndex]);  
5.     items.Add(App.Items[seldIndex + 1]);  
6.     items.Add(App.Items[seldIndex - 1]);  
7.     pivot1.ItemsSource = items;  
8. }  

public ObservableCollection<ReaderItem> items { get; set; }
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    items.Add(App.Items[seldIndex]);
    items.Add(App.Items[seldIndex + 1]);
    items.Add(App.Items[seldIndex - 1]);
    pivot1.ItemsSource = items;
}

これでApp.Items リスト(ReaderItemクラス)の　プロパティ bTitle,bStar,bAuthor,bPublished　等の内容をヘッダーに、bContentをpivotアイテムパネルに表示します。実際はseldIndexの決定や、リストの範囲チェックなどもします。
ContentsはHtml文字列なので、WebBrowserコンポーネントにbindしました。ただし、直接WebBrowsrコンポーネントにバインドできないので依存プロパティ？　BrowserBehavior.DocumentText　とやらを作って実現しました。（殆どサンプルソースをコピーしただけですが、後に紹介したいと思います）



スワイプで記事を切り替える処理はLoadedPivotItemイベントでcurrent以外のitemを書き換えて行いました

view plainprint?

1. private void pivot1_LoadedPivotItem(object sender, PivotItemEventArgs e)  
2. {  
3.     seldIndex = App.Items.IndexOf((ReaderItem)pivot1.SelectedItem);  
4.     int i = pivot1.SelectedIndex + 1;  
5.     if (i > 2)  
6.         i -= 3;  
7.     if (seldIndex + 1 < App.Items.Count)  
8.     {  
9.         if (items[i] != App.Items[seldIndex + 1])  
10.             items[i] = App.Items[seldIndex + 1];  
11.     }  
12.     else  
13.         items[i] = FootItem;  
14.   
15.     if (++i > 2)  
16.         i -= 3;  
17.     if (seldIndex > 0)  
18.     {  
19.         if (items[i] != App.Items[seldIndex - 1])  
20.             items[i] = App.Items[seldIndex - 1];  
21.     }  
22.     else  
23.         items[i] = HeadItem;  
24.   
25. }  

private void pivot1_LoadedPivotItem(object sender, PivotItemEventArgs e)
{
    seldIndex = App.Items.IndexOf((ReaderItem)pivot1.SelectedItem);
    int i = pivot1.SelectedIndex + 1;
    if (i > 2)
        i -= 3;
    if (seldIndex + 1 < App.Items.Count)
    {
        if (items[i] != App.Items[seldIndex + 1])
            items[i] = App.Items[seldIndex + 1];
    }
    else
        items[i] = FootItem;

    if (++i > 2)
        i -= 3;
    if (seldIndex > 0)
    {
        if (items[i] != App.Items[seldIndex - 1])
            items[i] = App.Items[seldIndex - 1];
    }
    else
        items[i] = HeadItem;

}

ここでも実際は範囲チェックとかもします。
だいたいこんな感じで記事をフリック操作でどんどん送って表示できました。

やってることはPivotItemのロードタイミングでリストを書き換えるだけですが、これだけの事ができるのは面白いですね



ただし問題が２点ほどあります

1. WebBrowserコンポーネント上でスワイプしても記事送りになりません。Webページの横スクロール操作になります。
2. Pivotのヘッダに記事タイトルを表示していますが、タイトル文字列が大きいと改行されてヘッダの高さが大きくなってしまいます。しかも一旦大きくなったヘッダはその後タイトル文字が少なくなっても小さくならない

こんな感じ↓で次の記事のタイトルが長いのでヘッダが大きくなってしまい記事とヘッダの間に空白ができるている

さらに一度大きくなったヘッダは小さくならない？