Controlling and using MahApps resources and controls

[mezamoe]

Hello again,

I'm trying to use a Flyout inside a tabitem but I struggling to understand how it works in xaml. For instance, I have this xaml that works:

<mah:MetroWindow x:Class="MAHAPPSTABS.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:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
        ResizeMode="NoResize">

    <mah:MetroWindow.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />

                <!-- Theme setting -->
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />

            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </mah:MetroWindow.Resources>

    <Grid>
        <mah:MetroAnimatedTabControl HorizontalAlignment="Left" Height="366" Margin="10,45,0,0" VerticalAlignment="Top" Width="774" Style="{DynamicResource MahApps.Styles.TabControl.AnimatedSingleRow}" mah:HeaderedControlHelper.HeaderFontFamily="Yu Gothic UI Semibold" mah:HeaderedControlHelper.HeaderFontSize="20" mah:HeaderedControlHelper.HeaderFontStretch="UltraExpanded" mah:HeaderedControlHelper.HeaderFontWeight="Light" mah:TabControlHelper.UnderlineBrush="#FFA43131" mah:TabControlHelper.UnderlineMouseOverBrush="#FF1D7C2A">
            <TabItem Header="TabItem1" FontFamily="Yu Gothic UI Semibold" FontSize="10" mah:HeaderedControlHelper.HeaderFontFamily="Yu Gothic UI Semibold" mah:HeaderedControlHelper.HeaderFontSize="20" mah:HeaderedControlHelper.HeaderFontStretch="UltraExpanded" mah:HeaderedControlHelper.HeaderForeground="#FFBD3535">
                <Grid Background="#FFE5E5E5">
                    <Button Content="Open Flyout" HorizontalAlignment="Left" Margin="74,76,0,0" VerticalAlignment="Top" Width="75"/>
                </Grid>
            </TabItem>
            <TabItem Header="TabItem2">
                <Grid Background="#FFE5E5E5"/>
            </TabItem>
            <TabItem Header="TabItem3">
                <Grid Background="#FFE5E5E5"/>
            </TabItem>
            <TabItem Header="TabItem4">
                <Grid Background="#FFE5E5E5"/>
            </TabItem>
            <TabItem Header="TabItem5">
                <Grid Background="#FFE5E5E5"/>
            </TabItem>
            <TabItem Header="TabItem6">
                <Grid Background="#FFE5E5E5"/>
            </TabItem>
            <TabItem Header="TabItem7">
                <Grid Background="#FFE5E5E5"/>
            </TabItem>
            <TabItem Header="TabItem8">
                <Grid Background="#FFE5E5E5"/>
            </TabItem>
            <TabItem Header="TabItem9">
                <Grid Background="#FFE5E5E5"/>
            </TabItem>
            <TabItem Header="TabItem10">
                <Grid Background="#FFE5E5E5"/>
            </TabItem>
        </mah:MetroAnimatedTabControl>
        <Image HorizontalAlignment="Left" Height="40" Margin="609,0,0,0" VerticalAlignment="Top" Width="175"/>

    </Grid>
</mah:MetroWindow>

However, from the documentation I see that to add a flyout to the xaml I need to add:

Controls:MetroWindow.Flyouts>
 <Controls:FlyoutsControl>
  <Controls:Flyout x:Name="FlyOutContent" Position="Top" Width="900"  Theme="Accent" IsPinned="False" Opacity="0.93" >
   <grid>           
   </Grid>
  </Controls:Flyout>
 </Controls:FlyoutsControl>
</Controls:MetroWindow.Flyouts> 

What I am struggling with is how to properly use the mah:MetroWindow Vs Controls:MetroWindow.Flyout>. How to use one or another or one into another. Better said, I would like to learn how to use MahApps resources proficiently inside an existing project. Where can I find documentation on this?

[mezamoe]

for instance I'm following this:
https://www.systanddeploy.com/2016/01/powershell-gui-add-mahapps-metro-theme.html
but I see nothing when I build the code. The window opens up but no sign of the flyout. Also, on that page and in other places it says to use the PS variable $Flyout_Expand but it does not exist.
I've also looked here
https://mahapps.github.io/controls/flyouts.html

but the way xaml is used is different than in here:
https://mahapps.com/docs/controls/flyouts

[timunie]

Hi

Unfortunately you cannot place a Flyout in a TabControl. It needs to be inside MetroWindow. The prefix "mah:" or "Controls:" is defined in your xmlns and can be changed. You can name it how you want, just make sure to be consistent in your file.

If you want a good example download the source and test the demo App. It is open source so you can see what is going on and test different things.

Happy coding
Tim

[mezamoe]

Thanks Tim! I will change the coding accordingly. And... from your answer I understand that there isn't a complete documentation on this.. ?

[timunie]

Please understand that this is a free time project and therefore the docs may lack a bit. But anyway check out the demo. It shows almost all the things.

Thank you for understanding.