I have a few default RibbonButtons:
<RibbonButton x:Name="MouseModeButton" Label="Maus" Click="MouseModeButton_Click"
LargeImageSource="/Images/MainWindow/Mouse.png" />
<RibbonButton x:Name="MarkModeButton" Label="Markieren" Click="MarkModeButton_Click"
LargeImageSource="/Images/MainWindow/Mark.png" />
These buttons are "modes" where only one (the last clicked) is enabled.
I want this enabled RibbonButton to be highlighted from the other ones - the best thing I could come up with is to set the style as it would be clicked right now.
I tried to google it, but the world of WPF seemd to be abadoned from good googleable solutions in xaml. So how would I set this programmaticly from code behind, when a button is clicked, the style should be like the moment when it is clicked?
You could use the built-in RibbonRadioButton instead, it does exactly what you want.
<RibbonRadioButton x:Name="MouseModeButton" Label="Maus" Click="MouseModeButton_Click"
LargeImageSource="/Images/MainWindow/Mouse.png" />
<RibbonRadioButton x:Name="MarkModeButton" Label="Markieren" Click="MarkModeButton_Click"
LargeImageSource="/Images/MainWindow/Mark.png" />
You can define mutually exclusive button groups using the GroupName property, e.g.:
<Ribbon>
<RibbonTab Header="tab">
<RibbonGroup Header="Sample">
<RibbonRadioButton Label="Group 1 - Button 1" GroupName="Group 1"/>
<RibbonRadioButton Label="Group 1 - Button 2" GroupName="Group 1"/>
<RibbonRadioButton Label="Group 1 - Button 3" GroupName="Group 1"/>
<RibbonRadioButton Label="Group 2 - Button 1" GroupName="Group 2"/>
<RibbonRadioButton Label="Group 2 - Button 2" GroupName="Group 2"/>
<RibbonRadioButton Label="Group 2 - Button 3" GroupName="Group 2"/>
</RibbonGroup>
</RibbonTab>
</Ribbon>
Related
I want to create a menu at the bottom of a metro window. How should I do it?
Attached image of what I am looking for. Gray area at bottom, over which will have buttons and click of button, popup will be shown with options.
Please suggest.
Set the vertical alignment of menu to bottom
e.g. :
<Menu Height="23" HorizontalAlignment="Stretch" Margin="86,0,0,0" Name="Menu1" VerticalAlignment="Bottom" Width="334">
<MenuItem Header=" My"/>
<MenuItem Header=" My option 2"/>
<MenuItem Header=" My option 3"/>
</Menu>
Ideally it should look like something GlassWire app has (top left corner):
It behaves just like an application icon system menu but is more obvious and customizable.
Specific problems I have are:
1) How do I add a title-bar friendly hamburger menu button easily (XAML only ideally) e.g. via mahApps:MetroWindow.LeftWindowCommands?
2) How do I customize it to look just like GlassWire's menu button (top-aligned zero-top-margin thin rectangle)? I tried playing with alignment and height but it did not work - there was always a gap at the top.
Here is what I have so far (hamburger button next to app icon):
<mahApps:MetroWindow.LeftWindowCommands>
<mahApps:WindowCommands ShowSeparators="False">
<Button>
<Button.ContextMenu>
<ContextMenu>
<MenuItem Header="Menu Item 1"/>
<MenuItem Header="Menu Item 2"/>
<MenuItem Header="Menu Item 3"/>
</ContextMenu>
</Button.ContextMenu>
<Rectangle Width="14" Height="14" Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{StaticResource appbar_lines_horizontal_4}" />
</Rectangle.OpacityMask>
</Rectangle>
</Button>
</mahApps:WindowCommands>
</mahApps:MetroWindow.LeftWindowCommands>
Unfortunately the context menu is not ideal because it's behaviour that would require some C# code to get it right.
I`m trying to have a dropdown menu under a split button. Some of these menuItems should have sub-menu items. If you want an example, click on the bookmark button in Firefox (top right).
I can't use Menu, because that is always oriented horizontally. So I went with a stackpanel:
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
Title="MainWindow" Height="350" Width="525">
<Grid>
<xctk:SplitButton Content="SplitButton" BorderThickness="1" BorderBrush="Black" Margin="0,0,408,290">
<xctk:SplitButton.DropDownContent>
<StackPanel Width="161" HorizontalAlignment="Left">
<MenuItem Header="MenuItem1" HorizontalAlignment="Left" Width="517">
<MenuItem.Items>
<MenuItem Header="submenuItem1"/>
<MenuItem Header="submenuItem2"/>
</MenuItem.Items>
</MenuItem>
<MenuItem Header="MenuItem2"/>
<MenuItem Header="MenuItem3"/>
</StackPanel>
</xctk:SplitButton.DropDownContent>
</xctk:SplitButton>
</Grid>
Problem here is that the sub menu items don't show up. They don't even have the little arrows next to them. You can do this without the SplitButton, just leaving the stackpanel and everything in it, you'll have the same problem. I've tried putting the parent Menu item in its own tag, but I want the sub-menu items to appear to the right of their parent (just like the firefox example: Assuming your firefox window is not maximized, and you've allowed enough screen-space for the item to appear).
the way you're using the MenuItem control is wrong, it is meant to be hosted inside the Menu control or another MenuItem.
As for the solution to your problem, there are two. the first one is to write a custom control that reuses the ContextMenu to host the menu items, you will write something like this:
<m:SplitButton Content="Split Button" Placement="Bottom">
<MenuItem Header="MenuItem 1"/>
<MenuItem Header="MenuItem 2">
<MenuItem Header="MenuItem 1"/>
<MenuItem Header="MenuItem 2"/>
</MenuItem>
</m:SplitButton
http://www.codeproject.com/Articles/20612/A-WPF-SplitButton
the second approach is to host the Menu control inside the DropDownContent and re-style everything, there will be a lot of xaml markup.
the Menu control will be easy to re-style, the only thing you need to do is make sure that menu items are displayed vertically instead of horizontally, using the following markup:
<Style TargetType="Menu">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" IsItemsHost="True" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
the hardest part is styling the MenuItems, they are styled based on their Role property. It can have four possible values:
TopLevelHeader : direct child of Menu with sub-menu items.
TopLevelItem : direct child of Menu without sub-menu items.
SubmenuHeader : direct child of MenuItem with sub-menu items.
SubmenuItem : direct child of MenuItem without sub-menu items.
Regards
In a nutshell, I need to provide a ribbon QuickAccessToolbar without the ribbon being visible. This is quite easily achieved, but a great problem for me is that the labels on the toolbar items are not visible. Here is my Ribbon:
<Ribbon x:Name="ShellRibbon" Grid.Row="0" IsMinimized="True">
<Ribbon.QuickAccessToolBar>
<RibbonQuickAccessToolBar>
<RibbonSplitButton x:Name ="Save" Label="Save" />
<RibbonSplitButton Label="Employee Access" LabelPosition="Header" >
<RibbonMenuItem Header="Undo action #1" />
<RibbonMenuItem Header="Undo action #2" />
<RibbonMenuItem Header="Undo action #3" />
</RibbonSplitButton>
</RibbonQuickAccessToolBar>
</Ribbon.QuickAccessToolBar>
<RibbonTab>
<RibbonButton Label="One"></RibbonButton>
</RibbonTab>
<RibbonTab></RibbonTab>
</Ribbon>
The RibbonMenuItem headers are visible when I drop down the RibbonSplitButton, but its header isn't visible, and neither that of the Save button. What am I doing wrong?
You have to place your ribbon controls inside a DockPanel :
<Ribbon.QuickAccessToolBar>
<RibbonQuickAccessToolBar>
<DockPanel>
<RibbonSplitButton x:Name ="Save" Label="Save" />
<RibbonSplitButton Label="Employee Access" LabelPosition="Header" >
<RibbonMenuItem Header="Undo action #1" />
<RibbonMenuItem Header="Undo action #2" />
<RibbonMenuItem Header="Undo action #3" />
</RibbonSplitButton>
</DockPanel>
</RibbonQuickAccessToolBar>
</Ribbon.QuickAccessToolBar>
Hi i'm wondering if someone can help me.
I'm using a WPF Ribbon control and specifically a RibbonGroup control within that. The xaml for the RibbonGroup that i am using is below.
<r:RibbonGroup x:Name="ribbonGroup" Header="Ribbon Group" >
<r:RibbonRadioButton Label="Item 1" IsChecked="True" />
<r:RibbonRadioButton Label="Item 2" />
<r:RibbonRadioButton Label="Item 3" />
</r:RibbonGroup>
Now the issue i am having is how can i identify when a selectio is changed in this group. So if i selected Item 2 or Item 3 how can i be notifified which actual item is selected. Is there some sort of changed event on the RibbonGroup control that i can bind to ? I have looked on the web but not really had any luck i would mega appreciate it if anyone can point me in the correct direction.
Thanks
Iffy.
You want to bind to the Checked event of the radio buttons. The Checked event is a routed event, so you can bind it in the RibbonGroup element itself:
<r:RibbonGroup x:Name="ribbonGroup" Header="Ribbon Group"
RadioButton.Checked="YourEventHandler">
<r:RibbonRadioButton Label="Item 1" IsChecked="True" />
<r:RibbonRadioButton Label="Item 2" />
<r:RibbonRadioButton Label="Item 3" />
</r:RibbonGroup>
In the event handler the RoutedEventArgs.Source property is a reference to the radio button that was checked.