WPF实现窗体中的悬浮按钮

WPF实现窗体中的悬浮按钮,按钮可拖动,吸附停靠在窗体边缘。

控件XAML代码:

<Button x:Class="SunCreate.Common.Controls.FloatButton"
       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"
       mc:Ignorable="d"
       d:DesignHeight="300" d:DesignWidth="300"
       Width="50" Height="50" Margin="0"
       HorizontalAlignment="Left" VerticalAlignment="Top"
       x:Name="btn"
       Loaded="btn_Loaded" Click="btn_Click" >
  <Button.Template>
    <ControlTemplate>
      <Grid MouseLeftButtonDown="Border_MouseLeftButtonDown">
        <Border CornerRadius="25" Background="#022938" Opacity="0.2" >
        </Border>
        <Border CornerRadius="20" Width="40" Height="40" Background="#022938" Opacity="0.3" >
        </Border>
        <Border CornerRadius="14" Width="28" Height="28" Background="#b06919" Opacity="0.8" >
        </Border>
      </Grid>
    </ControlTemplate>
  </Button.Template>
</Button>

控件cs代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading;
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.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace SunCreate.Common.Controls
{
  /// <summary>
  /// 悬浮按钮
  /// </summary>
  public partial class FloatButton : Button
  {
    public event EventHandler ClickEvent;

    private bool _move = false;
    double _distance = 200;
    double _distanceNew = 5;
    private Point _lastPos;
    private Point _newPos;
    private Point _oldPos;

    public FloatButton()
    {
      InitializeComponent();
    }

    private void btn_Loaded(object sender, RoutedEventArgs e)
    {
      if (this.Parent != null && this.Parent is FrameworkElement)
      {
        FrameworkElement parent = this.Parent as FrameworkElement;
        double left = parent.ActualWidth - this.ActualWidth - this._distanceNew;
        double top = parent.ActualHeight - this.ActualHeight - this._distanceNew;
        this.Margin = new Thickness(left, top, 0, 0);
      }
    }

    private void Border_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
      if (this.Parent != null && this.Parent is FrameworkElement)
      {
        FrameworkElement parent = this.Parent as FrameworkElement;
        _move = true;
        _lastPos = e.GetPosition(parent);
        _oldPos = _lastPos;

        parent.PreviewMouseMove += (s, ee) =>
        {
          if (_move)
          {
            Point pos = ee.GetPosition(parent);
            double left = this.Margin.Left + pos.X - this._lastPos.X;
            double top = this.Margin.Top + pos.Y - this._lastPos.Y;
            this.Margin = new Thickness(left, top, 0, 0);

            _lastPos = e.GetPosition(parent);
          }
        };

        parent.PreviewMouseUp += (s, ee) =>
        {
          if (_move)
          {
            _move = false;

            Point pos = ee.GetPosition(parent);
            _newPos = pos;
            double left = this.Margin.Left + pos.X - this._lastPos.X;
            double top = this.Margin.Top + pos.Y - this._lastPos.Y;
            double right = parent.ActualWidth - left - this.ActualWidth;
            double bottom = parent.ActualHeight - top - this.ActualHeight;

            if (left < _distance && top < _distance) //左上
            {
              left = this._distanceNew;
              top = this._distanceNew;
            }
            else if (left < _distance && bottom < _distance) //左下
            {
              left = this._distanceNew;
              top = parent.ActualHeight - this.ActualHeight - this._distanceNew;
            }
            else if (right < _distance && top < _distance) //右上
            {
              left = parent.ActualWidth - this.ActualWidth - this._distanceNew;
              top = this._distanceNew;
            }
            else if (right < _distance && bottom < _distance) //右下
            {
              left = parent.ActualWidth - this.ActualWidth - this._distanceNew;
              top = parent.ActualHeight - this.ActualHeight - this._distanceNew;
            }
            else if (left < _distance && top > _distance && bottom > _distance) //左
            {
              left = this._distanceNew;
              top = this.Margin.Top;
            }
            else if (right < _distance && top > _distance && bottom > _distance) //右
            {
              left = parent.ActualWidth - this.ActualWidth - this._distanceNew;
              top = this.Margin.Top;
            }
            else if (top < _distance && left > _distance && right > _distance) //上
            {
              left = this.Margin.Left;
              top = this._distanceNew;
            }
            else if (bottom < _distance && left > _distance && right > _distance) //下
            {
              left = this.Margin.Left;
              top = parent.ActualHeight - this.ActualHeight - this._distanceNew;
            }

            ThicknessAnimation marginAnimation = new ThicknessAnimation();
            marginAnimation.From = this.Margin;
            marginAnimation.To = new Thickness(left, top, 0, 0);
            marginAnimation.Duration = TimeSpan.FromMilliseconds(200);

            Storyboard story = new Storyboard();
            story.FillBehavior = FillBehavior.Stop;
            story.Children.Add(marginAnimation);
            Storyboard.SetTargetName(marginAnimation, "btn");
            Storyboard.SetTargetProperty(marginAnimation, new PropertyPath("(0)", Border.MarginProperty));

            story.Begin(this);

            this.Margin = new Thickness(left, top, 0, 0);
          }
        };
      }
    }

    private void btn_Click(object sender, RoutedEventArgs e)
    {
      if (_newPos.Equals(_oldPos))
      {
        if (ClickEvent != null)
        {
          ClickEvent(sender, e);
        }
      }
    }
  }
}

