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; }
        }
    }
}
相关推荐
zls3653651 小时前
C# WPF 与 JS 交互可以使用的第三方库
开发语言·javascript·c#·wpf·交互
SoraLuna1 小时前
「Mac畅玩鸿蒙与硬件27」UI互动应用篇4 - 猫与灯的互动应用
macos·ui·harmonyos
MicrosoftReactor1 小时前
技术速递|.NET 9 中 System.Text.Json 的新增功能
ui·json·.net
界面开发小八哥1 小时前
「实战应用」如何用图表控件LightningChart .NET在WPF中制作表格?(一)
.net·wpf·数据可视化·图表控件·图表·lightningchart
SoraLuna2 小时前
「Mac畅玩鸿蒙与硬件29」UI互动应用篇6 - 多选问卷小应用
macos·ui·harmonyos
钱钱钱端11 小时前
UI自动化测试 —— CSS元素定位实践!
css·功能测试·selenium·测试工具·jmeter·ui·postman
lqj_本人11 小时前
ArkUI常用布局:构建响应式和高效的用户界面
ui
.net开发12 小时前
WPF中实现PasswordBox的双向绑定
visualstudio·c#·.net·wpf
CodeCraft Studio12 小时前
WPF界面控件Essential Studio for WPF更新至2024 v3,具有更高性能 | 附下载
wpf·用户界面