If I use an image that is 16x16 it is center both horizontally and vertically. If I use an image that is 12x12it is placed in the top left corner. I assume the control is expecting and image that is 16x16.
How can I center my 12x12 image? I have tried setting the <Image> to HorizontalAlignment = Center and VerticalAlignment = Center but that had no effect.
Example: Notice this image is 12x12 and not centered, looks sort of goofy...
<ig:XamMenuItem Click="XamMenuItem_Click" IsEnabled="{Binding Enabled}" Margin="2" Foreground="{StaticResource MenuForegroundColor}" Cursor="Hand"> <ig:XamMenuItem.Icon> <Image Source="{Binding BitmapImage}" Height="{Binding Path=BitmapImage.PixelHeight}" Width="{Binding Path=BitmapImage.PixelWidth}" /> </ig:XamMenuItem.Icon> </ig:XamMenuItem>
Hi,
I tried to reproduce your issue, but the icon is properly centered for me:
Item1's icon is 16x16 pixels and Item2's icon is 12x12 pixels and they are both properly centered.
Did you apply some custom style to the MenuItems, changing the default template? If that's not the case, could you provide some more details: which version / build number are you using?
Perhaps as a workaround you could try setting Margin="2" on the Image object.
HTH,
Here's my xaml...
<DataTemplate x:Name="XamMenuItemTemplate" > <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Path=ItemName, Mode=TwoWay}"/> </StackPanel> </DataTemplate> <DataTemplate x:Name="XamMenuItemContainer"> <ig:XamMenuItem Click="XamMenuItem_Click" IsEnabled="{Binding Enabled}" Margin="2" Foreground="{StaticResource MenuForegroundColor}" Cursor="Hand"> <ig:XamMenuItem.Icon> <Image Source="{Binding BitmapImage}" Height="{Binding Path=BitmapImage.PixelHeight}" Width="{Binding Path=BitmapImage.PixelWidth}" /> </ig:XamMenuItem.Icon> </ig:XamMenuItem> </DataTemplate> <!-- First Level --> <ig:HierarchicalDataTemplate x:Name="XamMenuHierarchialTemplate" Template="{StaticResource XamMenuItemTemplate}" ItemsSource="{Binding Path=Items, Mode=TwoWay}" DefaultItemsContainer="{StaticResource XamMenuItemContainer}"> <!-- Second Level --> <ig:HierarchicalDataTemplate.HierarchicalItemTemplate> <ig:HierarchicalDataTemplate Template="{StaticResource XamMenuItemTemplate}" ItemsSource="{Binding Path=Items, Mode=TwoWay}" DefaultItemsContainer="{StaticResource XamMenuItemContainer}"> </ig:HierarchicalDataTemplate> </ig:HierarchicalDataTemplate.HierarchicalItemTemplate> </ig:HierarchicalDataTemplate> </UserControl.Resources> <Grid x:Name="LayoutRoot"> <Border BorderThickness="1" BorderBrush="#FF6893CF"> <Border BorderThickness="0,1,0,0" BorderBrush="White"> <ig:XamMenu ItemsSource="{Binding Path=Items}" DefaultItemsContainer="{StaticResource XamMenuItemContainer}" HierarchicalItemTemplate="{StaticResource XamMenuHierarchialTemplate}" ExpandOnHover="True" BorderBrush="Blue" BorderThickness="10" Background="{StaticResource MenuBackgroundColor}"> </ig:XamMenu> </Border> </Border> </Grid>