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 是关闭的。
csharp 复制代码
<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>
csharp 复制代码
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);
            }
        }
    }
}
csharp 复制代码
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;
        }
    }
}
csharp 复制代码
<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>
csharp 复制代码
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; }
        }
    }
}
相关推荐
Amd79414 分钟前
Nuxt.js 应用中的 webpack:done 事件钩子
ui·webpack·编译·nuxt.js·加载·清理·钩子
明耀1 小时前
WPF 强制刷新TabControl 的Header
wpf
开心羊咩咩2 小时前
element-ui 中el-calendar 日历插件获取显示的第一天和最后一天【原创】
java·javascript·ui
白水4653 小时前
对于某些原型或UI软件的个人看法(2024/11)
学习·ui·产品经理·个人开发·墨刀
rollingman6 小时前
WPF 学习《一》
学习·wpf·listview
Python图像识别-16 小时前
基于yolov8、yolov5的智能零售柜商品检测识别系统(含UI界面、训练好的模型、Python代码、数据集)
yolo·ui·零售
WALL-EC7 小时前
VS2019+QT5.12 创建UI(Dialog窗体)界面自动生成.h和cpp文件
开发语言·qt·ui
液态不合群15 小时前
Redis中常见的数据类型及其应用场景
数据库·redis·wpf
川石课堂软件测试20 小时前
UI自动化测试|web端元素获取&元素等待实践
开发语言·前端·功能测试·算法·ui