wpf 制作丝滑Flyout浮出侧边栏Demo (Mahapps UI框架)

Flyout 属性

• CloseButtonVisibility: 设置为 Collapsed，意味着关闭按钮不可见。
• TitleVisibility: 设置为 Collapsed，意味着标题不可见。
• IsPinned: 设置为 True，意味着这个 Flyout 会固定住，不会自动关闭。
• Opacity: 设置为 1，意味着完全不透明。
• Position: 设置为 Right，意味着这个 Flyout 会出现在右侧。
• Width: 设置为 auto，意味着宽度会根据内容自动调整。
• Background: 背景色设置为 AliceBlue。
• IsOpen: 设置为 False，意味着默认情况下这个 Flyout 是关闭的。

<controls:Flyout x:Class="ControlsTest.FloatingBox"
             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:ControlsTest"
             mc:Ignorable="d" 
             xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls" 
             CloseButtonVisibility="Collapsed" TitleVisibility="Collapsed" 
             IsPinned="True" Opacity="1"
             Position="Right" Width="auto" Background="AliceBlue" IsOpen="False">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>


        <StackPanel Grid.Row="0">
            <Button Content="123" Width="50"/>
            <Button Width="50" Content="345"/>
        </StackPanel>

        <StackPanel Grid.Column="1">
            <Button Content="123" Width="30" Height="50" Click="Button_Click_1"/>
        </StackPanel>

    </Grid>
</controls:Flyout>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ControlsTest
{
    /// <summary>
    /// FloatingBox.xaml 的交互逻辑
    /// </summary>
    public partial class FloatingBox
    {
        public FloatingBox()
        {
            InitializeComponent();
        }

        public static readonly DependencyProperty ButtonClickCommandProperty =
    DependencyProperty.Register("ButtonClickCommand", typeof(ICommand), typeof(FloatingBox), new PropertyMetadata(null));

        public ICommand ButtonClickCommand
        {
            get { return (ICommand)GetValue(ButtonClickCommandProperty); }
            set { SetValue(ButtonClickCommandProperty, value); }
        }

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            if (ButtonClickCommand != null && ButtonClickCommand.CanExecute(null))
            {
                ButtonClickCommand.Execute(null);
            }
        }
    }
}

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Data;
using System.Windows;

namespace ControlsTest
{
    public class BoolToCollapsedConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            Visibility result = Visibility.Collapsed;

            if (value == null || value == DependencyProperty.UnsetValue)
            {
                return result;
            }

            string para = parameter as string;

            if (string.IsNullOrWhiteSpace(para)) 
            {
                result = (((bool)value) ? Visibility.Collapsed : Visibility.Visible);
                return result;
            }
    
            if (string.Equals(para, "reverse", StringComparison.OrdinalIgnoreCase))
            {
                result = ((!(bool)value) ? Visibility.Collapsed : Visibility.Visible);
                return result;
            }

            return result;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return value;
        }
    }
}

<Window x:Class="ControlsTest.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:local="clr-namespace:ControlsTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <StackPanel>
            <Button Width="50"/>
        </StackPanel>
        
        <Grid Grid.Row="1">
            <Button Content="Open" Height="30" Width="50" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,20,40,0" Click="Button_Click" Visibility="{Binding FbisOpen,Converter={StaticResource BoolToCollapsed}}" Background="Red"/>
            <local:FloatingBox IsOpen="{Binding FbisOpen,UpdateSourceTrigger=PropertyChanged}" Height="100" ButtonClickCommand="{Binding ButtonClickCommand}"/>
        </Grid>
        
    </Grid>
</Window>

using PropertyChanged;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ControlsTest
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
     [AddINotifyPropertyChangedInterface]
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;
            ButtonClickCommand = new RelayCommand(OnButtonClick);
        }

        private void OnButtonClick()
        {
            FbisOpen = false;
        }

        private bool fbisOpen = true;

        public bool FbisOpen
        {
            get { return fbisOpen; }
            set { fbisOpen = value; }
        } 

        public ICommand ButtonClickCommand { get; set; }


        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if(FbisOpen)
            {
                FbisOpen = false;
            }
            else
            {
                FbisOpen = true;
            }
        }
    }

    public class RelayCommand : ICommand
    {
        private readonly Action _execute;
        private readonly Func<bool> _canExecute;

        public RelayCommand(Action execute, Func<bool> canExecute = null)
        {
            _execute = execute ?? throw new ArgumentNullException(nameof(execute));
            _canExecute = canExecute;
        }

        public bool CanExecute(object parameter)
        {
            return _canExecute == null || _canExecute();
        }

        public void Execute(object parameter)
        {
            _execute();
        }

        public event EventHandler CanExecuteChanged
        {
            add { CommandManager.RequerySuggested += value; }
            remove { CommandManager.RequerySuggested -= value; }
        }
    }
}