Highlight missing in popupmenu

Ribbon for WPF Forum

Posted 12 years ago by Valéry Sablonnière - Staubli
Version: 12.2.0570
Platform: .NET 4.0
Environment: Windows 7 (32-bit)
Avatar

Hi,

with the new Actipro Ribbon (for WPF) 2012.2 build 0570, I have the following issue:

If you embed a menu inside an another one, the buttons are not highlighted when the mouse is over.

Here is the code reproducing the problem:

<ribbon:Group Label="Group Foo">
    <ribbon:StackPanel >
        <ribbon:PopupButton Label="Foo" >
            <ribbon:Menu>
                <ribbon:Separator Label="Items1" />
                <ribbon:Menu>
                    <ribbon:Button Context="MenuItem" Label="Foo1" />
                </ribbon:Menu>
            </ribbon:Menu>
        </ribbon:PopupButton>
    </ribbon:StackPanel>
</ribbon:Group>

 I tested this same code with Actipro Ribbon (for WPF) 2012.1 build 0560, and this code is working well.

I can send you the full application if you need to.

Best regards,

Comments (7)

Posted 12 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hi, yes we did updates in a version after that to prevent mouse highlight events when keyboard menu item selections are made.  Unfortunately that does cause the odd behavior if you embed a Menu in a Menu.  But you shouldn't really be doing that anyhow.  For instance in the case you have, you should have them separately in a StackPanel instead.


Actipro Software Support

Posted 12 years ago by Valéry Sablonnière - Staubli
Avatar

Actually my need is to embed a menu in a menu in order to do bindings (which is not possible with a stackpanel).

Here is what I want to do:

<ribbon:PopupButton Label="New PopupButton">
    <ribbon:Menu ItemsSource="{Binding Items}">
        <ribbon:Menu.ItemTemplate>
            <DataTemplate>
                <ribbon:Menu>
                    <ribbon:Separator Label="{Binding Text}" />
                    <ribbon:Menu ItemsSource="{Binding Items}">
                        <ribbon:Menu.ItemTemplate>
                            <DataTemplate>
                                <ribbon:Button Context="MenuItem" Label="{Binding Text}" />
                            </DataTemplate>
                        </ribbon:Menu.ItemTemplate>
                    </ribbon:Menu>
                </ribbon:Menu>
            </DataTemplate>
        </ribbon:Menu.ItemTemplate>
    </ribbon:Menu>
</ribbon:PopupButton>

 And:

public class Item
{
    public string Text { get; set; }
}

public class MyMenu
{
    public string Text { get; set; }

    public ObservableCollection<Item> Items { get; private set; }

    public MyMenu()
    {
        this.Items = new ObservableCollection<Item>();
    }
}

public class ViewModel
{
    public ObservableCollection<MyMenu> Items { get; private set; }

    public ViewModel()
    {
        this.Items=new ObservableCollection<MyMenu>();

        MyMenu menu1 = new MyMenu();
        menu1.Text = "Items1";
        menu1.Items.Add(new Item { Text = "Foo1" });
        menu1.Items.Add(new Item { Text = "Foo2" });

        MyMenu menu2 = new MyMenu();
        menu2.Text = "Items1";
        menu2.Items.Add(new Item { Text = "Foo1" });

        this.Items.Add(menu1);
        this.Items.Add(menu2);
    }
}

 Do you have a solution to do that ?

Posted 12 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

From that XAML it looks like you might even have three levels of ribbon:Menu within each other.  That's definitely not good.

Why can't you simplify it to something like:

<ribbon:PopupButton Label="New PopupButton">
	<StackPanel>
		<ribbon:Separator Label="{Binding Text}" />
		<ribbon:Menu ItemsSource="{Binding Items}">
			<ribbon:Menu.ItemTemplate>
				<DataTemplate>
					<ribbon:Button Context="MenuItem" Label="{Binding Text}" />
				</DataTemplate>
			</ribbon:Menu.ItemTemplate>
		</ribbon:Menu>
	<StackPanel>
</ribbon:PopupButton>


Actipro Software Support

Posted 12 years ago by Valéry Sablonnière - Staubli
Avatar

Because the result is not the same! I can provide you the sample if you want.

The result should be:

Items1

Foo1

Foo2

Items1

Foo1

 With your code I have:

------
Items1
Items1
Answer - Posted 12 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hi, sorry we were at Build conference last week so it was difficult to get too in-depth.  I loaded up your sample code in a test project and this is what you should do to get the desired output:

<ribbon:PopupButton x:Name="testPopupButton" Label="Test PopupButton">
	<ItemsControl ItemsSource="{Binding Items}">
		<ItemsControl.ItemTemplate>
			<DataTemplate>
				<StackPanel>
					<ribbon:Separator Label="{Binding Text}" Context="MenuItem" />
					<ribbon:Menu ItemsSource="{Binding Items}">
						<ribbon:Menu.ItemTemplate>
							<DataTemplate>
								<ribbon:Button Context="MenuItem" Label="{Binding Text}" />
							</DataTemplate>
						</ribbon:Menu.ItemTemplate>
					</ribbon:Menu>
				</StackPanel>
			</DataTemplate>
		</ItemsControl.ItemTemplate>
	</ItemsControl>
</ribbon:PopupButton>					


Actipro Software Support

Posted 12 years ago by Valéry Sablonnière - Staubli
Avatar

Thank you, it works perfectly.

Just one more question, can you explain me your solution, what is wrong with mine, what is the difference between Menu and ItemsControl ?

Posted 12 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

ribbon:Menu has special code inside of it that tries to prevent mouse events that occur when the keyboard is used to open a child menu and the mouse is already over where the child menu is opening, so that the selection is correct per the keyboard's intention.  It's complex but basically a ribbon:Menu directly in a ribbon:Menu is bad and will prevent mouse highlights.

ItemsControl is just a generic way to show a collection of items, so it is a better solution anyhow.  Since for things like a ListBox, you wouldn't really want to put a ListBox in a ListBox either, in the same way a ribbon:Menu in a ribbon:Menu isn't a good design regardless of the mouse issue.


Actipro Software Support

The latest build of this product (v24.1.3) was released 1 month ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.