是否可以在 ListView 中显示带有文本 + 图标的行？

Question

我想在ListView 中显示带有通知的不同行。

我尝试了StackPanel，但我不确定我是否走在正确的道路上。

<StackPanel Margin="5" Orientation="Horizontal" Background="DarkBlue" Height="28">
   <Image Source="../Resources/crown.png" Height="18"/>
   <TextBlock Text="Hello, I am a text block!" Margin="3 0 0 0"/>
</StackPanel>

它并不总是相同的行，它也可以只是文本。

有没有人知道我可以如何实现这样的东西（可能也在代码隐藏中）？

Answer 1

您没有任何数据结构，所以让我们在下面创建它们。这种方法并不完整，只有太多的选择来实现这个场景。您可以随时调整、改进和扩展示例以满足您的要求。

我将使用ItemsControl，因为这似乎是一个只读通知控件。如果您希望项目可以选择，您可以轻松地将其替换为 ListBox 或 ListView。

这个想法很简单，有一个Line 模型包含所有要显示的信息，它是DateTime 类型的属性，用于时间戳和LineFragment 的可枚举，它代表所有不同的数据类型显示在一行中。

public class Line
{
   public Line(DateTime dateTime, IEnumerable<LineFragment> fragments)
   {
      DateTime = dateTime;
      Fragments = fragments;
   }

   public DateTime DateTime { get; }

   public IEnumerable<LineFragment> Fragments { get; }
}

LineFragment 是许多派生类型的基类型，它们在一行中表示文本和其他数据。

public abstract class LineFragment
{
}

• 一个简单的TextFragment 表示一行中的纯文本。

  public class TextFragment : LineFragment
  {
     public TextFragment(string text)
     {
        Text = text;
     }
  
     public string Text { get; }
  }
  

• 代表玩家的玩家片段，例如Knochenbrecher Messerkämpferin.

  public class PlayerFragment : LineFragment
  {
     public PlayerFragment(string name)
     {
        Name = name;
     }
  
     public string Name { get; }
  }
  

• 代表头骨和牙冠的玩家状态片段。

  public class PlayerStatFragment : LineFragment
  {
     public PlayerStatFragment(int skulls, int crowns)
     {
        Skulls = skulls;
        Crowns = crowns;
     }
  
     public int Skulls { get; }
  
     public int Crowns { get; }
  }
  
  

• 一个属性统计片段，它具有代表 Glory、Experience 或 Silver 等属性的衍生物。

  public abstract class AttributeStatFragment : LineFragment
  {
     protected AttributeStatFragment(string name, AttributeStatOperator statOperator, int value)
     {
        Name = name; 
        Operator = statOperator;
        Value = value;
     }
  
     public string Name { get; }
  
     public AttributeStatOperator Operator { get; }
  
     public int Value { get; }
  }
  
  public class GloryStatFragment : AttributeStatFragment
  {
     public GloryStatFragment(string name, AttributeStatOperator statOperator, int value) : base(name, statOperator, value)
     {
     }
  }
  
  public class ExperienceStatFragment : AttributeStatFragment
  {
     public ExperienceStatFragment(string name, AttributeStatOperator statOperator, int value) : base(name, statOperator, value)
     {
     }
  }
  
  public class SilverStatFragment : AttributeStatFragment
  {
     public SilverStatFragment(string name, AttributeStatOperator statOperator, int value) : base(name, statOperator, value)
     {
     }
  }
  
  public enum AttributeStatOperator
  {
     Plus,
     Minus
  }
  

• 代表税收的税收片段和衍生品，如公会税。

  public abstract class TaxFragment : LineFragment
  {
     public TaxFragment(string name, int value)
     {
        Name = name;
        Value = value;
     }
  
     public string Name { get; }
  
     public int Value { get; }
  }
  
  public class GuildTaxFragment : TaxFragment
  {
     public GuildTaxFragment(string name, int tax) : base(name, tax)
     {
     }
  }
  

