RibbonButton not aligning properly in Ribbon Control in WPF - wpf

I am creating Ribbon Control for my application and for which I have already written most of code . The only problem I am facing is that the Ribbon Buttons I am adding to the Tabs are not aligning properly in the Tab . As you can see in the Screen Shot the button is aligning to bottom of the Tab. How can I bring these button to top so they are visible.
This is How my app looks like
The XAML Code is below
<UserControl x:Class="SongPurifier.UserControls.RibbonControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:ribbon="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon"
>
<Grid>
<ribbon:Ribbon x:Name="ribbon" VerticalAlignment="Top">
<ribbon:RibbonTab Header="Home">
<ribbon:RibbonSplitButton
Label="Open"
LargeImageSource="/Images/Folder Open.png"
Command="{Binding OpenFolderCommand}">
</ribbon:RibbonSplitButton>
</ribbon:RibbonTab>
<ribbon:RibbonTab Header="Edit" >
<ribbon:RibbonButton Label="Replace String"
LargeImageSource="/Images/Find Replace.png"
Command="{Binding EditSongInfoCommand}"
>
</ribbon:RibbonButton >
<ribbon:RibbonButton Label="Update Song Info"
LargeImageSource="/Images/Update.png"
Command="{Binding UpdateSongInfoCommand}"
>
</ribbon:RibbonButton>
</ribbon:RibbonTab>
<ribbon:RibbonTab Header="Update" >
<ribbon:RibbonButton
Label="Check for Update" >
</ribbon:RibbonButton>
</ribbon:RibbonTab>
</ribbon:Ribbon>
</Grid>

Sachin:
Place your Ribbon Buttons inside a RibbonGroup.
<my:RibbonTab Header="Home">
<my:RibbonGroup Header="File">
<ribbon:RibbonSplitButton
Label="Open"
LargeImageSource="/Images/Folder Open.png"
Command="{Binding OpenFolderCommand}">
</ribbon:RibbonSplitButton>
</my:RibbonGroup>
</my:RibbonTab>

Related

How to open page in window

There is a window on how to make it so that after clicking on the button, a page opens inside this window, while it moves along with the window, the background of the window darkens and when you click on, all the elements of the window become non-clickable.
You don't necessarily need actual Flyout. The combination of ordinary Grids would surffice.
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="400">
<Grid>
<!-- Main content -->
<!-- Flyout Grid -->
<Grid Visibility="Visible"
Background="#22000000">
<Grid Width="400" Height="300" Background="Black">
<TextBlock Text="Flyout" Foreground="White"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Grid>
</Grid>
</Window>
This Flyout Grid covers the entire Window and looks as a Flyout. You can show/hide this Grid by changing its Visibility somehow by binding.
Edit
Assuming you have a System.Windows.Controls.Page named "FlyoutPage", You can add it in design time:
<!-- Flyout Grid -->
<Grid Visibility="Visible"
Background="#22000000">
<Grid x:Name="FlyoutGrid" Width="400" Height="300" Background="Black">
<Frame>
<Frame.Content>
<local:FlyoutPage/>
</Frame.Content>
</Frame>
</Grid>
</Grid>
You can add it at run time as well.
this.FlyoutGrid.Children.Clear();
this.FlyoutGrid.Children.Add(new Frame { Content = new FlyoutPage() });
If you are not bound to the default WPF controls, you could check out Material Design in XAML. This library provides a DialogHost control which does exactly what you want. For more information, please refer to the Wiki on Dialogs. The library is available as NuGet package MaterialDesignThemes.
<materialDesign:DialogHost>
<materialDesign:DialogHost.DialogContent>
<StackPanel>
<TextBlock Text="This is the dialog content."
Margin="10"/>
<Button Content="Close dialog"
Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}"/>
</StackPanel>
</materialDesign:DialogHost.DialogContent>
<Button DockPanel.Dock="Bottom"
Content="Open dialog"
Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}"
VerticalAlignment="Bottom"/>
</materialDesign:DialogHost>
There is the regular content and a dialog content, as well as special commands for open and close.

Creating groups on the Ribbon control in Visual Studio 2012 and WPF?

I have the following problem when I create groups with WPF and Ribbon control.
The image below explains the problem:
The code is:
<Window x:Class="Arelion.InternalProjects.RouteVisualization.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Route Visualization" Height="395" Width="832">
<Grid>
<Ribbon Name="ribbon">
<RibbonGroup Name="groupHome" Header="View">
<RibbonToggleButton Label="Display Map"/>
<RibbonToggleButton Label="Online"/>
</RibbonGroup>
</Ribbon>
</Grid>
</Window>
Enclosing RibbonGroup within RibbonTab should solve your issue:
<Ribbon Name="ribbon">
<RibbonTab>
<RibbonGroup Name="groupHome" Header="View">
<RibbonToggleButton Label="Display Map"/>
<RibbonToggleButton Label="Online"/>
</RibbonGroup>
</RibbonTab>
</Ribbon>

