Hi,
I am working on a application where I want to achieve following using XamMenu:
Can we achieve 2 and 3 using XamMenu? Any help?
Hi elinder,
For requirement #1, this requires creating a style for the XamMenuItem and providing an ItemsPanel. In that sample, the ItemsPanel is set to a StackPanel with a Horizontal orientation.
<Style TargetType="ig:XamMenuItem" x:Key="HeaderStyling"> <Setter Property="ItemsPanel"> <Setter.Value> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </Setter.Value> </Setter> </Style>
For requirement #3, this will require adjusting the HorizontalOffset of the XamMenuItem's Popup. I created a Behavior<T> to do this which you can see in the attached sample.
For requirement #2, the best you will be able to get is setting the StaysOpenOnClick property on each XamMenuItem. Make sure that the XamMenu's ExpandOnHover property is set to false. Keeping the Popup open even when the XamMenu/XamMenuItem do not have focus is currently not possible. Whether the popup is open or closed is handled internally by the control so this would be a product idea. You can submit this as a new product idea here: http://ideas.infragistics.com
There are many benefits to submitting a product idea:
- Direct communication with our product management team regarding your product idea.- Notifications whenever new information regarding your idea becomes available.- Ability to vote on your favorite product ideas to let us know which ones are the most important to you. You will have ten votes for this and can change which ideas you are voting for at any time.- Allow you to shape the future of our products by requesting new controls and products altogether.- You and other developers can discuss existing product ideas with members of our Product Management team.
Steps to create your idea:
1. Log into the Infragistics Product Idea site at http://ideas.infragistics.com (creating a new login if needed).2. Navigate to the product / platform channel of your choice (e.g. WPF, Windows Forms, ASP.NET, HTML5 / Ignite UI, iOS / NucliOS, etc.)3. Add your product idea and be sure to be specific and provide as much detail as possible.• Explain the context in which a feature would be used, why it is needed, why it can’t be accomplished today, and who would benefit from it. You can even add screenshots to build a stronger case. Remember that for your suggestion to be successful, you need other members of the community to vote for it. Be convincing!• Include a link to this thread in your idea so product management will be able to look back at this case.
The Product Idea site puts you in the driver’s seat and allows you to track the progress of your ideas at any time, see how many votes it got, read comments from other developers in the community, and see if someone from the product team has additional questions for you.
Let me know if you have any questions.
Ok, I tried using MenuItem behavior in Hierarichal template for XamMenu and its not working. Here is code of my Hierarichal Template:
<ig:XamMenu.HierarchicalItemTemplate> <!-- Hierarchical template binds to Main collection for each LineItem --> <ig:HierarchicalDataTemplate ItemsSource="{Binding SubItems}"> <!-- Data template displays Description property of top level data --> <DataTemplate> <TextBlock Text="{Binding PanelBarTitle}" VerticalAlignment="Top" /> </DataTemplate>
<!-- Item template displays child Description --> <ig:HierarchicalDataTemplate.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding PanelBarTitle}" /> </DataTemplate> </ig:HierarchicalDataTemplate.ItemTemplate> </ig:HierarchicalDataTemplate> </ig:XamMenu.HierarchicalItemTemplate>
How to adjust it in above scenario where I am using binding to generate menu items and no hard coded Menus?
In my application, it did't work even after handling the event. I am attaching updated sample with following issues requiring your guidelines:
Also, I am not able to set height of Menu. I tried setting it at XamMenu level but in-vain. Any help?
Thanks
Hello Elinder,
To change the height of the menu you can add a setter for the height in the style for your XamMenuItem you will also need to change the Height of the Popup in the Control Template for the Menu Item. In order to add the space between the items you can again modify the style of the Popup add set the backgrounds of the borders to transparent (or white). See modified sample.
As far as wanting the menu to align left instead of right, I am not quite sure what you are looking for. Are you referring to the text in the menu items?
Sincerely,
Valerie
Developer Support Supervisor - XAML
Infragistics
www.infragistics.com/support
Yes, I meant to say menu text alignment. I want menu item text to be aligned on left or centre and not on right.
Any help?
Hello,
The text currently appears to be aligned right due to the grid definitions in the MenuItemPresenter:
<ContentControl
x:Name="MenuItemPresenter"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontStretch="{TemplateBinding FontStretch}"
Foreground="#FF333333"
HorizontalContentAlignment="Left"
Visibility="Visible">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="IconPlace" Width="22"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition x:Name="TumbPlace" Width="5" />
</Grid.ColumnDefinitions>
You can change the width of the “IconPlace” from a set width of 22 to Auto so this does not take any space when an icon is not used. If you change this, you may also want to add a margin to the grid or the ContentPresenter for the header to provide some spacing.
Please let me know if you have any questions.
Changing width in <ColumnDefinition x:Name="TumbPlace" Width="5" />, from 5 to Auto does not fix the text allignment. Text is still right aligning. Adding right margin to ContentPresenter fixes it but since I have Icons at top menu, so it disturbs text alignment at that level - although it works fine in child menu items.
I am attaching updated sample for your reference.
Please attach the sample which displays the images as you have them applied so that I can better understand your issue.
Rather than setting the Width on "TumbPlace", set the width of "IconPlace" to Auto. The space you see in front of the text is coming from the "IconPlace" ColumnDefinition.
Let me know if you have any further questions on this matter.