-->

WPF Style ListBox – Group

13 2020

MainWindow.xaml.cs

class ListB
{
  public enum Category_type { one , two };
  public string Name { get; set; }  
  public string Desc { get; set; }
  public string Image { get; set; }
  public ListB (string name , string text , string image , Category_type val)
  {
     this.Name = name;
     this.Desc = text;
     this.Image = image;
     this.Category_type = val;
  }
}
// Add the following code in your window   

listBox.ItemsSource = LoadListBoxData();
private List<ListB> LoadListBoxData()
{
List< ListB> itemsList = new List<ListB>();
itemsList.Add(new SensorListBox("Test1", "Desc", "/Images/folder.png", ListB.Category_Type.one));
itemsList.Add(new SensorListBox("Test2", "Desc 2", "/Images/folder.png", ListB.Category_Type.two));
return itemsList;
}
 

MainWindow.xaml


<Border Grid.Row="0" Grid.Column="0" Padding="5" CornerRadius="6" BorderBrush="Gray" BorderThickness="1">
<ListBox Background="white" x:Name="listBox" SelectedIndex="-1" MinHeight="200"
SelectedItem="{Binding SelectedCategory}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<ListBox.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Expander IsExpanded="True">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" Foreground="Gray" FontSize="16" VerticalAlignment="Bottom" />
<TextBlock Text="{Binding ItemCount}" FontSize="12" Foreground="DarkGray" Margin="10,0,0,0" VerticalAlignment="Bottom" />
</StackPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListBox.GroupStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0">
<Grid Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Margin="0,0,10,0">
<Image Source="{Binding Path=Image}" Stretch="Fill" Height="40" Width="40"></Image>
</Border>
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Path=Name}" FontWeight="Bold"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Path=Desc }" ></TextBlock>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Padding" Value="0" />
<Setter Property="Margin" Value="0" />

<Setter Property="OverridesDefaultStyle" Value="True"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid x:Name="grid">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Border x:Name="hover"
Background="#99E7E7E7"
BorderBrush="#99979797"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Visibility="Collapsed">
</Border>
<Border x:Name="highlight"
Background="#99B0FFA5"
BorderBrush="#995CB74E"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Visibility="Collapsed">
</Border>
<ContentPresenter></ContentPresenter>
<Border Height="1"
BorderBrush="#99D7D7D7"
BorderThickness="0,1,0,0"
Grid.Row="1">
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="hover"
Property="Visibility"
Value="Visible">
</Setter>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="highlight"
Property="Visibility"
Value="Visible">
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>

Leave a Reply