Introduction

I always wanted to be part of this community to provide my services so here is my first tip and trick to make MahApps.Metro provided Flyout work with PRISM Library.

PRISM Library provides the guidance to build easy to maintain modular applications. I am already working on PRISM Library but recently came across MahApps.Metro in my search to enhance the user experience of my application. MahApps.Metro is a cool UI based toolkit to enhance the look and feel and layout of your WPF application. I liked the Flyout feature of MahApps so I started to lookout for the solution to embed it in my PRISM application. Though this topic was under discussion on multiple forums including MahApps forum as well but there was no solution available. So I decided to incorporate it with PRISM Library to have a blend of modular application with rich UI experience. So in this tip and trick, I am presenting my own discovered way to make Flyouts work with PRISM Library.

Background

MahApps.Metro is an extremely cool UI toolkit for WPF. GitHub Source Code
PRISM Library is a guidance to easily design and build rich, flexible, and easy to maintain WPF composite applications, GitHub Source Code

Flyout is a part of MahApps.Metro window. It’s an overlay for Metro Window that can render custom contents. Flyout has the ability to slide in and out from any side of the window.

In this sample, I am going to show how to slide in/out the Flyout from Top and Bottom.

Using the Code

The challenge was to define the region on FlyoutsControl collection to render the flyout content. This required me to create a custom region adapter, FlyoutsControlRegionAdapter that can help in creating flyout control, wire it up with the Content and DataContent of the input control and finally place it inside the FlyoutControl's collection.

I have created the Shell based on MetroWindow of MahApps.Metro and defined the MetroWindow.Flyouts section and decorated the FlyoutControl with Prism's RegionManager.RegionName attached property, let's say we name it FlyoutRegion, as shown below:

Inside FlyoutsControl, I have added ItemContainerStyle to specify the Style for Flyout control items and wired up the Bindings of Header, IsOpen, Position from ViewModel class to Flyout control.

Shell

<mahApps:MetroWindow x:Class="FSX.Prism.Bootstrapper.ShellMetro"
                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"                      
                     xmlns:mahApps="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
                     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                     xmlns:prism="http://prismlibrary.com/"                     
                     Title="Shell"
                     Width="800" Height="600"
                     mc:Ignorable="d">
    <mahApps:MetroWindow.Flyouts>
        <mahApps:FlyoutsControl prism:RegionManager.RegionName="FlyoutRegion">
            <mahApps:FlyoutsControl.ItemContainerStyle>
                <Style TargetType="{x:Type mahApps:Flyout}">
                    <Setter Property="Header" Value="{Binding Header}" />
                    <Setter Property="IsOpen" Value="{Binding IsOpen}" />
                    <Setter Property="Position" Value="{Binding Position}" />
                </Style>
            </mahApps:FlyoutsControl.ItemContainerStyle>
        </mahApps:FlyoutsControl>
    </mahApps:MetroWindow.Flyouts>
    <Grid>
        <ContentControl prism:RegionManager.RegionName="MainRegion" />
    </Grid>
</mahApps:MetroWindow>

FlyoutsControlRegionAdapter

[Export]
public class FlyoutsControlRegionAdapter : RegionAdapterBase<FlyoutsControl>
{
    [ImportingConstructor]
    public FlyoutsControlRegionAdapter(IRegionBehaviorFactory factory)
        : base(factory)
    {
    }

    protected override void Adapt(IRegion region, FlyoutsControl regionTarget)
    {
        region.ActiveViews.CollectionChanged += (s, e) =>
        {
            if (e.Action == NotifyCollectionChangedAction.Add)
            {
                foreach (FrameworkElement element in e.NewItems)
                {
                    Flyout flyout = new Flyout();
                    flyout.Content = element;
                    flyout.DataContext = element.DataContext;
                    regionTarget.Items.Add(flyout);
                }
            }
        };
    }

    protected override IRegion CreateRegion()
    {
        return new AllActiveRegion();
    }
}

Registered the FlyoutsControlRegionAdapter in the Bootstrapper code.

protected override RegionAdapterMappings ConfigureRegionAdapterMappings()
{
    var mappings = base.ConfigureRegionAdapterMappings();
    mappings.RegisterMapping(typeof(FlyoutsControl), 
		Container.GetExportedValue<FlyoutsControlRegionAdapter>());
    return mappings;
}

Now I move on to show how to trigger the Flyout in and out of Metro Window. For that, I have created a View with two buttons, Show Top Flyout and Show Bottom Flyout binding them with ToggleFlyoutCommand passing commond parameters Top and Bottom to distinguish which button has originated the command.

MainView (render in MainRegion)

<UserControl x:Class="PrismMahAppsModule.MainView"
             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" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <StackPanel>
            <Button MinWidth="90"
                    Margin="2"
                    Command="{Binding ToggleFlyoutCommand}" CommandParameter="Top"
                    Content="Show Top Flyout" />
            <Button MinWidth="90"
                    Margin="2"
                    Command="{Binding ToggleFlyoutCommand}" CommandParameter="Bottom"
                    Content="Show Bottom Flyout" />
        </StackPanel>
    </Grid>
</UserControl>

Register the desired view with FlyoutRegion.

IRegionManager regionManager = ServiceLocator.Current.GetInstance<IRegionManager>();
regionManager.RegisterViewWithRegion("FlyoutRegion", typeof(FlyoutBottomView));

MainViewModel

[Export]
public class ShellViewModel
{
    [ImportingConstructor]
    public ShellViewModel()
    {
        ToggleFlyoutCommand = new DelegateCommand<object>(ToggleFlyout);
        IRegionManager regionManager = ServiceLocator.Current.GetInstance<IRegionManager>();
        if (regionManager == null) throw new ArgumentNullException("regionManager");
        regionManager.RegisterViewWithRegion("FlyoutRegion", typeof(FlyoutBottomView));
        regionManager.RegisterViewWithRegion("FlyoutRegion", typeof(FlyoutTopView));
    }

    public ICommand ToggleFlyoutCommand { get; private set; }

    public void ToggleFlyout(object param)
    {
        var side = (string)param;
        if (side == "Top")
        {
            var vm = ServiceLocator.Current.GetInstance<FlyoutTopViewModel>();
            vm.IsOpen = !vm.IsOpen;
        }
        else
        {
            var vm = ServiceLocator.Current.GetInstance<FlyoutBottomViewModel>();
            vm.IsOpen = !vm.IsOpen;
        }
    }
}

Wrapping Up

In this tip and trick, I tried to present my own idea of making MahApps.Metro Flyout work with Prism Library. Obviously, there could be other ways, but I find it quite flexible enough.

I hope you find this useful. Please rate and leave your valuable feedback.

Thank you!

History

October 2015 - Initial release

MahApps.Metro Flyouts with PRISM Library