Creating a ListBox style Control with "Show X More" - wpf

Question

I would like to create a type of control that will be able to see a narrowed and expanded list by some button, an expander or just a button, and also display some hidden items
I tried to create a style that would have a ListBox of a certain size (let's say it would be enough for 3 items)
And the Expander or some Button that would be below it would say how many more items there are
And give the option to expand and see everything or reduce and return to see 3 items
What I created here works pretty poorly and doesn't look good.
I would appreciate help on how to improve it or how to do it in a better and more correct way
<Style x:Key="CustomListBoxKey" TargetType="{x:Type ListBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<ItemsPresenter/>
<Expander x:Name="Expander" Grid.Row="1" Header="Show X More" ExpandDirection="Down"/>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding ElementName=Expander, Path=IsExpanded}" Value="False">
<Setter Property="MaxHeight" Value="80"/>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=Expander, Path=IsExpanded}" Value="True">
<Setter Property="MaxHeight" Value="Infinity"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
public List<string> Items { get; set; } = new() { "A", "B", "C", "D", "E", "F", "G", "H", "I" };
<Grid>
<ListBox ItemsSource="{Binding Items}" Style="{StaticResource CustomListBoxKey}" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=.}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>

Answer 1

This is an improvement to your code, and it will give you what you asked for
<local:InvertableBooleanToVisibilityConverter x:Key="InvertableBooleanToVisibilityConverterKey"/>
<local:MathValueConverter x:Key="MathValueConverterKey"/>
<Style x:Key="CustomListBoxKey" TargetType="{x:Type ListBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<ItemsPresenter x:Name="ItemsPresenter"/>
<Expander
x:Name="Expander"
Grid.Row="1"
ExpandDirection="Down">
<Expander.Header>
<StackPanel
Orientation="Horizontal"
Visibility="{Binding RelativeSource={RelativeSource AncestorType=Expander}, Path=IsExpanded, Converter={StaticResource InvertableBooleanToVisibilityConverterKey}}">
<TextBlock Text="Show "/>
<TextBlock
Text="{Binding RelativeSource={RelativeSource Self}, Path=DataContext.Items.Count,
Converter={StaticResource MathValueConverterKey},
ConverterParameter=-2}">
</TextBlock>
<TextBlock Text=" More"/>
</StackPanel>
</Expander.Header>
</Expander>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding ElementName=Expander, Path=IsExpanded}" Value="False">
<Setter Property="MaxHeight" Value="80"/>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=Expander, Path=IsExpanded}" Value="True">
<Setter Property="MaxHeight" Value="Infinity"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
public class MathValueConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
int.TryParse(parameter.ToString(), out var x);
return (int)value + x;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
public class InvertableBooleanToVisibilityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return value is bool and true ? Visibility.Collapsed : Visibility.Visible;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}

Answer 2

I would like to present a solution using a UserControl. Actually we have a request for two slightly different presentation. As a first step I build a UserControl called DualDisplay. The DualDisplay gets : "Short Display" and "LongDisplay" as parameters.
The DualDisplay UserControl is hosting the Expander:
<UserControl.Resources>
<local:InvertBooleanToVisibilityConverter x:Key="InvertBooleanToVisibilityConverter"/>
<Style TargetType="Expander" x:Key="ExpanderHeaders">
<Style.Triggers>
<Trigger Property="IsExpanded" Value="true">
<Setter Property="Header" Value="Show Less"/>
</Trigger>
<Trigger Property="IsExpanded" Value="false">
<Setter Property="Header" Value="Show More"/>
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<Grid>
<StackPanel Orientation="Vertical">
<Expander Name="expander" IsExpanded="False" Style="{StaticResource ExpanderHeaders}">
<ContentPresenter Content="{Binding ElementName=ours,Path=LongContent}"/>
</Expander>
<ContentPresenter Content="{Binding ElementName=ours,Path=ShortContent}"
Visibility="{Binding Path=IsExpanded,ElementName=expander,Converter={StaticResource ResourceKey=InvertBooleanToVisibilityConverter}}"/>
</StackPanel>
</Grid>
And the using of the DualDisplay will look as following :
<local:DualDisplay>
<local:DualDisplay.ShortContent>
<ListBox ItemsSource="{Binding Items}" VerticalAlignment="Top" MaxHeight="80">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=.}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</local:DualDisplay.ShortContent>
<local:DualDisplay.LongContent>
<ListBox ItemsSource="{Binding Items}" VerticalAlignment="Top" MaxHeight="1000">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=.}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</local:DualDisplay.LongContent>
</local:DualDisplay>
When we use this method we can reuse the DualDisplay for different cases and we are free to design the short/long display as we wish.
I attach also the code behind of the DualDisplay:
public object ShortContent
{
get { return (object)GetValue(ShortContentProperty); }
set { SetValue(ShortContentProperty, value); }
}
public static readonly DependencyProperty ShortContentProperty =
DependencyProperty.Register("ShortContent", typeof(object), typeof(DualDisplay),
new PropertyMetadata(null));
public object LongContent
{
get { return (object)GetValue(LongContentProperty); }
set { SetValue(LongContentProperty, value); }
}
public static readonly DependencyProperty LongContentProperty =
DependencyProperty.Register("LongContent", typeof(object), typeof(DualDisplay),
new PropertyMetadata(null));