现在您可以在视图模型或代码隐藏中公开Lines 的集合。如果您在运行时添加项目，则必须使用ObervableCollection<T>，否则添加、删除或插入项目等更改将不会反映在用户界面中。

public ObservableCollection<Line> Lines { get; }

不要忘记初始化集合属性。之后，您可以像这样添加您的项目：

Lines.Add(new Line(DateTime.Now, new List<LineFragment>
{
   new TextFragment("Du hast"),
   new GloryStatFragment(GloryStatName, AttributeStatOperator.Plus, 820),
   new PlayerStatFragment(390, 273),
   new TextFragment("erhalten")
}));

Lines.Add(new Line(DateTime.Now, new List<LineFragment>
{
   new TextFragment("Du erhältst"),
   new ExperienceStatFragment(ExperienceStatName, AttributeStatOperator.Plus, 42)
}));

Lines.Add(new Line(DateTime.Now, new List<LineFragment>
{
   new PlayerFragment("Knochenbrecher Messerkämpferin"),
   new TextFragment("hat"),
   new TextFragment("für dich regeneriert")
}));

Lines.Add(new Line(DateTime.Now, new List<LineFragment>
{
   new TextFragment("Du hast"),
   new SilverStatFragment(SilverStatName, AttributeStatOperator.Plus, 184),
   new PlayerStatFragment(75, 61),
   new TextFragment("erhalten")
}));

Lines.Add(new Line(DateTime.Now, new List<LineFragment>
{
   new TextFragment("Du hast"),
   new GuildTaxFragment(GuildTaxName, 46),
   new TextFragment("bezahlt")
}));

为了显示片段，我们必须在 XAML 中为我们的项目创建DataTemplates。请注意，出于演示目的，我创建了位于 Resources 文件夹中的虚拟图像。

<Style x:Key="LineFragmentImageStyle"
       TargetType="{x:Type Image}">
   <Setter Property="Width"
           Value="10" />
   <Setter Property="Height"
           Value="10" />
   <Setter Property="Margin"
           Value="2" />
</Style>

<Style x:Key="OperatorTextBlockStyle"
       TargetType="{x:Type TextBlock}">
   <Setter Property="Text"
           Value="+ " />
   <Style.Triggers>
      <DataTrigger Binding="{Binding}"
                   Value="{x:Static local:AttributeStatOperator.Minus}">
         <Setter Property="Text"
                 Value="- " />
      </DataTrigger>
   </Style.Triggers>
</Style>

<DataTemplate DataType="{x:Type local:TextFragment}">
   <TextBlock Text="{Binding Text, StringFormat='{}{0} '}" />
</DataTemplate>
<DataTemplate DataType="{x:Type local:PlayerFragment}">
   <TextBlock Text="{Binding Name, StringFormat='{}{0} '}" />
</DataTemplate>

<DataTemplate DataType="{x:Type local:PlayerStatFragment}">
   <StackPanel Orientation="Horizontal">
      <TextBlock Text="( " />
      <Image Source="Resources/skull.png"
             Style="{StaticResource LineFragmentImageStyle}" />
      <TextBlock Text="{Binding Skulls, StringFormat='{} {0} '}" />
      <Image Source="Resources/crown.png"
             Style="{StaticResource LineFragmentImageStyle}" />
      <TextBlock Text="{Binding Crowns, StringFormat='{} {0} '}" />
      <TextBlock Text=" ) " />
   </StackPanel>
</DataTemplate>

<DataTemplate DataType="{x:Type local:ExperienceStatFragment}">
   <StackPanel Orientation="Horizontal">
      <TextBlock DataContext="{Binding Operator}"
                 Style="{StaticResource OperatorTextBlockStyle}" />
      <Image Source="Resources/key.png"
             Style="{StaticResource LineFragmentImageStyle}" />
      <TextBlock Text="{Binding Value, StringFormat='{} {0} '}" />
      <TextBlock Text="{Binding Name, StringFormat='{}{0} '}" />
   </StackPanel>
