my own flyout

control.cs

namespace x.Main.Settings
{
    /// <summary>
    /// Interaction logic for SettingsFlyout.xaml
    /// </summary>
    public partial class SettingsFlyout : UserControl
    {
        ISettingsService m_settingsService;

        public SettingsFlyout()
        {
            InitializeComponent();
            Unloaded += HandleUnload;
            overlay.MouseDown += HandleOverlayMouseDown;

            App.SettingsState.IsFlyoutOpenChanged += HandleFlyoutOpenChange;
            m_settingsService = App.SettingsService;
        }

        void HandleUnload(object sender, RoutedEventArgs e)
        {
            App.SettingsState.IsFlyoutOpenChanged -= HandleFlyoutOpenChange;
        }

        void HandleOverlayMouseDown(object sender, MouseButtonEventArgs e)
        {
            m_settingsService.CloseFlyout();
        }

        void HandleFlyoutOpenChange(bool isOpen)
        {
            // Show overlay.
            overlay.Visibility = isOpen ?
                Visibility.Visible :
                Visibility.Collapsed;

            // Animate the flyout's margin right.
            ThicknessAnimation animation = new ThicknessAnimation()
            {
                Duration = TimeSpan.FromMilliseconds(300),
                DecelerationRatio = 1,
                From = new Thickness(0, 0, container.Margin.Right, 0), // Start animation from whatever its current position.
                To = isOpen ?
                    new Thickness(0, 0, 0, 0) : // All shown.
                    new Thickness(0, 0, -300, 0) // All hidden.
            };
            Storyboard.SetTargetProperty(
                animation,
                new PropertyPath(MarginProperty));
            Storyboard sb = new Storyboard();
            sb.Children.Add(animation);
            sb.Begin(container);
        }
    }
}

control.xaml

<UserControl x:Class="x.Main.Settings.SettingsFlyout"
             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"
             xmlns:local="clr-namespace:x.Main.Settings"
             xmlns:adonisUi="clr-namespace:AdonisUI;assembly=AdonisUI"
             xmlns:adonisControls="clr-namespace:AdonisUI.Controls;assembly=AdonisUI"
             xmlns:adonisExtensions="clr-namespace:AdonisUI.Extensions;assembly=AdonisUI"
             mc:Ignorable="d"
             d:DesignHeight="450"
             d:DesignWidth="800">
    <Grid>
        <Grid Name="overlay"
              Background="Black"
              Opacity="0.1"
              Visibility="Collapsed" />

        <Grid Name="container"
              Width="300"
              Margin="0,0,-300,0"
              HorizontalAlignment="Right"
              Background="{DynamicResource {x:Static adonisUi:Brushes.Layer4BackgroundBrush}}">
            <ScrollViewer CanContentScroll="True"
                          HorizontalScrollBarVisibility="Hidden"
                          VerticalScrollBarVisibility="Auto"
                          adonisExtensions:ScrollViewerExtension.VerticalScrollBarPlacement="Overlay">
                <local:SettingsView />
            </ScrollViewer>
        </Grid>
    </Grid>
</UserControl>