WPF Round Corner ListBox

Kailash Chandra Behera | Sunday, February 04, 2018

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 the border, but we can change the corner radio to make the list box border to round corner border directly.

Same as you cannot change the border of an item of list box item because both the list box border and item container border of the list box is by default encapsulated.

There are different ways of achieving around the corner border, but here in this blog, I achieved by simply using the style in the list box.

The reason for using the style is that the WPF list box container. You cannot get a button feature directly with the list box, but using the style you can target the hidden border of the list box. Also, the item contents of the list box contain 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 the 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 the hidden border. Go through the below code example for more details

Example


The below example creates a custom list box that has a 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;  
     }

Related Articles

  1. Data Validation in WPF
  2. WPF Round Corner Button with click effects
  3. Round Corner PasswordBox in WPF
  4. Round Corner TextBox in WPF
  5. WPF Custom Datagrid Control(Filterable)
  6. WPF Round Corner ListBox
  7. Custom RadioButtonListBox With Image
  8. RadiobuttonList in WPF
  9. Custom CheckedListBox in WPF

Thanks

By at