如何使用:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ui="clr-namespace:SunCreate.Common.Controls;assembly=SunCreate.Common.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="SunCreate.Common.Controls.Demo.MainWindow"
    Title="MainWindow"
    Height="700" Width="1200"
    Background="#ff10498c"
    WindowStartupLocation="CenterScreen">
  <Grid>
    <ui:FloatButton x:Name="floatBtn" ></ui:FloatButton>
  </Grid>
</Window>

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • WPF MVVM制作发送短信小按钮

    最近做一个项目,因为涉及到注册,因此需要发送短信,一般发送短信都有一个倒计时的小按钮,因此,就做了一个,在此做个记录. 一.发送消息 没有调用公司的短信平台,只是模拟前台生成一串数字,将此串数字输出一下. 在这个部分写了两个类文件:一个是生成随机数,一个是模拟发送此数字的. 1.因为生成几位随机数,是必须要到项目上线之前才能定的,因此,写了一个带参数的函数,如下 /// <summary> /// 生成随机验证码 /// </summary> public static class

  • WPF水珠效果按钮组的实现教程

    效果图 相关知识 这部分基本就是废话,网上都能找到,我只不过是整理了以下.建议先不看,用到的时候可以回来看看 贝塞尔曲线 先来看两组图,有助于理解什么是贝塞尔曲线(图片取自维基百科,参考链接1) 二次贝塞尔曲线: P0是起点,P2是终点,P1是控制点 三次贝塞尔曲线: P0是起点,P2是终点,P1是控制点1,P2是控制点2 依次连接所有点,组成线段 t是比例,在0-1之间,就是每条线段的长度都是1 贝塞尔曲线就是最里层的线段在t位置的点所组成的路径 三次贝塞尔曲线公式:B(t)=(1-t)^3*

  • WPF中button按钮同时点击多次触发click解决方法

    解决WPF中button按钮同时点击多次触发click的方法,供大家参考,具体内容如下 DateTime lastClick = DateTime.Now; object obj = new object(); int i = 0; private void Button_Click(object sender, RoutedEventArgs e) { this.IsEnabled = false; var t = (DateTime.Now - lastClick).TotalMillise

  • WPF制作带小箭头的按钮完整代码

    什么是WPF WPF(Windows Presentation Foundation)是微软推出的基于Windows 的用户界面框架,属于.NET Framework 3.0的一部分.它提供了统一的编程模型.语言和框架,真正做到了分离界面设计人员与开发人员的工作:同时它提供了全新的多媒体交互用户图形界面. 在没给大家介绍实现代码之前,先给大家看下效果图,如果大家感觉效果不错,请参考实现代码: XAML代码: <ControlTemplate x:Key="btnTpl" Targ

  • WPF图片按钮的实现方法

    本文实例为大家分享了WPF图片按钮的实现代码,供大家参考,具体内容如下 直接代码 public class ImageButton : System.Windows.Controls.Button { /// <summary> /// 图片 /// </summary> public static readonly DependencyProperty ImageProperty = DependencyProperty.Register("Image", t

  • WPF自定义控件和样式之自定义按钮(Button)

    一.前言 程序界面上的按钮多种多样,常用的就这几种:普通按钮.图标按钮.文字按钮.图片文字混合按钮.本文章记录了不同样式类型的按钮实现方法.下面话不多说了,来一起看看详细的介绍吧. 二.固定样式的按钮 固定样式的按钮一般在临时使用时或程序的样式比较固定时才会使用,按钮整体样式不需要做大的改动. 2.1 普通按钮-扁平化风格 先看效果: 定义Button的样式,详见代码: <Style x:Key="BtnInfoStyle" TargetType="Button&quo

  • WPF微信聊天和通讯录按钮样式代码分享

    一.先用Path画一下轮廓 <Path Stroke="Red" StrokeThickness="1" Margin="10" StrokeDashCap="Round"> <Path.Data> <GeometryGroup> <PathGeometry Figures="M 4,40 A 16,13 0 1 1 10,45 L 3,48 Z" /> &l

  • WPF实现窗体中的悬浮按钮

    WPF实现窗体中的悬浮按钮,按钮可拖动,吸附停靠在窗体边缘. 控件XAML代码: <Button x:Class="SunCreate.Common.Controls.FloatButton" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmln

  • Android 中FloatingActionButton(悬浮按钮)实例详解

    Android 中FloatingActionButton(悬浮按钮)实例详解 一.介绍 这个类是继承自ImageView的,所以对于这个控件我们可以使用ImageView的所有属性 二.使用准备, 在as 的 build.grade文件中写上 compile 'com.android.support:design:22.2.0' 三.使用说明 <android.support.design.widget.FloatingActionButton android:id="@+id/floa

  • Android中FloatingActionButton实现悬浮按钮实例

    Android中FloatingActionButton(悬浮按钮) 使用不是特别多,常规性APP应用中很少使用该控件. 当然他的使用方法其实很简单.直接上代码: xml: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="

  • Android自定义APP全局悬浮按钮

    原本想通过framelayout实现一个悬浮在其他控件上的按钮,但是觉得很麻烦,需要各个界面都要动态填充.于是想到了悬浮窗,就自定一个ImageView用于显示全局按钮. 一.首先因为悬浮窗式的所以要添加权限,对于SDK>=23的需要动态获取权限,我这边用的是22的 <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" /> <uses-permission android:

  • Android开发中在TableView上添加悬浮按钮的方法

    如果直接在TableVIewController上贴Button的话会导致这个会随之滚动,下面解决在TableView上实现位置固定悬浮按钮的两种方法: 1.在view上贴tableView,然后将悬浮按钮贴在view的最顶层 2.使用window 首先看一下最终的效果,在tableViewController上添加一个悬浮按钮,该按钮不能随着视图的滚动而滚动 首先介绍上面的第一种方法: 1)创建tableview和底部按钮的属性 //屏幕宽 #define kScreenW [UIScreen

  • 使用准则进行条件查询--1.4.从窗体中选择查询的条件

    4.从窗体中选择查询的条件 前面的方法虽然简单,但对用户来说操作不够方便,对设计者来说也难以控制,如果通过窗体来实现,这些问题就可以解决了. 如下面的窗体,运行时用户可以在组合框中选择要查询司机的姓名,按下查询按钮就可以看到查询的结果. 下面详细地列出设计的步骤: 创建一个窗体,按下控件向导按钮,在窗体上添加一个组合框.在第一个对话框中选择"我想让组合框在一个表或查询中查找这些值",下一步. 选择一个为组合框提供数据的表或查询.下一步. 选择组合框中要显示的数据,通常除了选择要显示在组

  • Android利用悬浮按钮实现翻页效果

    今天给大家分享下自己用悬浮按钮点击实现翻页效果的例子. 首先,一个按钮要实现悬浮,就要用到系统顶级窗口相关的WindowManager,WindowManager.LayoutParams.那么在AndroidManifest.xml中添加权限: <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" /> 然后,我们要对WindowManager,WindowManager.Layout

  • Android自定义可拖拽的悬浮按钮DragFloatingActionButton

    悬浮按钮FloatingActionButton是Android 5.0系统添加的新控件,FloatingActionButton是继承至ImageView,所以FloatingActionButton拥有ImageView的所有属性.本文讲解的是一个实现了可拖拽的悬浮按钮,并为此添加了类似于qq的吸附边框的功能.在此之前,先了解下其简单的使用方式吧: 首先你得添加其依赖 compile 'com.android.support:design:25.3.1' 然后在布局文件中使用. <andro

  • Android悬浮按钮点击返回顶部FloatingActionButton

    先看一下Android悬浮按钮点击回到顶部的效果: FloatingActionButton是Design Support库中提供的一个控件,这个控件可以轻松实现悬浮按钮的效果 首先,要在项目中使用这个悬浮按钮就要先把design这个包导入项目 gradle中加入依赖 compile 'com.android.support:design:25.0.0' 接下来就是在xml中使用: 我这里是放置一个listView模拟返回顶部 <?xml version="1.0" encodi

  • 圣诞节,写个程序练练手————Android 全界面悬浮按钮实现

    开始我以为悬浮窗口,可以用Android中得PopupWindow 来实现,虽然也实现了,但局限性非常大.比如PopupWindow必须要有载体View,也就是说,必须要指定在那个View的上面来实现.以该View为相对位置,来显示PopupWindow.这就局限了其智能在用户交互的窗口上,相对的显示.而无法自由的拖动位置和在桌面显示. 于是查阅了一些资料,有两种实现方法.一种是自定义Toast,Toast是运行于所有界面之上的,也就是说没有界面可以覆盖它.另一种是Android中得Compat

随机推荐