Avalonia跨平台入门第三十四篇之模板选择器

WPF程序员

发布于 2024-04-19 14:18:45

730

发布于 2024-04-19 14:18:45

前面简单玩耍了一下TreeView;今天再来尝试一下模板选择器,最终效果:

1、看官方的意思:用IDataTemplate来实现;

2、官方参考链接:

https://github.com/AvaloniaUI/Avalonia.Samples/tree/main/src/Avalonia.Samples/DataTemplates/IDataTemplateSample

3、咱也比着葫芦画个瓢:

4、前台ListBox中直接在DataTemplates:

<ListBox ItemsSource="{Binding Messages}" Background="Transparent" Theme="{x:Null}"  Grid.RowSpan="2"
     ItemContainerTheme="{StaticResource MessageListBoxItem}">
  <ListBox.DataTemplates>
    <TemplateSelector:MessageTemplateSelector>
      <DataTemplate x:Key="TextMsg" DataType="Models:MessageType">
        <TextBlock Text="{Binding Content}" VerticalAlignment="Center" TextWrapping="Wrap"
               Foreground="White" FontSize="18"/>
      </DataTemplate>
      <DataTemplate x:Key="ImageMsg" DataType="Models:MessageType">
        <Image Source="{Binding ImageName,Converter={StaticResource ImgNameToImageBrushConverter}}"
             Width="100" Height="100" Stretch="Uniform"/>
      </DataTemplate>
    </TemplateSelector:MessageTemplateSelector>
  </ListBox.DataTemplates>
</ListBox>

5、上面方式好冗余,还是下面的相对清爽点：

<ListBox ItemsSource="{Binding Messages}" Grid.Row="1" Background="Transparent" Theme="{x:Null}"
     ItemContainerTheme="{StaticResource MessageListBoxItem}">
  <ListBox.DataTemplates>
    <!--文本消息-->
    <DataTemplate DataType="Models:TextMessage">
      <TextBlock Text="{Binding Content}" VerticalAlignment="Center" TextWrapping="Wrap"
             Foreground="White" FontSize="18"/>
    </DataTemplate>
    <!--图片消息-->
    <DataTemplate DataType="Models:ImageMessage">
      <Image Source="{Binding ImageName,Converter={StaticResource ImgNameToImageBrushConverter}}" Width="100" Height="100" Stretch="Uniform"/>
    </DataTemplate>
  </ListBox.DataTemplates>
</ListBox>

6、至于每一项的水平对齐:

<Setter Property="HorizontalContentAlignment" Value="{Binding Converter={StaticResource ChatRoleTypeToHorizontalContentAlignmentConverter}}"/>

最终简单的效果先这样吧;以后有时间的话,可以再去摸索一下更复杂的效果;编程不息、Bug不止、无Bug、无生活;改bug的冷静、编码的激情、完成后的喜悦、挖坑的激动、填坑的兴奋;这也许就是屌丝程序员的乐趣吧;今天就到这里吧;希望自己有动力一步一步坚持下去;生命不息,代码不止;大家抽空可以看看今天分享的效果,有好的意见和想法,可以在留言板随意留言;我看到后会第一时间回复大家,多谢大家的一直默默的关注和支持!如果觉得不错,那就伸出您的小手点个赞并关注一下!

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2024-04-18，如有侵权请联系 cloudcommunity@tencent.com 删除

listbox