Centering ListBoxItem content horizontally and vertically in WPF-CodePudding

I'm trying to center the content of my ListBoxItem vertically and horizontally but I can't get it to work.

My style template :

<Style x:Key="myListBoxItem" TargetType="ListBoxItem">
    <Style.Resources>
        <Style TargetType="Border">
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect ShadowDepth="2" Direction="90" BlurRadius="4" Color="Black" Opacity="0.25"/>
                </Setter.Value>
            </Setter>
        </Style>
    </Style.Resources>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                <Border Background="{TemplateBinding Background}">
                    <ContentPresenter/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Background" Value="#fe3f3f"/>
                        <Setter Property="Foreground" Value="White"/>
                        <Setter Property="FontWeight" Value="DemiBold"/>
                        <Setter Property="HorizontalContentAlignment" Value="Center"/>
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsMouseOver" Value="True"/>
                            <Condition Property="IsSelected" Value="False"/>
                        </MultiTrigger.Conditions>
                        <MultiTrigger.Setters>
                            <Setter Property="Background" Value="#e9e9e9"/>
                        <Setter Property="HorizontalContentAlignment" Value="Center"/>
                            <Setter Property="Cursor" Value="Hand"/>
                        </MultiTrigger.Setters>
                    </MultiTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Width" Value="160"/>
    <Setter Property="Height" Value="75"/>
    <Setter Property="Background" Value="White"/>
    <Setter Property="FontSize" Value="19"/>
</Style>

Here is how I apply this style : I have a simple ListBox in my XAML, and I append ListBoxItems to it in code-behind. I set the ResourceReference of each ListBoxItem to my style this way :

foreach (var equipment in listEquipments)
{
      var lbi = new ListBoxItem();
      lbi.Content = equipment.Name;
      lbi.SetResourceReference(StyleProperty, "myListBoxItem");
      ListBox_Equipments.Items.Add(lbi);
}

I've tried to set the HorizontalContentAlignment and HorizontalContentAlignment of the ListBoxItem (through the style template) to Center, as well as the HorizontalAlignment and VerticalAlignment, but nothing succeeded. I thought it might have to do with my style template.

I also tried some ItemTemplates such as :

<ListBox HorizontalContentAlignment="Center">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <TextBlock Text="{Binding Text}" FontSize="72"/>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

No luck so far.

CodePudding user response：

An ItemTemplate is not applied to a ListBoxItem.

Set or bind the ItemsSource of the ListBox to your listEquipments:

ListBox_Equipments.ItemsSource = listEquipments;

...and set the ItemContainerStyle of the ListBox to your custom Style:

<ListBox x:Name="ListBox_Equipments"
         ItemContainerStyle="{StaticResource myListBoxItem}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" HorizontalAlignment="Center" VerticalAlignment="Center" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>