Question

我正在开发我的第一个Windows 8 RT应用程序，并从示例网格应用程序开始。我的目标是改变其中一个网格项的样式。

我已经能够使用这个'找到'这个项目：

if (dataItem.UniqueId.StartsWith("Group-1-Item-1"))

然后我用C＃创建了这个样式（仅作为示例）;

Style style = new Style (typeof(SampleDataItem));
Thickness thick = new Thickness(4,4,4,4);
style.Setters.Add(new Setter(Border.BorderThicknessProperty, new Thickness(100)));

然而，现在我必须将这种风格应用于特定的数据项 - 我已经尝试了很多东西，但是现在我看着它们时我并没有理解它们。

Answer 1

Grid App项目模板的dataItems的数据模板位于StandardStyles.xaml中，并由“Standard250x250ItemTemplate”键引用。

如果想要根据项目的内容改变样式，一种方法可能是使用Binding.Converter as shown here将有问题的内容的值转换为所需的样式或风格属性。

例如，如果我想让默认网格应用模板中的任何项目如果项目编号小于或等于3则具有绿色背景，如果它高于3则为红色，我将创建以下转换器class（在我的例子中，我刚刚将类添加到GroupedItemsPage.xaml.cs，就在GroupedItemsPage分部类之前）：

// 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中，我制作了Standard250x250ItemTemplate的副本，该副本从项目的Title属性绑定到我的转换器类，如下所示：

<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">

一旦完成，我就可以运行项目了，这就是我所看到的：

Grid App with Converter

希望有所帮助！

有关Windows应用商店应用开发的详细信息，请注册Generation App。

覆盖特定dataItem的样式

1 个答案: