locked
MenuItem layout question RRS feed

  • Question

  • I have a menu that has a static first level, and each of those static items has children that are derived via databinding to collections in my viewmodel. 

     <Menu Background="{StaticResource TopBarBrush}"
    						 DockPanel.Dock="Top">
          <!--One or two other fully menu items like file, edit, help etc-->
          <MenuItem Icon="{StaticResource BookMarkIcon_32}"
                     ToolTip="Bookmarks">
               <MenuItem Header="Songs"
                       ItemsSource="{Binding SongBookMarks.View}"
                       ItemTemplate="{StaticResource SongBookMarkTemplate}"
                       Background="{StaticResource SongBrush}"
                       Icon="{StaticResource SongIcon}"/>
                  <MenuItem Header="Movies"
                       ItemsSource="{Binding MovieBookMarks.View}"
                       ItemTemplate="{StaticResource MovieBookMarkTemplate}"
                       Background="{StaticResource MovieBrush}"
                       Icon="{StaticResource MovieIcon}"/>
           </MenuItem>
    <!--a few others-->
    </MenuItem>
    </Menu>
    
    
    I have my templates out with the templates being MenuItems with a header set to display the specifics of the song, movie etc.   For example:
     <DataTemplate DataType="{x:Type ViewModels:BookMarkViewModel}"
             x:Key="SongBookMarkTemplate">
    <MenuItem Command="{Binding Path=OpenBookMarkCommand}"
             Background="{StaticResource SongBrush}"
             Icon="{StaticResource SongsIcon}"
    				 IsCheckable="False">
          <MenuItem.Header>
            <DockPanel LastChildFill="False">
              
              <TextBlock Text="{Binding Path=SongName}"
    							    
                    DockPanel.Dock="Left"
    							  Margin="0,0,10,0"/>
    <TextBlock Text="{Binding Path=Artist}"
    							    
                    DockPanel.Dock="Left"
    							  Margin="0,0,10,0"/>
              <Button Style="{StaticResource DeleteBtnStyle}"
                ToolTip="Delete Bookmark"
                Command="{Binding Path=DeleteBookMarkCommand}"
                  DockPanel.Dock="Right"/>
            </DockPanel>
    
          </MenuItem.Header>
        </MenuItem>
    </DataTemplate>
    

     

    The menus work perfectly, and do everything I want them to.  The only issue that I run into is that the dynamically built menu items look different.  My first level static menu items Songs, Movies... use my background brush for the whole thing, and the icon is at the far left.  However on the menu items used in my item templates for the children, there is a large space to the right (I am guessing it's where input gesture goes), and a smaller space to the left (my guess is where controls would go for checkable).  So the menu shows: Songs > like I would expect.  When I open Songs and see the dynamically generated list of bookmarked songs, those render out with all this menu scaffolding that I don't want. 

    I have tried setting a brand new control template for the menu item in my songs book mark data template.  That doesn't change anything though.  I even tried making the songs data template just render out a button with a command.  I could again mimic the functionality I needed, but I couldn't get the rendered children to not have that extra space on the left and right.

    I am wondering if I am going to need to change the control template for the higher menu items one level higher.  I have been looking at control template examples online and through blend, but they are involved enough that I haven't wanted to go that route if I didn't have to. 


    All that is gold does not glitter, Not all those who wander are lost
    Sunday, April 24, 2011 3:41 AM

Answers

  • Hello Danny, I was testing the behavior you exposed and I find out a solution. If you define the ItemContainerStyle instead of the ItemTemplate, the behavior is normal. The issue seems to be caused for the DataTemplate with MenuItems. Then define the Root menu item as follow: 

    <MenuItem Header="Songs"
    
         ItemsSource="{Binding SongBookMarks.View}"
    
         Background="{StaticResource SongBrush}"
    
         Icon="{StaticResource SongIcon}">
    
    <MenuItem.ItemContainerStyle>
    
          <Style TargetType="{x:Type MenuItem}">
    
           <Setter Property="Template" Value="{StaticResource SongBookMarkTemplate}"/>
    
          </Style>
    
         </MenuItem.ItemContainerStyle>
    
        </MenuItem>
    
    
    
    

    The redefine the DataTemplate to a ControlTemplate:

    <ControlTemplate TargetType="{x:Type MenuItem}"
    
       x:Key="SongBookMarkTemplate">
    
    <MenuItem Command="{Binding Path=OpenBookMarkCommand}"
    
       Background="{StaticResource SongBrush}"
    
       Icon="{StaticResource SongsIcon}"
    
    				 IsCheckable="False">
    
      <MenuItem.Header>
    
      <DockPanel LastChildFill="False">
    
       
    
       <TextBlock Text="{Binding Path=SongName}"
    
    							 
    
        DockPanel.Dock="Left"
    
    							 Margin="0,0,10,0"/>
    
    <TextBlock Text="{Binding Path=Artist}"
    
    							 
    
        DockPanel.Dock="Left"
    
    							 Margin="0,0,10,0"/>
    
       <Button Style="{StaticResource DeleteBtnStyle}"
    
       ToolTip="Delete Bookmark"
    
       Command="{Binding Path=DeleteBookMarkCommand}"
    
        DockPanel.Dock="Right"/>
    
      </DockPanel>
    
    
    
      </MenuItem.Header>
    
     </MenuItem>
    
    </ControlTemplate>
    
    

     

    Hope this helps,

    Miguel.

     

     

     

     

     


    • Marked as answer by DannyStaten Tuesday, April 26, 2011 12:20 AM
    Monday, April 25, 2011 12:10 AM

All replies

  • Hello Danny, I was testing the behavior you exposed and I find out a solution. If you define the ItemContainerStyle instead of the ItemTemplate, the behavior is normal. The issue seems to be caused for the DataTemplate with MenuItems. Then define the Root menu item as follow: 

    <MenuItem Header="Songs"
    
         ItemsSource="{Binding SongBookMarks.View}"
    
         Background="{StaticResource SongBrush}"
    
         Icon="{StaticResource SongIcon}">
    
    <MenuItem.ItemContainerStyle>
    
          <Style TargetType="{x:Type MenuItem}">
    
           <Setter Property="Template" Value="{StaticResource SongBookMarkTemplate}"/>
    
          </Style>
    
         </MenuItem.ItemContainerStyle>
    
        </MenuItem>
    
    
    
    

    The redefine the DataTemplate to a ControlTemplate:

    <ControlTemplate TargetType="{x:Type MenuItem}"
    
       x:Key="SongBookMarkTemplate">
    
    <MenuItem Command="{Binding Path=OpenBookMarkCommand}"
    
       Background="{StaticResource SongBrush}"
    
       Icon="{StaticResource SongsIcon}"
    
    				 IsCheckable="False">
    
      <MenuItem.Header>
    
      <DockPanel LastChildFill="False">
    
       
    
       <TextBlock Text="{Binding Path=SongName}"
    
    							 
    
        DockPanel.Dock="Left"
    
    							 Margin="0,0,10,0"/>
    
    <TextBlock Text="{Binding Path=Artist}"
    
    							 
    
        DockPanel.Dock="Left"
    
    							 Margin="0,0,10,0"/>
    
       <Button Style="{StaticResource DeleteBtnStyle}"
    
       ToolTip="Delete Bookmark"
    
       Command="{Binding Path=DeleteBookMarkCommand}"
    
        DockPanel.Dock="Right"/>
    
      </DockPanel>
    
    
    
      </MenuItem.Header>
    
     </MenuItem>
    
    </ControlTemplate>
    
    

     

    Hope this helps,

    Miguel.

     

     

     

     

     


    • Marked as answer by DannyStaten Tuesday, April 26, 2011 12:20 AM
    Monday, April 25, 2011 12:10 AM
  • Thank you very very much!!!!!
    All that is gold does not glitter, Not all those who wander are lost
    Tuesday, April 26, 2011 12:21 AM