Open source C ＃ WPF control library --newbeecoder UI usage guide (III)

When a set of data is to be displayed in a development project and one or more items can be selected , have access to ListBox List box .SelectionMode Set to select single and multiple items , Select all to use SelectAll Property to set .

stay WPF You can be right ItemsSource Bind object to get data list . To select its item in the list box . I want to do the opposite , If you deselect an item , Then... In the object ObservableList Change accordingly .

Newbeecoder.UI Control library in ListBox Basic extension more functions , For example, style , Icon , Fillet, etc . Need to extend other functions will Newbeecoder.UI Control can be added .

ListBoxItem Used to fill in the list data of each item . To choose one ListBoxItem In the list box , Set up IsSelected attribute true. By default , Of HorizontalAlignment One of them ListBoxItem Is set to stretch .StackPanel The default horizontal position of is Center. If you pass StackPanel Set up ListBoxItem Of Width attribute , The default values of the panel are applied and the item is centered .

Newbeecoder.UI Open source controls Demo Download link ：https://share.weiyun.com/MwgWJM8Y

As long as you have good design drawings , Basically you can use Newbeecoder.UI Developed according to the design drawing , The following demonstrates the controls developed by the open source control library ：

Video content

​ Newbeecoder.UI There are two kinds of list boxes designed . These are the basic list boxes 、 Menu list box .

One 、 How to use the basic list box .

<NbListBox Style="{DynamicResource DefaultListBoxStyle}" Width="120" Background="{Binding Path=Color.Brush_Border4, Source={x:Static NbTheme.Current}}">
    <NbListBoxItem Style="{DynamicResource DefaultListBoxItemStyle}" Content=" Function one "/>
    <NbListBoxItem Style="{DynamicResource DefaultListBoxItemStyle}" Content=" Function 2 "/>
    <NbListBoxItem Style="{DynamicResource DefaultListBoxItemStyle}" Content=" Function three "/>
</NbListBox>

Two 、 How to use the menu list box .

<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=" Button " 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=" Radio buttons " 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=" Checkbox " 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=" List box " 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=" Input box " VerticalAlignment="Center"/>
        </StackPanel>
    </NbListBoxItem>
</NbListBox>

On the menu NbListBoxItem List item , Add a... On the left NbIcon Icon , In the example, the icon is a pre saved vector graph in the resource file , So call with static resources . On the right TextBlock Show text content .

Need to use Newbeecoder.UI Open source control library or customized UI Control development please send me a private letter .