Setting Background Property doesnt cover all space for MenuItem in ContextMenu

[SwiftExtender]

Describe the bug

Setting Background Property doesnt cover all space for MenuItem in ContextMenu

I`am trying to set colors for MenuItems but i got this (color dont fill all space)

To Reproduce

Code
View:

		<ListBox x:Name="JSONKeysList" IsEnabled="{Binding !!KeyEntries}" Grid.Column="0" Grid.Row="1" Margin="10,10,10,30" ItemsSource="{Binding KeyEntries}" ItemTemplate=""
BorderBrush="Gray">
			<ListBox.ContextMenu>
				<ContextMenu ItemsSource="{Binding MacrosContextMenu}" >
					<ContextMenu.ItemTemplate>
						<DataTemplate x:DataType="vm:MacrosItem">
							<MenuItem Command="" CommandParameter="" Header="{Binding Header}" Background="{Binding BackgroundColor}" Foreground="{Binding HeaderTextColor}"/>
						</DataTemplate>
					</ContextMenu.ItemTemplate>
				</ContextMenu>
			</ListBox.ContextMenu>
			<ListBox.ItemTemplate>
				<DataTemplate>
					<TextBlock Text="{Binding}"/>
				</DataTemplate>
			</ListBox.ItemTemplate>
		</ListBox>

ViewModel:
private ObservableCollection _MacrosContextMenu = new ObservableCollection() { new MacrosItem() { Header="test", HeaderTextColor=Brushes.Green,BackgroundColor=Brushes.Honeydew } };
public ObservableCollection MacrosContextMenu {
get => _MacrosContextMenu;
set => this.RaiseAndSetIfChanged(ref _MacrosContextMenu, value);
}

Full project code: https://github.com/SwiftExtender/JsonTable

Expected behavior

Background Color will fill all space

Avalonia version

11.2.3

OS

Windows

Additional context

No response

[nickodei]

It seems that when using ContextMenu.ItemTemplate, the DataTemplate applied to each entry is already a MenuItem which puts everything in the defined DataTemplate (here the MenuItem) in his ContentPresenter. Because of the nature of MenueItem, the contents are not stretched and you get the behavior that the MenueItem is not completely colored (only the inner MenueItem):

[SwiftExtender]

@nickodei I think it is a bug, i cant somehow bypass this behavior

[timunie]

I think you shouldn't place a MenuItem in DataTemplate. Instead use ItemContainerTheme to edit Background or other properties.

[SwiftExtender]

@timunie I cant understand how to use ItemContainerTheme for MenuItem. When i try to use ControlTheme with data from view model, ItemContainerTheme for MenuItem is null

Code below :

<ContextMenu ItemsSource="{Binding MacrosContextMenu}">
				<ContextMenu.ItemTemplate>
					<DataTemplate x:DataType="vm:MacrosItem">
					<MenuItem 
							  CommandParameter="{Binding ElementName=editor, Path=SelectedText}"
							  Header="{Binding Header}">
						<MenuItem.ItemContainerTheme>
							<ControlTheme TargetType="MenuItem" x:DataType="vm:MacrosItem">
								<Setter Property="Background" Value="{Binding BackgroundColor}"/>
								<Setter Property="Foreground" Value="{Binding HeaderTextColor}"/>
							</ControlTheme>

						</MenuItem.ItemContainerTheme>
					</MenuItem>
					</DataTemplate>
				</ContextMenu.ItemTemplate>
</ContextMenu>

[maxkatz6]

Something closer to this:

1. You should specify BasedOn, otherwise theme won't inherit default styles (unless you want to completely restyle them).
2. By setting ItemContainerTheme on ContextMenu directly, it will be applied on all children. Alternatively, if you have a single MenuItem with subgroup - you can assign it there.
3. You likely want to move CommandParameter to the theme too. But I don't know where "editor" comes from. It might be better done in another way depending on the context.
4. ContextMenu.ItemTemplate for this simpler scenario can be replaced with ContextMenu DisplayMemberBinding="{Binding Header}" , unless you want to specify more text block properties.

<ContextMenu ItemsSource="{Binding MacrosContextMenu}">
    <ContextMenu.ItemContainerTheme>
    	<ControlTheme TargetType="MenuItem" BasedOn="{StaticResource {x:Type MenuItem}}"
                      x:DataType="vm:MacrosItem">
    		<Setter Property="Background" Value="{Binding BackgroundColor}"/>
    		<Setter Property="Foreground" Value="{Binding HeaderTextColor}"/>
    		<Setter Property="CommandParameter" Value="{Binding ElementName=editor, Path=SelectedText}"/>
    	</ControlTheme>
    </ContextMenu.ItemContainerTheme>
	<ContextMenu.ItemTemplate>
		<DataTemplate x:DataType="vm:MacrosItem">
                        <TextBlock Content="{Binding Header}" />
		</DataTemplate>
	</ContextMenu.ItemTemplate>
</ContextMenu>

[SwiftExtender]

@maxkatz6 I`ve tried your advice, now it is working (still have some non-coloured space, but it is acceptable). Big thanks!

<ContextMenu ItemsSource="{Binding MacrosContextMenu}">
				<ContextMenu.ItemContainerTheme>
					<ControlTheme TargetType="MenuItem" BasedOn="{StaticResource {x:Type MenuItem}}"
								  x:DataType="vm:MacrosMenuItem">
						<Setter Property="Background" Value="{Binding BackgroundColor}"/>
						<Setter Property="Foreground" Value="{Binding HeaderTextColor}"/>
						<Setter Property="CommandParameter" Value="{Binding ElementName=editor, Path=SelectedText}"/>
					</ControlTheme>
				</ContextMenu.ItemContainerTheme>
				<ContextMenu.ItemTemplate>
					<DataTemplate x:DataType="vm:MacrosMenuItem">
						<TextBlock Text="{Binding Header}"/>
					</DataTemplate>
				</ContextMenu.ItemTemplate>
</ContextMenu>