I am using the RadMenu as my standard window menu for an application that I am developing. An issue has arisen that menu items which have an Icon image. When the menu option is disabled, the Icon image appears to be being moved one pixel to the right, causing the border between the Icons and menu text to become misaligned. This results in an unsightly jagged line appearance in the overall menu.
Below is the XAML for the Edit menu of my application:
<!-- Edit Menu -->
<
telerik:RadMenuItem
MinWidth
=
"35"
HorizontalAlignment
=
"Center"
HorizontalContentAlignment
=
"Center"
Header
=
"{x:Static commonRes:Properties.Resources.MenuHeaderEdit}"
>
<
telerik:RadMenuItem
Style
=
"{StaticResource menuItemStyle}"
Header
=
"{x:Static commonRes:Properties.Resources.MenuHeaderEditUndo}"
Command
=
"ApplicationCommands.Undo"
>
<
telerik:RadMenuItem.Icon
>
<
Image
HorizontalAlignment
=
"Center"
VerticalAlignment
=
"Center"
Height
=
"16"
Width
=
"16"
>
<
Image.Source
>
<
BitmapImage
DecodePixelHeight
=
"16"
DecodePixelWidth
=
"16"
UriSource
=
"pack://application:,,,/RetailDirections.RMS.UI.Resources;component/Images/Edit_UndoHS.png"
/>
</
Image.Source
>
</
Image
>
</
telerik:RadMenuItem.Icon
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Style
=
"{StaticResource menuItemStyle}"
Header
=
"{x:Static commonRes:Properties.Resources.MenuHeaderEditRedo}"
Command
=
"ApplicationCommands.Redo"
>
<
telerik:RadMenuItem.Icon
>
<
Image
HorizontalAlignment
=
"Center"
VerticalAlignment
=
"Center"
Height
=
"16"
Width
=
"16"
>
<
Image.Source
>
<
BitmapImage
DecodePixelHeight
=
"16"
DecodePixelWidth
=
"16"
UriSource
=
"pack://application:,,,/RetailDirections.RMS.UI.Resources;component/Images/Edit_RedoHS.png"
/>
</
Image.Source
>
</
Image
>
</
telerik:RadMenuItem.Icon
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
IsSeparator
=
"True"
/>
<
telerik:RadMenuItem
Header
=
"{x:Static commonRes:Properties.Resources.MenuHeaderEditCut}"
Command
=
"ApplicationCommands.Cut"
>
<
telerik:RadMenuItem.Icon
>
<
Image
HorizontalAlignment
=
"Center"
VerticalAlignment
=
"Center"
Height
=
"16"
Width
=
"16"
>
<
Image.Source
>
<
BitmapImage
DecodePixelHeight
=
"16"
DecodePixelWidth
=
"16"
UriSource
=
"pack://application:,,,/RetailDirections.RMS.UI.Resources;component/Images/CutHS.png"
/>
</
Image.Source
>
</
Image
>
</
telerik:RadMenuItem.Icon
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Header
=
"{x:Static commonRes:Properties.Resources.MenuHeaderEditCopy}"
Command
=
"ApplicationCommands.Copy"
>
<
telerik:RadMenuItem.Icon
>
<
Image
HorizontalAlignment
=
"Center"
VerticalAlignment
=
"Center"
Height
=
"16"
Width
=
"16"
>
<
Image.Source
>
<
BitmapImage
DecodePixelHeight
=
"16"
DecodePixelWidth
=
"16"
UriSource
=
"pack://application:,,,/RetailDirections.RMS.UI.Resources;component/Images/CopyHS.png"
/>
</
Image.Source
>
</
Image
>
</
telerik:RadMenuItem.Icon
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Header
=
"{x:Static commonRes:Properties.Resources.MenuHeaderEditPaste}"
Command
=
"ApplicationCommands.Paste"
>
<
telerik:RadMenuItem.Icon
>
<
Image
HorizontalAlignment
=
"Center"
VerticalAlignment
=
"Center"
Height
=
"16"
Width
=
"16"
>
<
Image.Source
>
<
BitmapImage
DecodePixelHeight
=
"16"
DecodePixelWidth
=
"16"
UriSource
=
"pack://application:,,,/RetailDirections.RMS.UI.Resources;component/Images/PasteHS.png"
/>
</
Image.Source
>
</
Image
>
</
telerik:RadMenuItem.Icon
>
</
telerik:RadMenuItem
>
<
telerik:RadMenuItem
Header
=
"{x:Static commonRes:Properties.Resources.MenuHeaderEditSelectAll}"
Command
=
"ApplicationCommands.SelectAll"
/>
</
telerik:RadMenuItem
>
Any help on what could be causing this or possible workarounds to this issue would be greatly appreciated.
Regards,
Mark Harding.