グリッド アプリ プロジェクト テンプレートの dataItems のデータ テンプレートは StandardStyles.xaml にあり、キー "Standard250x250ItemTemplate" によって参照されます。
アイテムのコンテンツに基づいてスタイルを変更することが目的の場合、ここに示すように Binding.Converter を使用して、問題のコンテンツの値を目的のスタイルまたはスタイル プロパティに変換する方法があります。
たとえば、デフォルトの Grid App テンプレート内の項目の番号が 3 以下の場合は背景を緑にし、3 より大きい場合は赤の背景にする場合は、次のコンバーター クラスを作成します (私の場合、GroupedItemsPage 部分クラスの直前に、クラスを GroupedItemsPage.xaml.cs に追加しました):
// Custom class implements the IValueConverter interface.
public class StyleConverter : IValueConverter
{
#region IValueConverter Members
// Define the Convert method to change a title ending with > 3
// to a red background, otherwise, green.
public object Convert(object value, Type targetType,
object parameter, string language)
{
// The value parameter is the data from the source object.
string title = (string)value;
int lastNum = (int.Parse(title.Substring(title.Length - 1)));
if (lastNum > 3)
{
return "Red";
}
else
{
return "Green";
}
}
// ConvertBack is not implemented for a OneWay binding.
public object ConvertBack(object value, Type targetType,
object parameter, string language)
{
throw new NotImplementedException();
}
#endregion
}
クラスが定義されたら、必要な Convert メソッドと共に、インスタンスを App.xaml ファイルに追加します。これにより、StandardStyles.xaml の項目テンプレートで使用できるようになります。
<!-- Application-specific resources -->
<local:StyleConverter x:Key="StyleConverter"/>
StandardStyles.xaml で、次のように、アイテムの Title プロパティからコンバーター クラスにバインドする Standard250x250ItemTemplate のコピーを作成しました。
<DataTemplate x:Key="Standard250x250ItemTemplate_Convert">
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="{Binding Title,
Converter={StaticResource StyleConverter}}">
</Border>
<StackPanel VerticalAlignment="Bottom"
Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
重要な部分は、Border 要素の Background プロパティを Title にバインドすることであり、Converter={StaticResource StyleConverter} を使用して、アイテム テンプレートをコンバーターに接続します。Background プロパティをバインドするだけでなく、ネストされた Image 要素もアイテム テンプレートの元のバージョンから削除したことに注意してください。
最後に、GroupedItemsPage.xaml で、アイテム テンプレートをカスタマイズしたバージョンに変更します。
<!-- Horizontal scrolling grid used in most view states -->
<GridView
x:Name="itemGridView"
...
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
ItemTemplate="{StaticResource Standard250x250ItemTemplate_Convert}"
...
ItemClick="ItemView_ItemClick">
それが完了したら、プロジェクトを実行できます。次のように表示されます。
それが役立つことを願っています!
Windows ストア アプリ開発の詳細については、Generation Appに登録してください。