Avalonia跨平台入门第三十一篇之多选的下拉框

WPF程序员

发布于 2024-04-12 16:01:40

820

发布于 2024-04-12 16:01:40

最近再次玩耍Avalonia的时候需要实现一个支持多选的下拉控件效果:

1、第一版直接Expander+我的最爱:

<Expander>
  <Expander.Header>
    <TextBlock Text="{Binding SelectedItemsHeader}"/>
  </Expander.Header>
  <ListBox ItemsSource="{Binding LedList}" SelectionMode="Multiple"
       Background="#2D418D" Foreground="White"
       ItemTemplate="{StaticResource LedItemTemplate}"/>
</Expander>

2、关于ListBox中的ItemTemplate:

<DataTemplate x:Key="LedItemTemplate">
  <CheckBox Foreground="White" Margin="20,0,0,0"
        VerticalAlignment="Center" HorizontalAlignment="Left"
        Theme="{StaticResource SimpleCheckBox}"
        IsChecked="{Binding IsSelected}"
        Content="{Binding Name}"/>
</DataTemplate>

3、关于SelectedItemsHeader的逻辑处理:

 private void UpdateSelectedItemsHeader()
 {
     var selectedItems = ChannelList.Where(item => item.IsSelected).Select(item => item.Name);
     if (selectedItems != null)
     {
         string showStr = null;
         int count = selectedItems.Count();
         if (count != 0)
         {
             showStr = count > 2? $"{SelectedItemsHeader}...": string.Join(",", selectedItems);
         }
         else
         {
             showStr= "请选择(多选)";
         }
         SelectedItemsHeader = showStr;
     }
 }

4、最后直接封装成一个UserControl:

5、就这么随意玩耍了:

<WrapPanel HorizontalAlignment="Center">
  <Controls:MultipleSelectionComboBox ViewModel="{Binding ComboBoxMainViewModel}"/>
  <Controls:MultipleSelectionComboBox Margin="40,0,20,0" ViewModel="{Binding TwoBoxMainViewModel}"/>
</WrapPanel>

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

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

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

跨平台