This is a migrated thread and some comments may be shown as answers.

RadMenuItem disabled icon image causes misaligned separator

3 Answers 128 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Ben
Top achievements
Rank 1
Ben asked on 17 Aug 2011, 08:03 AM

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.

3 Answers, 1 is accepted

Sort by
0
Dani
Telerik team
answered on 17 Aug 2011, 10:42 AM
Hi Mark,

We could not reproduce such issue. If you look at the triggers of the RadMenuItemStyle, you will notice that the Disabled state only lowers down the opacity of the menu item content to 0.5. 

Please, send a reproducible sample. 

What I can suggest is that you can simplify your xaml. Set the ImageSource in the following manner:
<telerik:RadMenuItem.Icon>
                       <Image HorizontalAlignment="Center" VerticalAlignment="Center" Height="12" Width="15" Source="icon1_2.png"/>
                   </telerik:RadMenuItem.Icon>

I hope this helps.

All the best,
Dani
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>
0
Ben
Top achievements
Rank 1
answered on 18 Aug 2011, 06:28 AM
Hi Dani,

Thanks for the quick reply. I created a sample project that replicates the issue on my machine (but I gave this project to a colleague to test and he could not replicate it on his machine (which should be an identical spec) :-(. Given that, I would not be surprised if the issue could not be reproduced on your machine. So I will keep investigating on my end to narrow it down.

I did try your suggestion, but it had the same results on my machine.

Regards,
    Mark Harding.
0
Dani
Telerik team
answered on 19 Aug 2011, 11:25 AM
Hello Mark,

 We are ready to help in case you need assistance.

Regards,
Dani
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>
Tags
Menu
Asked by
Ben
Top achievements
Rank 1
Answers by
Dani
Telerik team
Ben
Top achievements
Rank 1
Share this question
or