You can find a fully working interop sample in https://github.com/fluentribbon/Fluent.Ribbon/blob/develop/Fluent.Ribbon.Showcase/MahMetroWindow.xaml and https://github.com/fluentribbon/Fluent.Ribbon/blob/develop/Fluent.Ribbon.Showcase/MahMetroWindow.xaml.cs
The most important steps you have to take to get Fluent.Ribbon working inside a MetroWindow
are:
ShowSystemMenuOnRightClick
to false
on your MetroWindow
(otherwise the context menu on the ribbon won’t work as expected)TitleTemplate
<Metro:MetroWindow.TitleTemplate>
<DataTemplate>
<Fluent:RibbonTitleBar x:Name="RibbonTitleBar"
Header="{Binding Path=Title, RelativeSource={RelativeSource AncestorType=Window}}"/>
</DataTemplate>
</Metro:MetroWindow.TitleTemplate>
private void MahMetroWindow_Loaded(object sender, RoutedEventArgs e)
{
this.TitleBar = this.FindChild<RibbonTitleBar>("RibbonTitleBar");
this.TitleBar.InvalidateArrange();
this.TitleBar.UpdateLayout();
}
UseHighestAvailableAdornerLayer
on your Backstage
to false
(this enables showing MahApps.Metro style dialogs above the backstage)Backstage
interop in case you used UseHighestAvailableAdornerLayer
:<Style x:Key="{x:Type Fluent:BackstageTabControl}"
TargetType="{x:Type Fluent:BackstageTabControl}"
BasedOn="{StaticResource {x:Type Fluent:BackstageTabControl}}">
<Setter Property="SelectedContentMargin"
Value="0" />
</Style>
// One time call to ensure initial sync
SyncThemeManagers();
// Called every time the Fluent.Ribbon theme changes
ThemeManager.IsThemeChanged += (o, args) => SyncThemeManagers();
private static void SyncThemeManagers(OnThemeChangedEventArgs args = null)
{
// Sync Fluent and MahApps ThemeManager
var fluentRibbonTheme = args?.Theme ?? ThemeManager.DetectTheme();
var appTheme = MahApps.Metro.ThemeManager.AppThemes.First(x => x.Name == "Base" + fluentRibbonTheme.BaseColorScheme);
var accent = MahApps.Metro.ThemeManager.Accents.First(x => x.Name == fluentRibbonTheme.ColorScheme);
MahApps.Metro.ThemeManager.ChangeAppStyle(Application.Current, accent, appTheme);
}