</DataTemplate>

<DataTemplate DataType="{x:Type local:GloryStatFragment}">
   <StackPanel Orientation="Horizontal">
      <TextBlock DataContext="{Binding Operator}"
                 Style="{StaticResource OperatorTextBlockStyle}" />
      <Image Source="Resources/badge.png"
             Style="{StaticResource LineFragmentImageStyle}" />
      <TextBlock Text="{Binding Value, StringFormat='{} {0} '}" />
      <TextBlock Text="{Binding Name, StringFormat='{}{0} '}" />
   </StackPanel>
</DataTemplate>

<DataTemplate DataType="{x:Type local:SilverStatFragment}">
   <StackPanel Orientation="Horizontal">
      <TextBlock DataContext="{Binding Operator}"
                 Style="{StaticResource OperatorTextBlockStyle}" />
      <Image Source="Resources/silver.png"
             Style="{StaticResource LineFragmentImageStyle}" />
      <TextBlock Text="{Binding Value, StringFormat='{} {0} '}" />
      <TextBlock Text="{Binding Name, StringFormat='{}{0} '}" />
   </StackPanel>
</DataTemplate>

<DataTemplate DataType="{x:Type local:GuildTaxFragment}">
   <StackPanel Orientation="Horizontal">
      <Image Source="Resources/silver.png"
             Style="{StaticResource LineFragmentImageStyle}" />
      <TextBlock Text="{Binding Value, StringFormat='{} {0} '}" />
      <TextBlock Text="{Binding Name, StringFormat='{}{0} '}" />
      <TextBlock Text="(" />
      <Image Source="Resources/armor.png"
             Style="{StaticResource LineFragmentImageStyle}" />
      <TextBlock Text=")" />
   </StackPanel>
</DataTemplate>

然后我们为Line 本身创建一个数据模板。每行显示一个带有TextBlock 的时间戳，旁边是一个ItemsControl，它使用上面定义的数据模板水平显示所有片段。 WrapPanel 超出视口会自动换行。

<DataTemplate DataType="{x:Type local:Line}">
   <Grid>
      <Grid.ColumnDefinitions>
         <ColumnDefinition Width="Auto" />
         <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <TextBlock Grid.Column="0"
                 Margin="3"
                 Text="{Binding DateTime, StringFormat=[hh:mm:ss]}" />
      <ItemsControl Grid.Column="1"
                    Margin="3"
                    ItemsSource="{Binding Fragments}">
         <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
               <WrapPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
         </ItemsControl.ItemsPanel>
      </ItemsControl>
   </Grid>
</DataTemplate>

最后但同样重要的是，要显示Lines 集合，我们必须将ItemsControl 添加到使用Line 数据模板来显示行的用户界面XAML。

<ScrollViewer>
   <ItemsControl ItemsSource="{Binding Lines}" Style="{StaticResource LinesItemsControlStyle}" />
</ScrollViewer>

就是这样。您可以轻松地将其与其他项目一起扩展。看起来是这样的：

Answer 2

如果您希望图像实际上包含在文本中（如表情符号），那么您将不得不做一些工作。这听起来像是我真正想要一个用户控件的少数几次之一，其重点是扫描文本以查找表情符号值并动态构建数据模板。

请记住，您可以在 XAML 中执行的任何操作都可以在代码中执行，因此我正在考虑的代码将遵循以下总体思路：

1. 扫描文本以获取表情符号值并为数据元素创建值列表。
2. 创建一个 DockPanel。
3. 对于 List 中的每个元素，添加 TextBlock 或 Image（基于值）。
4. 将 this.Content 设置为 DockPanel。

我认为这样的东西实际上是您正在寻找的东西，但如果您只想要一个图像，那么 ValueConverter 建议会起作用。