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>
Related
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>
I want to center the title of my RibbonWindow, and not have it aligned on the side.
This thread said it had an answer:
Center WPF RibbonWindow Title via XAML Code
but it didn't work.
Bellow is an image and the corresponding code.
<RibbonWindow x:Class="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">
<Grid>
<Ribbon>
<Ribbon.TitleTemplate>
<DataTemplate>
<TextBlock TextAlignment="Center" HorizontalAlignment="Stretch" Width="{Binding ElementName=Window, Path=ActualWidth}">ApplicationTitle
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="0" Color="MintCream " BlurRadius="10" />
</TextBlock.Effect>
</TextBlock>
</DataTemplate>
</Ribbon.TitleTemplate>
</Ribbon>
</Grid>
</RibbonWindow>
I am using VS 2012, with .NET 4.5 and the included System.Windows.Controls.Ribbon assembly.
Had a bad experience with using RibbonControlsLibrary for WPF. It has issues not only around title centering. It also breaks window rounding corners at the top, icon and title goes out of the screen when maximized, and personally I haven't found any chance to program ribbon group dialog. All of this lead me to searching for an alternative, and I have found a Fluent Ribbon Controls Suite
Download source code and build it for .NET 4.5 (I did it with absolutely no issues).
The ElementName in the binding (Width="{Binding ElementName=Window, Path=ActualWidth}") needs to match the name of the RibbonWindow. So, in this case you need "Window" for the name:
<RibbonWindow x:Class="Window1" x:Name="Window"
... />
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>
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
I have a xaml page that I want to host another xaml page for various reasons. I attempted to use the Frame control, but I ended up with a warning telling me that the default constructor must be public...
<controls:PivotItem Header="page1">
<Controls:Frame Source="MyPage.xaml"/>
</controls:PivotItem>
Okay, well that doesn't work; now how exactly do I embed a page inside of another page in a WP7 application?
This is a typical layout of a XAML page with a Pivot -
<controls:Pivot x:Name="mainPivot" Title="Home">
<controls:Pivot.Items>
<controls:PivotItem Header="Page 1" x:Name="Page1">
<controls:PivotItem.Content>
<views:Page1View />
</controls:PivotItem.Content>
</controls:PivotItem>
<controls:PivotItem Header="Page 2" x:Name="page2">
<controls:PivotItem.Content>
<views:Page2View />
</controls:PivotItem.Content>
</controls:PivotItem>
<controls:PivotItem Header="Page 3" x:Name="Page3">
<controls:PivotItem.Content>
<views:Page3View />
</controls:PivotItem.Content>
</controls:PivotItem>
</controls:Pivot.Items>
</controls:Pivot>
The views namespace is declared within the XAML as -
xmlns:views="clr-namespace:MyApp.Views"
Each view will be in their individual XAML files, for example (Page1View.xaml) looks like this -
<UserControl
x:Class="MyApps.Views.Page1View"
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"
mc:Ignorable="d"
d:DesignHeight="600"
d:DesignWidth="480">
<Grid x:Name="LayoutRoot">
<!-- Add your content here -->
</Grid>
</UserControl>
Hope this helps,
indyfromoz