ListBox default style is not recommended to use directly, it should always be used by other styles in BasedOn mode.
Example:
1
<ListBox hc:ListBoxAttach.IsOddEvenRow="True" AlternationCount="2"/>
<Style BasedOn = "{StaticResource ListBoxBaseStyle}" TargetType = "ListBox" />
ListBox ListCustomstyle, which retains the basic attribute style of the Listbox, and the data display style is customized by the current user to achieve personalized customization.
12345678910111213
<ListBox Margin="10" ItemsSource="{Binding Datas}" Style="{DynamicResource ListBoxCustom}"> <ListBox.ItemTemplate> <DataTemplate> <Border BorderThickness="1" BorderBrush="Black" Margin="0,5"> <DockPanel LastChildFill="True"> <Path DockPanel.Dock="Left" Fill="YellowGreen" Width="20" Margin="10,0,10,0" HorizontalAlignment="Center" Data="{DynamicResource BubbleTailGeometry}"></Path> <TextBlock Padding="10" Text="{Binding Name}"></TextBlock> </DockPanel> </Border> </DataTemplate> </ListBox.ItemTemplate></ListBox>
The layout container is WrapPanel, and the display style is horizontal.
<ListBox Margin="10" ItemsSource="{Binding Datas}" Style="{DynamicResource WrapPanelHorizontalListBox}"> <ListBox.ItemTemplate> <DataTemplate> <Border BorderThickness="1" BorderBrush="Black" Margin="5,0"> <DockPanel LastChildFill="True"> <Path DockPanel.Dock="Left" Fill="YellowGreen" Width="20" Margin="10,0,10,0" HorizontalAlignment="Center" Data="{DynamicResource BubbleTailGeometry}"></Path> <TextBlock Padding="10" Text="{Binding Name}"></TextBlock> </DockPanel> </Border> </DataTemplate> </ListBox.ItemTemplate></ListBox>
The layout container is WrapPanel, and the display style is vertical.
<ListBox Margin="10" ItemsSource="{Binding Datas}" Style="{DynamicResource WrapPanelVerticalListBox}"> <ListBox.ItemTemplate> <DataTemplate> <Border BorderThickness="1" BorderBrush="Black" Margin="0,5"> <DockPanel LastChildFill="True"> <Path DockPanel.Dock="Left" Fill="YellowGreen" Width="20" Margin="10,0,10,0" HorizontalAlignment="Center" Data="{DynamicResource BubbleTailGeometry}"></Path> <TextBlock Padding="10" Text="{Binding Name}"></TextBlock> </DockPanel> </Border> </DataTemplate> </ListBox.ItemTemplate></ListBox>
The layout container is a StackPanel, and the display style is horizontal.
<ListBox Margin="10" ItemsSource="{Binding Datas}" Style="{DynamicResource StackPanelHorizontalListBox}"> <ListBox.ItemTemplate> <DataTemplate> <Border BorderThickness="1" BorderBrush="Black" Margin="5,0"> <DockPanel LastChildFill="True"> <Path DockPanel.Dock="Left" Fill="YellowGreen" Width="20" Margin="10,0,10,0" HorizontalAlignment="Center" Data="{DynamicResource BubbleTailGeometry}"></Path> <TextBlock Padding="10" Text="{Binding Name}"></TextBlock> </DockPanel> </Border> </DataTemplate> </ListBox.ItemTemplate></ListBox>
The layout container is a StackPanel, which displays the style vertically.
<ListBox Margin="10" ItemsSource="{Binding Datas}" Style="{DynamicResource StackPanelVerticalListBox}"> <ListBox.ItemTemplate> <DataTemplate> <Border BorderThickness="1" BorderBrush="Black" Margin="0,1"> <DockPanel LastChildFill="True"> <Path DockPanel.Dock="Left" Fill="YellowGreen" Width="20" Margin="10,0,10,0" HorizontalAlignment="Center" Data="{DynamicResource BubbleTailGeometry}"></Path> <TextBlock Padding="10" Text="{Binding Name}"></TextBlock> </DockPanel> </Border> </DataTemplate> </ListBox.ItemTemplate></ListBox>
This style is Only Available in Custom Version
Only Available in Custom Version
you can use IconElement and ListBoxAttach AttachedProperty
IconElement
ListBoxAttach
12345
<ListBox Style="{StaticResource ListBoxModernStyle}" Width="200" Margin="32"> <ListBoxItem Content="Item 1" hc:IconElement.Height="16" hc:IconElement.Width="16" hc:IconElement.Geometry="{StaticResource ConfigGeometry}"/> <ListBoxItem Content="Item 2" hc:ListBoxAttach.IsNew="True" hc:IconElement.Height="16" hc:IconElement.Width="16" hc:IconElement.Geometry="{StaticResource ConfigGeometry}"/> <ListBoxItem Content="Item 3" hc:ListBoxAttach.IsNew="True" hc:ListBoxAttach.GeoemtryBrush="{DynamicResource WarningBrush}" hc:ListBoxAttach.Geometry="{DynamicResource ClockGeometry}" hc:IconElement.Height="16" hc:IconElement.Width="16" hc:IconElement.Geometry="{StaticResource ConfigGeometry}"/></ListBox>
<ListBox Style={StaticResource ListBoxTransparentStyle}/>
this style is for Listbox Item with a new geometry icon
new
123
<ListBox><ListBoxItem Style="{StaticResource ListBoxItemNewStyle}"/></ListBox>