动态生成文本块答案

【问题标题】：Dynamically generate textblocks动态生成文本块
【发布时间】：2015-03-04 10:03:41
【问题描述】：

我正在使用 Windows Phone Panorama App 模板并使用 LongListSelector 来允许用户单击并查看长列表中列出的项目的详细信息。 DetailsPage.xaml 中提供了项目的详细信息。我的代码运行良好，即用户能够跳转到 DetailsPage.xaml 上的正确项目并且内容对他们可见。

                <!--new text block -->
                <TextBlock Text="{Binding Term_1}" Style="{StaticResource Textblock}" FontWeight="Bold" Foreground="{StaticResource PhoneAccentBrush}"/>
                <TextBlock Text="{Binding Definition_1}" Style="{StaticResource Textblock}"  Margin="10,0,0,20" TextWrapping="Wrap"/>

                <TextBlock Text="{Binding Term_2}" Style="{StaticResource Textblock}" FontWeight="Bold" Foreground="{StaticResource PhoneAccentBrush}"/>
                <TextBlock Text="{Binding Definition_2}" Style="{StaticResource Textblock}" Margin="10,0,0,20"/>

                <TextBlock Text="{Binding Term_3}" Style="{StaticResource Textblock}" FontWeight="Bold" Foreground="{StaticResource PhoneAccentBrush}"/>
                <TextBlock Text="{Binding Definition_3}" Style="{StaticResource Textblock}" Margin="10,0,0,20"/>

                <TextBlock Text="{Binding Term_4}" Style="{StaticResource Textblock}" FontWeight="Bold" Foreground="{StaticResource PhoneAccentBrush}"/>
                <TextBlock Text="{Binding Definition_4}" Style="{StaticResource Textblock}" Margin="10,0,0,20"/>

                <TextBlock Text="{Binding Term_5}" Style="{StaticResource Textblock}" FontWeight="Bold" Foreground="{StaticResource PhoneAccentBrush}"/>
                <TextBlock Text="{Binding Definition_5}" Style="{StaticResource Textblock}" Margin="10,0,0,20"/>

                <TextBlock Text="{Binding Term_6}" Style="{StaticResource Textblock}" FontWeight="Bold" Foreground="{StaticResource PhoneAccentBrush}"/>
                <TextBlock Text="{Binding Definition_6}" Style="{StaticResource Textblock}" Margin="10,0,0,20"/>

我的问题是如何显示 DetailsPage.xaml 上的项目。例如，如果 Longlistselector 上的选项 1 有 4 项，而选项 2 有 6 项，则选项 2 看起来很好，但选项 1 最后有很多空格（可能是因为第 5 学期和第 6 学期没有数据)。如果另一个选项 3 只有 1 个项目，则整个 DetailsPage 在显示单个项目后包含大量空格。我在某些选项中有 100 多个项目，DetailsPage 末尾不需要的多余空格简直令人讨厌。我想知道是否有动态生成格式化的文本块以及 DetailsPage 中的绑定资源，以便可以删除额外的空格？如果没有，我怎样才能只显示给定选项所需的文本块？

更新：这是在文本块中加载数据的方式：

public void LoadData()
        {


            this.Items.Add(new ItemViewModel()

{
    ID = "0",
    Term_1 = "This is a term1",
    Definition_1 = "This definition1", 

Term_2 = "This is a term2",
        Definition_2 = "This definition2",

Term_3 = "This is a term3",
        Definition_3 = "This definition3",

Term_4 = "This is a term4",
        Definition_4 = "This definition4",

Term_5 = "This is a term5",
        Definition_5 = "This definition5",

});

this.Items.Add(new ItemViewModel()

{
    ID = "1",`enter code here`
    Term_1 = "This is a term1 for ID 1",
    Definition_1 = "This definition1 for ID 1"

});
this.Items.Add(new ItemViewModel()

{
    ID = "2",
    Term_1 = "This is a term1 for ID 2",
    Definition_1 = "This definition1 for ID 2"

});
this.Items.Add(new ItemViewModel()

{
    ID = "3",
    Term_1 = "This is a term1 for ID 3",
    Definition_1 = "This definition1 for ID 3"

});
this.Items.Add(new ItemViewModel()

{
    ID = "4",
    Term_1 = "This is a term1 for ID 4",
    Definition_1 = "This definition1 for ID 4"

});
this.Items.Add(new ItemViewModel()

{
    ID = "5",
    Term_1 = "This is a term1 for ID 5",
    Definition_1 = "This definition1 for ID 5"

});

this.Items.Add(new ItemViewModel()

{
    ID = "6",
    Term_1 = "This is a term1 for ID 6",
    Definition_1 = "This definition1 for ID 6"

});

如果我选择任何文本块，我将获得该 Texblock 的相应 ID 中列出的术语和定义。如果我选择第一个文本块，我将得到术语/定义 1、2、3、4、5。如果我选择另一个文本块，我将只得到一个术语/定义。

这就是它在输出中的确切方式。问题是，如果没有要显示该 ID 的术语，则术语 2、3、4、5 和 6 的 Textblock 会引入空格。因此，空文本块正在占用屏幕上的空间。我希望详细信息页面仅呈现适用于 ID 的 TextBlock，然后停止为该 ID 的剩余块创建它们。

【问题讨论】：

你能否添加一些额外的代码和 xaml，可能还有一些关于哪里出错以及你想要它的屏幕截图？问题描述提示“DataTemplate”作为答案的一部分，但在这种非常简洁的形式中，很难看出你到底想要什么。
@WillemvanRumpt：添加了有关该问题的更多信息
我可以看到你要去哪里，以及你的问题是什么，但它的范围太大而无法在一个合理大小的答案中解释，所以我会留下一些提示作为评论：而不是将“Term_1”到“Term_2”定义为固定属性，将它们定义为 ItemViewModel 上的一个 List-of-Terms 属性，包含所需数量的“Terms”。然后，您可以将该列表绑定到 ItemsControl，这将占用显示项目所需的空间。因此，您可以使用 ListView（或类似的东西），而不是预先定义六个 TextBlock，并绑定到术语列表。
@WillemvanRumpt：你有什么例子可以让我探索理解实现吗？
@WillemvanRumpt：我找到了这个例子：stackoverflow.com/questions/2853276/…。你指的是这个吗？

标签： windows-phone-8

【解决方案1】：

不要将“Term_1”到“Term_2”定义为ItemViewModel 上的属性，而是在ItemViewModel 上声明一个List 属性（我假设这里是字符串类型）：

public class ItemViewModel
{
    // ... other properties
    public List<string> Terms
    {
       get; set; // Implementation ommited
    }
}

ItemViewModel 实例的创建将变成类似

ItemViewModel viewModelItem= new ItemViewModel() { Id = "1", Definition_1 = "..." };
viewModelItem.Terms.Add("Term1 for Id1");
viewModelItem.Terms.Add("Term2 for Id1");
viewModelItem.Terms.Add("Term3 for Id1");
// ...as many terms as you have...
this.Items.Add(viewModelItem);

在您的详细信息页面中，我假设它显示了一个 ItemViewModel（从 LongListSelector 中选择的一个），您可以在 XAML 中添加一个 ListView（或类似的东西）并将其绑定到ItemViewModel类：

<!-- Assumes an `ItemViewModel` instance is the `DataContext` for the ListView! -->
<ListView ItemsSource={Binding Terms}>
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text={Binding}/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

ListView 将根据需要生成尽可能多的ListViewItems。

【讨论】：