C# Windows 8网格应用程序中的自定义详细信息页

我创建了一个简单的C#Windows8网格应用程序

如果您不熟悉此布局，请在此处对其进行简要说明：

我想要的很简单-一些定制的

ItemDetailPages

。我希望能够单击

GroupDetailPage

和

GroupedItemsPage

上的一些项目，并导航到一个自定义

.xaml

文件，其中我可以包含多个图像

我相信有一个简单的方法可以做到这一点，但我错过了，我也相信这些信息将对很多人有用，所以我将在这个问题上悬赏

到目前为止，我一直在努力做到这一点：

我在

SampleDataSource.cs

类中创建了一个

CustomDataItem

：

 /// <summary>
    /// Generic item data model.
    /// </summary>
    public class CustomDataItem : SampleDataCommon
    {
        public CustomDataItem(String uniqueId, String title, String subtitle, String imagePath, String description, String content, SampleDataGroup group)
            : base(uniqueId, title, subtitle, imagePath, description)
        {
            this._content = content;
            this._group = group;
        }

        private string _content = string.Empty;
        public string Content
        {
            get { return this._content; }
            set { this.SetProperty(ref this._content, value); }
        }

        private SampleDataGroup _group;
        public SampleDataGroup Group
        {
            get { return this._group; }
            set { this.SetProperty(ref this._group, value); }
        }
    }

使用不同的数据类型是不可能的。那么在这种情况下我能做什么呢

---

非常感谢。

是的，您应该能够创建自定义或不同的数据类型。如果使用网格模板创建Win8应用程序，您会看到该模板为您做了三件事： 1） 它创建三种类型：SampleDataCommon（基本）、SampleDataItem（实现SampleDataCommon并添加两个新属性-内容和组）和SampleDataGroup（实现SampleDataCommon并添加方法、ItemsCollectionChanged，并添加两个属性、Items和TopItems）。 2） 它创建了一个名为SampleDataSource的类，其中创建了一个SampleDataGroup集合，并将其命名为AllGroups:ObservableCollection AllGroups。 3） 它将SampleDataSource的项和所有组绑定到XMAL页面中的对象

在您的情况下，使用相同的数据结构。换句话说，您将创建一个包含项目等的组

我有一个简单的网格应用程序；如何使组项目页面中的一个元素链接到自定义项目详细信息页面

好的，让我们使用VisualStudio中的“Grid app”模板生成的应用程序

组项目页面上元素的数据类是

SampleDataItem

类。您可以添加某种类型的数据字段（

bool

、

int

，或其他），指示如何处理导航。在本例中，我们保持简单，因此我们添加了一个

bool

，以指示导航是否是自定义的

public class SampleDataItem : SampleDataCommon
{
    // add flag as last param
    public SampleDataItem(String uniqueId, String title, String subtitle, 
        String imagePath, String description, String content, SampleDataGroup group, 
        bool isCustomNav = false)
    : base(uniqueId, title, subtitle, imagePath, description)
    {
        this._content = content;
        this._group = group;
        this.IsCustomNav = isCustomNav;
    }

    // to keep it simple this doesn't handle INotifyPropertyChange, 
    // as does the rest of the properties in this class.
    public bool IsCustomNav { get; set; }

    ...
}

因此，在添加要显示的新

SampleDataItem

对象时，只需在构造函数中设置

isCustomNav

字段

现在我们所要做的就是在分组项目页面（GroupedItemsPage.xaml.cs）的网格中更改已经存在的click事件处理程序：

我们在上面所做的就是获取所选项目，然后测试前面添加的导航标志。基于此，我们导航到原始的

ItemDetailPage

或一个名为

ItemDetailPage2

的新页面。正如我前面提到的，导航标志不必是

bool

。它可以是

int

或

enum

或其他类型，告诉我们在哪里导航

请注意，如果希望在

GroupDetailsPage

上有类似的行为，只需以相同的方式更新单击事件处理程序即可

---

希望这能有所帮助。

我有点困惑，你到底在问什么-你是在问多个图像的自定义xaml页面会是什么样子，还是在选择一个组项目时如何导航到一个页面？@chue x:Hi，我有类似的问题。我想向组中添加不同类型的项目。例如，一个组显示KPI，一个组显示指标，但在示例GridApp中，SampleDataSource.cs只有一种类型的项（SampleDataItem）。我该怎么做？@Vanya-我没有按你的要求做。但是，您应该考虑使用一个存储公共基类的列表。然后在运行时，使用模板选择器根据类类型显示数据。如果您提出新问题并提供更多细节，您可能会得到更好的答案：

public class SampleDataItem : SampleDataCommon
{
    // add flag as last param
    public SampleDataItem(String uniqueId, String title, String subtitle, 
        String imagePath, String description, String content, SampleDataGroup group, 
        bool isCustomNav = false)
    : base(uniqueId, title, subtitle, imagePath, description)
    {
        this._content = content;
        this._group = group;
        this.IsCustomNav = isCustomNav;
    }

    // to keep it simple this doesn't handle INotifyPropertyChange, 
    // as does the rest of the properties in this class.
    public bool IsCustomNav { get; set; }

    ...
}

void ItemView_ItemClick(object sender, ItemClickEventArgs e)
{
    // Navigate to the appropriate destination page, configuring the new page
    // by passing required information as a navigation parameter
    var item = (SampleDataItem)e.ClickedItem;
    var itemId = item.UniqueId;

    if (item.IsCustomNav == false)
    {
        // default
        this.Frame.Navigate(typeof(ItemDetailPage), itemId);
    }
    else
    {
        // custom page
        this.Frame.Navigate(typeof(ItemDetailPage2), itemId);
    }
}