how to remove sub menus Margin

[WillisXue]

I tried it but it not work

   <Style Selector="MenuItem /template/ ItemsPresenter">
       <Setter Property="Margin" Value="0"></Setter>
   </Style>

[timunie]

which theme is that? Simple? If so, check original Styles. I guess it may be this line:

Avalonia/src/Avalonia.Themes.Simple/Controls/FlyoutPresenter.xaml

Line 11 in 0567a6d

<Setter Property="Padding" Value="4" />

[maxkatz6]

Avalonia/src/Avalonia.Themes.Simple/Controls/MenuItem.xaml

Line 12 in eb7b6fe

<Setter Property="Padding" Value="6 0" />

[tms320]

I have the same problem. How to remove extra spaces on the left/right?

[tms320]

Data template didn't help too:

PS: I am using SimpleTheme

[timunie]

Avalonia/src/Avalonia.Themes.Simple/Controls/MenuItem.xaml

Lines 74 to 77 in eb7b6fe

	<ItemsPresenter Name="PART_ItemsPresenter"
	Margin="2"
	Grid.IsSharedSizeScope="True"
	ItemsPanel="{TemplateBinding ItemsPanel}" />

ItemsPresenter seems to have a Margin hardcoded, which means you need to copy the entire ControlTemplate unfortunately.

[tms320]

I created simple ControlTemplate based on default MenuItem template from 'Avalonia/src/Avalonia.Themes.Simple/Controls/MenuItem.xaml':

<Window.Resources>
  <ControlTemplate x:Key="CustomMenuItemTemplate" TargetType="MenuItem">
	  <Border Name="root"
			  Background="{TemplateBinding Background}"
			  BorderBrush="{TemplateBinding BorderBrush}"
			  BorderThickness="{TemplateBinding BorderThickness}"
			  CornerRadius="{TemplateBinding CornerRadius}">
		  <Grid>
			  <Grid.ColumnDefinitions>
				  <ColumnDefinition Width="*" />
			  </Grid.ColumnDefinitions>
			  <ContentPresenter Name="PART_HeaderPresenter"
					Grid.Column="0"
					Margin="{TemplateBinding Padding}"
					VerticalAlignment="Center"
					Content="{TemplateBinding Header}"
					ContentTemplate="{TemplateBinding HeaderTemplate}">
				  <ContentPresenter.DataTemplates>
					  <DataTemplate DataType="sys:String">
						  <AccessText Text="{Binding}" />
					  </DataTemplate>
				  </ContentPresenter.DataTemplates>
			  </ContentPresenter>
		  </Grid>
	  </Border>
  </ControlTemplate>
</Window.Resources>

I can set the template for explicitly defined menu sub-items:

<Menu>
	<MenuItem Header="Interfaces">
		<MenuItem Header="Interface 1" Template="{StaticResource CustomMenuItemTemplate}"/>
		<MenuItem Header="Interface 2" Template="{StaticResource CustomMenuItemTemplate}"/>
	</MenuItem>
</Menu>

But I don't understand how to set template if menu items are set via ItemsSource:

<Menu>
	<MenuItem Header="Interfaces" ItemsSource="{Binding Interfaces}>
	</MenuItem>
</Menu>

I tried to set Template using style:

<MenuItem Name="" Header="Interfaces" ItemsSource="{Binding Interfaces}">
	<MenuItem.Styles>
		<Style Selector="MenuItem">
			<Setter Property="Template" Value="{StaticResource CustomMenuItemTemplate}"/>
		</Style>
	</MenuItem.Styles>
</MenuItem>

But it didn't help.
How can I do that?

[timunie]

Maybe you need to set ContrainerTheme instead, which is a ControlTheme instead of a Style 🤔

[tms320]

The problem solved:

<Menu>
	<MenuItem Header="Interfaces" ItemsSource="{Binding Interfaces}">
		<MenuItem.ItemContainerTheme>
			<ControlTheme TargetType="MenuItem">
				<Setter Property="Template" Value="{StaticResource CustomMenuItemTemplate}"/>
			</ControlTheme>
		</MenuItem.ItemContainerTheme>
	</MenuItem>
</Menu>

Thanks for help )