开源C# WPF控件库--Newbeecoder.UI使用指南（三）

原创

用户7152477

修改于 2022-05-05 11:56:22

2.5K0

修改于 2022-05-05 11:56:22

文章被收录于专栏：CSharp编程CSharp编程

在开发项目中要显示一组数据且可以选择一项或多项的时候，可以使用ListBox列表框。SelectionMode设置选择单项和多项，全选使用SelectAll属性进行设置。

在WPF中可以对ItemsSource绑定对象获取数据列表。以便在列表框中选择它的项目。我也想反其道而行之，如果取消选择某个项目，则对象中的 ObservableList 将相应更改。

Newbeecoder.UI控件库在ListBox基础扩展更多功能，例如风格，图标，圆角等。需要扩展其它功能将Newbeecoder.UI控件进行添加就可以实现。

ListBoxItem用于填充每一项列表数据。要选择一个ListBoxItem在列表框，设置IsSelected属性true。默认情况下，的HorizontalAlignment一个的ListBoxItem的设置为拉伸。StackPanel的默认水平位置是Center。如果您通过StackPanel设置ListBoxItem的Width属性，则应用面板的默认值并且项目居中。

Demo下载：

Newbeecoder.UI.zip

只要你有好看的设计图，基本上都可以用Newbeecoder.UI按设计图开发出来，下面演示开源控件库开发的控件：

视频内容

Newbeecoder.UI有设计了两种列表框。分别是基础列表框、菜单列表框。

一、基础列表框使用方法。

<NbListBox Style="{DynamicResource DefaultListBoxStyle}" Width="120" Background="{Binding Path=Color.Brush_Border4, Source={x:Static NbTheme.Current}}">
    <NbListBoxItem Style="{DynamicResource DefaultListBoxItemStyle}" Content="功能一"/>
    <NbListBoxItem Style="{DynamicResource DefaultListBoxItemStyle}" Content="功能二"/>
    <NbListBoxItem Style="{DynamicResource DefaultListBoxItemStyle}" Content="功能三"/>
</NbListBox>

二、菜单列表框使用方法。

<NbListBox Style="{DynamicResource MenuListBoxStyle}" Background="{Binding Path=Color.Brush_Border4, Source={x:Static NbTheme.Current}}">
    <NbListBoxItem Style="{DynamicResource MenuListBoxItemStyle}">
        <StackPanel Orientation="Horizontal">
            <NbIcon Data="{StaticResource Icon-Button-Fill}" Width="18" Margin="16,0,5,0" Foreground="{Binding Path=Color.Brush_Base2_OP8, Source={x:Static NbTheme.Current}}"/>
            <TextBlock Text="按钮" VerticalAlignment="Center"/>
        </StackPanel>
    </NbListBoxItem>
    <NbListBoxItem Style="{DynamicResource MenuListBoxItemStyle}">
        <StackPanel Orientation="Horizontal">
            <NbIcon Data="{StaticResource Icon-Check-Fill}" Width="18" Margin="16,0,5,0" Foreground="{Binding Path=Color.Brush_Base2_OP8, Source={x:Static NbTheme.Current}}"/>
            <TextBlock Text="单选框" VerticalAlignment="Center"/>
        </StackPanel>
    </NbListBoxItem>
    <NbListBoxItem Style="{DynamicResource MenuListBoxItemStyle}">
        <StackPanel Orientation="Horizontal">
            <NbIcon Data="{StaticResource Icon-Radio-Fill}" Width="18" Margin="16,0,5,0" Foreground="{Binding Path=Color.Brush_Base2_OP8, Source={x:Static NbTheme.Current}}"/>
            <TextBlock Text="多选框" VerticalAlignment="Center"/>
        </StackPanel>
    </NbListBoxItem>
    <NbListBoxItem Style="{DynamicResource MenuListBoxItemStyle}">
        <StackPanel Orientation="Horizontal">
            <NbIcon Data="{StaticResource Icon-ListBox-Fill}" Width="18" Margin="16,0,5,0" Foreground="{Binding Path=Color.Brush_Base2_OP8, Source={x:Static NbTheme.Current}}"/>
            <TextBlock Text="列表框" VerticalAlignment="Center"/>
        </StackPanel>
    </NbListBoxItem>
    <NbListBoxItem Style="{DynamicResource MenuListBoxItemStyle}">
        <StackPanel Orientation="Horizontal">
            <NbIcon Data="{StaticResource Icon-TextBox-Fill}" Width="18" Margin="16,0,5,0" Foreground="{Binding Path=Color.Brush_Base2_OP8, Source={x:Static NbTheme.Current}}"/>
            <TextBlock Text="输入框" VerticalAlignment="Center"/>
        </StackPanel>
    </NbListBoxItem>
</NbListBox>

在菜单NbListBoxItem列表项中，左边添加一个NbIcon图标，在示例中图标在资源文件预先保存好的矢量图，所以用静态资源调用。右边TextBlock显示文本内容。

需要使用Newbeecoder.UI开源控件库或者定制UI控件开发请私信给我。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。