WPF 4.5 Microsoft's Ribbon: which control of RibbonApplicationMenu

I am using Microsoft's Ribbon of WPF 4.5 and developing application using VS2012 (C#) on Win 8 machine. I want to make my application show RibbonApplicationMenu like the "File"-menu of Office Word 2010, but I can't find out which control is used for it (see attached screenshot, red-marked control number 1 and 2). I also tried RibbonApplicationSplitMenuItem but it is more like Office old-style.
Maybe anyone can tell me. Thank you in advance.
1) I suggest you use the ribbon that's inside .net 4.5 (add a reference to System.Windows.Controls.Ribbon). I'm not sure what you used the external one.
2)What you need for a menu is Ribbon.ApplicationMenu
3) Below is a working ribbon (based on that) that includes several types of buttons as well as a menu that you require.
All you need for this to work is to add an images folder with an "options.png" in it.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Ribbon SelectedIndex="0" Grid.Column="0" Grid.ColumnSpan="5">
<!-- Help Pane, located at the right-hand side -->
<Ribbon.HelpPaneContent>
<RibbonButton SmallImageSource="Images\options.png" />
</Ribbon.HelpPaneContent>
<!-- Quick Access Toolbar - located at the upper-left corner -->
<Ribbon.QuickAccessToolBar>
<RibbonQuickAccessToolBar>
<RibbonButton x:Name ="Save" SmallImageSource="Images\options.png" />
<RibbonSplitButton x:Name ="Undo" SmallImageSource="Images\options.png" >
<RibbonSplitMenuItem Header="Undo 1" />
<RibbonSplitMenuItem Header="Undo 2" />
</RibbonSplitButton>
<RibbonSplitButton x:Name="Redo" SmallImageSource="Images\options.png" >
<RibbonSplitMenuItem Header="Redo 1" />
<RibbonSplitMenuItem Header="Redo 2" />
</RibbonSplitButton>
<RibbonCheckBox Label="Sound" KeyTip="X" />
</RibbonQuickAccessToolBar>
</Ribbon.QuickAccessToolBar>
<!-- Application Menu, located at the left-hand side (down arrow) -->
<Ribbon.ApplicationMenu>
<RibbonApplicationMenu KeyTip="F">
<RibbonApplicationMenuItem Header="Options1" ImageSource="Images\options.png" />
<RibbonApplicationMenuItem Header="Exit2" ImageSource="Images\options.png" />
</RibbonApplicationMenu>
</Ribbon.ApplicationMenu>
<!-- Ribbon Tab #1: Home -->
<RibbonTab Header="Home" KeyTip="H" >
<!-- Home group-->
<RibbonGroup x:Name="ClipboardGroup" Header="Home">
<RibbonMenuButton LargeImageSource="Images\options.png" Label="Activate" KeyTip="V">
<RibbonToggleButton SmallImageSource="Images\options.png" Label="blabla" KeyTip="H" />
<RibbonToggleButton SmallImageSource="Images\options.png" Label="option2" />
</RibbonMenuButton>
<RibbonToggleButton SmallImageSource="Images\options.png" Label="Toggle " KeyTip="X" />
<RibbonToggleButton x:Name="Toggle11" SmallImageSource="Images\options.png" Label="Just a Toggle" KeyTip="FP" />
</RibbonGroup>
<!-- Employee And Payroll group-->
<RibbonGroup x:Name="Employee" Header="Adjust View">
<RibbonMenuButton LargeImageSource="Images\options.png" Label="Test" KeyTip="V">
<RibbonMenuItem ImageSource="Images\options.png" Header="Keep Text Only" KeyTip="T"/>
<RibbonMenuItem ImageSource="Images\options.png" Header="Paste Special..." KeyTip="S"/>
</RibbonMenuButton>
<RibbonCheckBox SmallImageSource="Images\options.png" Label="Sound" KeyTip="X" />
</RibbonGroup>
</RibbonTab>
<!-- Ribbon Tab #2: Launch -->
<RibbonTab Header="Settings" KeyTip="I">
<!-- Launch/Applications group-->
<RibbonGroup Header="Settings">
<RibbonButton SmallImageSource="Images\options.png" Label="Record" KeyTip="C" />
</RibbonGroup>
</RibbonTab>
<RibbonTab Header="PageLayout" KeyTip="L">
<!-- Launch/Applications group-->
</RibbonTab>
</Ribbon>
</Grid>
</Window>
<Ribbon.ApplicationMenu>
<RibbonApplicationMenu>
<RibbonApplicationMenu.AuxiliaryPaneContent>
<Label Content="Right panel!"></Label>
</RibbonApplicationMenu.AuxiliaryPaneContent>
<RibbonApplicationMenuItem Header="Exit" Click="ShutDown" />
</RibbonApplicationMenu>
</Ribbon.ApplicationMenu>
haha
Finally I found the answer in wpf sample browser of infragistics netadvantage. The no. 1 is called "backstage" (ribbon 2010 style), no. 2 is a "application menu item".
(in my opinion) The infragistics' ribbon is easier to use than the Microsoft's one, since I can't find tutorial how to create backstage (ribbon 2010 style); the existing tutorials are mostly using old ribbon (2007 style).
Here take a look my simple code snippet:
<Window x:Class="TestRibbon.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ig="http://schemas.infragistics.com/xaml"
xmlns:igRibbon="http://infragistics.com/Ribbon"
xmlns:ignore="http://www.ignore.com"
mc:Ignorable="d ignore"
Height="768"
Width="1024"
Title="Test Ribbon"
DataContext="{Binding Main, Source={StaticResource Locator}}">
<Grid x:Name="gridMain">
<igRibbon:XamRibbon x:Name="ribbonMain"
Width="Auto"
ApplicationMenuMode="Office2010"
ApplicationAccentColor="Blue">
<igRibbon:XamRibbon.ApplicationMenu2010>
<igRibbon:ApplicationMenu2010 Caption="File">
<igRibbon:ApplicationMenu2010Item KeyTip="I"
Header="Information">
<igRibbon:ApplicationMenu2010Item.Content>
<Grid Margin="20,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Margin="0,20,0,0" Foreground="Black" Text="IP" />
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Margin="0,20,0,0" />
<TextBlock Foreground="DarkGray" Text="192.168.2.1" />
</StackPanel>
</Grid>
</igRibbon:ApplicationMenu2010Item.Content>
</igRibbon:ApplicationMenu2010>
</igRibbon:XamRibbon.ApplicationMenu2010>
</igRibbon:XamRibbon>
</Grid>
</window>

