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.2) was released 24 days ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.