WPF - 与父内容内联显示项目控件答案

【问题标题】：WPF - Display Items Control inline with parent contentWPF - 与父内容内联显示项目控件
【发布时间】：2014-09-18 21:45:28
【问题描述】：

我正在尝试在 wpf 中创建一个布局，该布局将显示父类名称，然后显示与父类关联的属性列表。我将父级用作根 DataContext，然后将 ItemsControl 绑定到 Attributes 的子级列表。

我希望显示如下所示，这样当换行时，它将在标题“ParentName -”下显示下一个属性

父名称 - 属性 1、属性 2、属性 3 属性4、属性5和属性6

我的问题是我无法弄清楚如何使“ParentName”与属性内联运行，因此它总是会出现以下行缩进以水平匹配第一个属性，而不是我希望的“ParentName -”组件.

是否有任何容器允许这样的事情？似乎所有可用的容器都像 HTML 块元素。我非常想通过 XAML 而不是背后的代码来做到这一点。

<DataTemplate x:Key="ItemDisplay">
    <WrapPanel Orientation="Horizontal" Grid.Column="3">
    <TextBlock Text="{Binding Description}" VerticalAlignment="Bottom"/>
    <ItemsControl Name="ToppingModificationsItemControl" ItemsSource="{Binding ItemAttributes}" VerticalAlignment="Bottom">
         <ItemsControl.ItemTemplate>
             <DataTemplate>
                 <WrapPanel Orientation="Horizontal">
                     <TextBlock Text="{Binding AttributeName}" VerticalAlignment="Bottom"/>
                 </WrapPanel>
             </DataTemplate>
         </ItemsControl.ItemTemplate>
 </ItemsControl>
   </WrapPanel>
</DataTemplate>

我无法包含我正在处理的实际代码，但我希望上面的示例能够说明我想要完成的工作。对于正在呈现的项目，您可以假设一个类具有一个用于描述的 String 属性和一个名为 Item Attributes 的属性中的字符串集合。

想看看

ItemDescription - Attribute1, Attribute2, Attribute3
Attribute4, Attribute5

不是

ItemDescription - Attribute1, Attribute2, Attribute3
                  Attribute4, Attribute5

谢谢。

【问题讨论】：

你能提供一些代码吗？
我添加了一个示例，我希望我的编辑不会弄乱任何无法识别的东西。

标签： wpf xaml user-interface

【解决方案1】：

我认为你不能用基本的 XAML 做到这一点。

WPF 面板有点像块，我认为没有任何东西可以支持 __| 形状的块，就像你想要的 ItemsPanel 一样，它会环绕左上角的另一个对象。

我只会使用IValueConverter，并让它将您的数据对象转换为您想要的格式的字符串。

类似这样的：

<TextBlock Text="{Binding Converter={StaticResource MyObjectToDisplayValue}" 
           TextWrapping="Wrap" ... />

你的转换器在哪里做这样的事情：

StringBuilder sb = new StringBuilder(val.Description);

if (val.Attributes != null && val.Attributes.Count > 0)
{
    sb.Append(" - ");
    foreach(var a in val.ItemAttributes)
        sb.Append(a.AttributeName + ", ");
}

return sb.ToString().TrimEnd(", ");

当然，如果您可以将其作为数据对象的属性，那可能会更好，但如果它没有意义，那么Converter 可能是下一个最佳选择。

【讨论】：

同意。这也是我的备份解决方案。也许这只是我正在开发的应用程序，但我似乎经常遇到这种情况，而且我可以在 HTML 中做一些事情，所以希望我只是错过了解决方案。

【解决方案2】：

您似乎想要获得 2 列。在这种情况下，我会将外部 WrapPanel 替换为 Grid 或水平 StackPanel。

【讨论】：

我认为这是倒退的。我希望它像所有东西都在一个包装面板中一样工作。第二个例子是我不想要的，可以很容易地得到它。它与该元素中的 Grid 或 Wrap Panel 看起来非常相似。使用网格它只是将项目描述放在它自己的列中。使用 WrapPanel，我有两个项目，描述和内部包装面板，然后并排放置。我需要一个 html 样式的内联处理或可以在外观上模仿它的东西。不过谢谢。

【解决方案3】：

我发现这个问题的解决方案是为两个集合创建一个接口，然后绑定到一个属性，该属性将返回两个列表的结果。然后设置要按类型隐式选择的模板。通过只执行一个绑定语句，我能够将所有内容放入一个包装面板中。

【讨论】：