
I am trying to put together a user interface that has a ribbon that is very similar to the Office 2013 layout. The key points we would like are the following.
- Backstage File tab that fills the whole window. (See image below).
http://media.askvg.com/articles/images4/Change_Office_2013_Theme.png
- Quick Access Toolbar next to the application icon
- Application name on the main title bar centered
- Application Icon similar to Visual Studio 2013
- Custom controls added next to the minimize button.
http://media.askvg.com/articles/images4/Office_2013_Light_Gray_Theme.png
So far I have tried to use the RibbonWindow and the WindowChrome to achieve this. Previous posts have said that if the root object in the XMAL is the standard WPF Window class then we can define a WindowChrome object in XAML to achieve most of this. If the root object is the RibbonWindow, then it has its own WindowChrome and setting another WindowChrome in XAML can cause problems.
First I tried to use the standard WPF window and define the WindowChrome using the following XAML.
<Window Title=”MyAppName” .... >
<Window.Resources>
<DataTemplate x:Key="TitleBarContentTemplate">
<Button Style="{DynamicResource {x:Static themes:SharedResourceKeys.WindowTitleBarButtonBaseStyleKey}}"
themes:ThemeProperties.IsActive="{Binding IsActive, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
ToolTip="Help" ToolTipService.InitialShowDelay="500">
<Button.ContentTemplate>
<DataTemplate>
<ContentControl Content="{StaticResource appbar_question}">
<ContentControl.LayoutTransform>
<ScaleTransform ScaleX="0.3" ScaleY="0.3" />
</ContentControl.LayoutTransform>
</ContentControl>
</DataTemplate>
</Button.ContentTemplate>
</Button>
</DataTemplate>
</Window.Resources>
<themes:WindowChrome.Chrome>
<themes:WindowChrome IconMargin="0" TitleBarContentTemplate="{StaticResource TitleBarContentTemplate}">
<themes:WindowChrome.IconSource>
<TransformedBitmap>
<TransformedBitmap.Transform>
<ScaleTransform ScaleX="0.35" ScaleY="0.35" />
</TransformedBitmap.Transform>
<TransformedBitmap.Source>
<BitmapImage UriSource="/Images/Metro/dark/appbar.globe.png" />
</TransformedBitmap.Source>
</TransformedBitmap>
</themes:WindowChrome.IconSource>
</themes:WindowChrome>
</themes:WindowChrome.Chrome>
</Window>
The approach above adds the application icon (appbar.globe.png) in the upper left corner (correctly transformed), the application name next to that, the question mark next to the main minimize button, a whole row for the Quick Access Toolbar (which we do not like), and a backstage under the File Tab. The problem is that the backstage does not use the whole window like it’s shown in the example image and the QAT is using its own full row.
Next I tried to change the root object from a standard WPF Window to the Actipro RibbonWindow and I moved the TitleBarContentTemplete to the App.xaml resources. I also added the following XAML Image Resource in the App.xaml resources.
<Image x:Key="ChromeImage" Source="/Images/Metro/dark/appbar.globe.png">
<Image.LayoutTransform>
<ScaleTransform ScaleX="0.35" ScaleY="0.35" />
</Image.LayoutTransform>
</Image>
In the code-behind of the MainWindow I have the following.
public partial class MainWindow : RibbonWindow {
publc MainWindow(){
InitializeComponent();
var chrome = WindowChrome.GetChrome(this);
chrome.TitleBarContentTemplate = (DataTemplate)App.Current.Resources["TitleBarContentTemplate"];
chrome.IconSource = ((Image)App.Current.Resources["ChromeImage"]).Source;
}
}
You also have to add the ApplicationName for the RibbonWindow because the standard WPF Window uses a property called Title.
<ribbon:RibbonWindow ApplicationName=”MyAppName” .... >
Now when I run the app its much closer to what we are looking for. The only real visual issues are that the ScaleTransform is not being used for the chrome.IconSource because it just wants an ImageSource that (as far as I know) can not include any kind of Transform. The Transform is defined at the Image level and the WindowChrome.IconSource is only an ImageSource object.
The second issue is that the WindowChrome.IconSource is not only huge but the Quick Access Toolbar is drawing directly on top of the image in the upper left corner of the main RibbonWindow. Basically the QAT is drawing directly on top of the application image. As a test I changed the appbar.globe.png (which is 76x76 pixels) to a much smaller 16x16 PNG that does not need to be scaled down, the QAT is still drawing on top of the application icon.
So how do I get the WindowChrome.IconSource set in code to a PNG that needs to be scaled down to fit and how do I get the QAT to not draw on top of the WindowChome.IconSource image? I have set the RibbonWindow.Icon property to an ICO file and it does draw in the upper left cornder and the QAT is next to it not on top of it but its drawn very small. I think the WindowChrome.IconSource looks better but I am not sure how to get the QAT next to the WindowChrome.IconSource.
Thanks,
-eric