Pivotから、動的にPivotItemを削除(or非表示に)したい

Question

バインドするデータが存在しない場合、動的にPivotItemを非表示にしたいと考えています。

  <!--LayoutRoot is the root grid where all page content is placed-->
  <Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{Binding Source={StaticResource SampleDataSource2}}">
    <!--Pivot Control-->
    <controls:Pivot x:Name="detailPivot">
      <controls:Pivot.Title>
        <StackPanel>
          <TextBlock Text="イベントタイトル" x:Name="eventTitleTextBlock" FontSize="50" VerticalAlignment="Center">
	    			<TextBlock.Foreground>
							<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
						</TextBlock.Foreground>
          </TextBlock>
        </StackPanel>
      </controls:Pivot.Title>
      <!--Pivot item one-->
      <controls:PivotItem Height="500" VerticalAlignment="Top">
        <controls:PivotItem.Header>
          <StackPanel>
            <TextBlock Text="詳細情報" FontSize="70" />
          </StackPanel>
        </controls:PivotItem.Header>
        <StackPanel HorizontalAlignment="Left" Height="500" Margin="0" VerticalAlignment="Top" Width="468">
          <ListBox x:Name="detailListBox" Height="500" ItemTemplate="{StaticResource ItemTemplate3}" ItemsSource="{Binding Collection}" Margin="0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="400"/>
        </StackPanel>
      </controls:PivotItem>

      <!--Pivot item two-->
      <controls:PivotItem DataContext="{Binding Source={StaticResource SampleDataSource3}}" Height="500" VerticalAlignment="Top" HorizontalAlignment="Left">
        <controls:PivotItem.Header>
          <StackPanel>
            <TextBlock Text="参加者" FontSize="70" />
          </StackPanel>
        </controls:PivotItem.Header>
        <StackPanel HorizontalAlignment="Left" Height="500" Margin="0" VerticalAlignment="Top" Width="468">
          <ListBox x:Name="memberListBox" HorizontalAlignment="Left" ItemTemplate="{StaticResource ItemTemplate1}" ItemsSource="{Binding Collection}" Margin="0" VerticalAlignment="Top" Height="500" Width="400"/>
        </StackPanel>
      </controls:PivotItem>
      <controls:PivotItem x:Name="hashPivotItem" DataContext="{Binding Source={StaticResource SampleDataSource4}}" Height="500" VerticalAlignment="Top" HorizontalAlignment="Left">
        <controls:PivotItem.Header>
          <StackPanel>
            <TextBlock x:Name="hashPivotHeader" Text="hashtag" FontSize="70" />
          </StackPanel>
        </controls:PivotItem.Header>
				<StackPanel HorizontalAlignment="Left" Height="500" Margin="0" VerticalAlignment="Top" Width="468">
          <ListBox x:Name="hashtagListBox" HorizontalAlignment="Left" ItemTemplate="{StaticResource ItemTemplate4}" ItemsSource="{Binding Collection}" Margin="0" VerticalAlignment="Top" Height="500" Width="400"/>
        </StackPanel>
      </controls:PivotItem>
    </controls:Pivot>
    <Image x:Name="LoadingImage" HorizontalAlignment="Left" Height="570" VerticalAlignment="Bottom" Width="480" Source="loading.jpg" RenderTransformOrigin="0.5,0.5" d:IsHidden="True">
  		<Image.RenderTransform>
  			<CompositeTransform/>
  		</Image.RenderTransform>
  	</Image>
  </Grid>

上のようなPivot定義をしています。
値の存在有無で、名前が「hashPivotItem」のPivotItemを削除するか非表示にしたいと思い、次のようなコードを試しました。

一つ目と、

detailPivot.Items.RemoveAt(2);

二つ目と、

detailPivot.Items.Remove(hashPivotItem);

それぞれを試行しましたが動作しませんでした。
双方とも、「The parameter is incorrect.」のエラーが表示されました。

しかし、まだ画面定義がシンプルな段階で動作確認をしたときには、二つ目で上手く動いたような気がしているのですが、今現在はエラーがでるようになりました。

PivotItemを非表示もしくは削除する方法、もしくは解決策についてわかる方がいらっしゃいましたら、教えていただけないでしょうか。

Answer 1

もしかしたらバグかもしれませんが、Header を個別に定義されていることが原因となっているようです。

正確には、PivotItemを削除後に残ったPivotItemでどれか1つでもHeaderを個別定義しているものがあると、エラーとなります。

 

■ 解決方法：Header 定義を簡略化

Pivot Item のプロパティでヘッダーを定義します。

<controls:PivotItem Height="500" VerticalAlignment="Top" Header="詳細情報">
       :
</controls:PivotItem>

<controls:PivotItem Height="500" VerticalAlignment="Top" HorizontalAlignment="Left"  Header="参加者">
       :
</controls:PivotItem>

<controls:PivotItem x:Name="hashPivotItem" Height="500" VerticalAlignment="Top" HorizontalAlignment="Left" Header="hashtag">
       :
</controls:PivotItem>

ただし、この方法の場合はヘッダーのフォント設定やレイアウトを個別に定義することができません。

 

※ しいて言えば、削除するPivotItemのヘッダーのみ個別定義が可能です。

<controls:PivotItem x:Name="hashPivotItem" Height="500" VerticalAlignment="Top" HorizontalAlignment="Left">
    <controls:PivotItem.Header>
        <StackPanel>
            <TextBlock Name="hashPivotHeader" Text="hashtag" FontSize="70" />
        </StackPanel>
    </controls:PivotItem.Header>
</controls:PivotItem> 

 

 

---

マイクロソフト エバンジェリスト 高橋 忍

Answer 2

ありがとうございます！

教えていただいた通り、PivotItemのHeaderで個別定義を使用しないように修正したところ、正常にPivotItemを削除することができました。

アプリケーション開発当初は、Headerを独自定義したかったのですが、開発を進める内に個別定義の必要性が無くなっていたので、
個別定義をしないことで対応することにしました。

PivotItemのHeaderを個別定義したい
PivotItemを動的に削除したい
２つの要件を同時に実現できるよう、次期バージョンで改善されるとうれしいですね！

Connectなどから要望を出したほうが良いのでしょうか。