how stretch user control in tab control item

Hi I try solve how stretch user control width / height which is active in tab control to tab control width / height.
I use caliburn micro.
I create some user control. Here is it:
<UserControl x:Class="Spirit.Views.TabChatView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:Micro="clr-namespace:Caliburn.Micro;assembly=Caliburn.Micro"
xmlns:Controls="clr-namespace:Spirit.Controls" mc:Ignorable="d"
Name="ChatWindow"
Background="{StaticResource LightGrayBackground}"
Height="545" Width="680">[...]</UserControl>
This user control is active in shell, shell declaration is here.
<Window x:Class="Spirit.Views.ChatShellView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:cal="clr-namespace:Caliburn.Micro;assembly=Caliburn.Micro"
Title="ChatShellView" Height="300" Width="300">
<DockPanel>
<Button x:Name="OpenTab"
Content="Open Tab"
DockPanel.Dock="Top" />
<TabControl x:Name="Items">
<TabControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding DisplayName}" />
<Button Content="X"
cal:Message.Attach="CloseItem($dataContext)" />
</StackPanel>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
</DockPanel>
</Window>
Result if some user constrol is active in this shell you can see on this image:
I would like stretch user control on maximum tab control witdh / height.
Remove Height="545" Width="680" in UserControl definition

WPF Focus Navigation Wrapping

Is there a way to force Focus Navigation (as controlled by the Tab key or MoveFocus method) to wrap inside a given container? I have included code which demonstrates this problem below. What is the easiest way to make Tab move focus from TextBox "Charlie" to TextBox "Able" (and visa-versa for Shift+Tab on TextBox "Able") rather than moving it to MenuItem "Alpha"?
<Window x:Class="NavWrapExample.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<DockPanel LastChildFill="True">
<Menu DockPanel.Dock="Top">
<MenuItem Header="Alpha" />
<MenuItem Header="Bravo" />
<MenuItem Header="Charlie" />
</Menu>
<StackPanel>
<TextBox Text="Able" />
<TextBox Text="Baker" />
<TextBox Text="Charlie" />
</StackPanel>
</DockPanel>
</Window>
Use the KeyboardNavigation.TabNavigation attached property, like so:
<StackPanel KeyboardNavigation.TabNavigation="Cycle">
<TextBox Text="Able" />
<TextBox Text="Baker" />
<TextBox Text="Charlie" />
</StackPanel>
Found the answer on Mark Smith's blog.
It sounds like what you want is the same behavior as toolbars: you can tab into them, but once an element within the toolbar gets keyboard focus, focus loops inside. If so, use FocusManager as follows:
<StackPanel FocusManager.IsFocusScope="True">
<!-- Controls go here... -->
</StackPanel>

Resources