Introduction
Describes to create a custom list box control in WPF which has round corner border for list box and item using XAML Code.
Getting Started
WPF provides list box control with border option where we can change border color and thickness of border, but we can change the corner radio for make the list box border to round corner border directly.
Same as you cannot change the border of item of list box item, because both the list box border and item container border of list box is by default encapsulated.
There are different ways of achieving round corner border, but here in this blog I achieved by simply using style in list box.
The reason for using style is that WPF list box contains. You cannot get button feature directly with list box, but using style you can target the hidden border of list box. Also, item container of list box contains a hidden border can be targeted as well.
For targeting style to list box hidden border, here the list box resource is used and applied the style for hidden border. For Item container hidden border item container’s style has been used here and inside the resource the custom style is targeted to hidden border. Go through the below code example for more details
Example
The below example creates a custom list box which has round corner border and round corner item container with displays list box items in round shape.
XAML Code:
<ListBox Name="listBoxZone" ItemsSource="{Binding TheList, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="62,31,69,24" Padding="11,20">
<ListBox.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="15"/>
</Style>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding TheText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"></TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="5"/>
</Style>
</Style.Resources>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
C# Code: For Data
private void FillList()
{
TheList.Add(new BoolStringClass() { TheText = "Student1", IsSelected = false });
TheList.Add(new BoolStringClass() { TheText = "Student2", IsSelected = false });
TheList.Add(new BoolStringClass() { TheText = "Student3", IsSelected = false });
TheList.Add(new BoolStringClass() { TheText = "Student4", IsSelected = false });
TheList.Add(new BoolStringClass() { TheText = "Student5", IsSelected = false });
//this.listBoxZone.ItemsSource = this.TheList;
this.DataContext = this;
}
Thanks
Kailash Chandra Behera
Comments
Post a Comment