前面简单玩耍了一下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的冷静、编码的激情、完成后的喜悦、挖坑的激动 、填坑的兴奋;这也许就是屌丝程序员的乐趣吧;今天就到这里吧;希望自己有动力一步一步坚持下去;生命不息,代码不止;大家抽空可以看看今天分享的效果,有好的意见和想法,可以在留言板随意留言;我看到后会第一时间回复大家,多谢大家的一直默默的关注和支持!如果觉得不错,那就伸出您的小手点个赞并关注一下!