RadMenuItem disabled icon image causes misaligned separator

4 posts, 0 answers
  1. Ben
    Ben avatar
    9 posts
    Member since:
    Aug 2012

    Posted 17 Aug 2011 Link to this post

    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.

  2. Dani
    Admin
    Dani avatar
    848 posts

    Posted 17 Aug 2011 Link to this post

    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 >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Ben
    Ben avatar
    9 posts
    Member since:
    Aug 2012

    Posted 18 Aug 2011 Link to this post

    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.
  5. Dani
    Admin
    Dani avatar
    848 posts

    Posted 19 Aug 2011 Link to this post

    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 >>
Back to Top