Mahapps flyout not appearing with and caliburn.micro

Question

I'm trying to show a flyout in wpf using mahapps and caliburn.micro, unfortunately the view for the flyout is not being resolved, and all I get is the type name of the view model displayed in the flyout.

I need the to display the flyout based on which is ActiveItem in the shell, for example the company search flyout is different to the contact search flyout.

Any ideas how I can make this work.

public void ShowSearchFlyout()
{
    var supportsSearch = ActiveItem as ISupportSearch;
    if (supportsSearch != null)
    {
        if (!Flyouts.Contains(supportsSearch.SearchFlyout))
        {
            Flyouts.Add(supportsSearch.SearchFlyout);
        }
        supportsSearch.SearchFlyout.IsOpen = true;
    }
}

<controls:MetroWindow.Flyouts>
    <controls:FlyoutsControl ItemsSource="{Binding Flyouts}">
        <controls:FlyoutsControl.ItemContainerStyle>
            <Style BasedOn="{StaticResource {x:Type controls:Flyout}}" TargetType="{x:Type controls:Flyout}">
                <Setter Property="Header" Value="{Binding Header}"  />
                <Setter Property="IsOpen" Value="{Binding IsOpen}" />
                <Setter Property="Position" Value="{Binding Position}" />
            </Style>
        </controls:FlyoutsControl.ItemContainerStyle>
    </controls:FlyoutsControl>
</controls:MetroWindow.Flyouts>

Answer 1

The following worked for me:

<controls:MetroWindow.Flyouts>
  <controls:FlyoutsControl ItemsSource="{Binding Flyouts}">
    <controls:FlyoutsControl.ItemTemplate>
      <DataTemplate>
        <ContentControl cal:View.Model="{Binding}" />
      </DataTemplate>
    </controls:FlyoutsControl.ItemTemplate>
    <controls:FlyoutsControl.ItemContainerStyle>
      <Style BasedOn="{StaticResource {x:Type controls:Flyout}}" TargetType="{x:Type controls:Flyout}">
        <Setter Property="Header" Value="{Binding Header}"  />
        <Setter Property="IsOpen" Value="{Binding IsOpen}" />
        <Setter Property="Position" Value="{Binding Position}" />
      </Style>
    </controls:FlyoutsControl.ItemContainerStyle>
  </controls:FlyoutsControl>
</controls:MetroWindow.Flyouts>

In order to get the bindings correct you have to add:

    <controls:FlyoutsControl.ItemTemplate>
      <DataTemplate>
        <ContentControl cal:View.Model="{Binding}" />
      </DataTemplate>
    </controls:FlyoutsControl.ItemTemplate>

If you don't you'll get the result of the function ToString() in the FlyOut. The default is the type name of the class (the viewmodel). Try overriding it.

I whish I could give a good explanation as to why the above binding is needed but I'm fairly new to WPF/Caliburn/MVVM. Maybe someone else can elaborate. However I thought this might help you move on.