wpf 重绘一个浮动的圆形按钮

ou.cs2024-12-30 10:13
html 复制代码 
<Window x:Class="DataParser.FlowView"
        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:DataParser"
        xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
        xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
        xmlns:bl="clr-namespace:BehaviorsModule;assembly=BehaviorsModule"
        mc:Ignorable="d"
        Title="FlowView"
        Background="Transparent" 
        WindowStyle="None"
        AllowsTransparency="True"
        BorderThickness="0" ShowInTaskbar="False">

    <i:Interaction.Behaviors>
        <bl:MoveViewBehavior/>
    </i:Interaction.Behaviors>

    <Grid  Background="Transparent">
        <Grid.ColumnDefinitions>
            <ColumnDefinition  Width="auto"></ColumnDefinition>
            <ColumnDefinition  Width="auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <ToggleButton x:Name="toggleBtn" 
                      VerticalAlignment="Top" Width="34" Height="34" Padding="0"
                      Checked="toggleBtn_Checked">
            <ToggleButton.ContextMenu>
                <ContextMenu>
                    <MenuItem Header="Clear" Command="{Binding ClearMessageCommand}" CommandParameter="ReceivedData" FontSize="12" Height="30" Width="80" VerticalAlignment="Top"  HorizontalAlignment="Left" >
                        <MenuItem.Template>
                            <ControlTemplate>
                                <Button Width="50" Height="30"/>
                            </ControlTemplate>
                        </MenuItem.Template>
                        
                    </MenuItem>
                </ContextMenu>
            </ToggleButton.ContextMenu>

            <ToggleButton.Template>
                <ControlTemplate>
                    <Border Background="AliceBlue" BorderThickness="1" CornerRadius="15">
                        <iconPacks:PackIconVaadinIcons Kind="DotCircle" x:Name="PackIconFileIcon" Foreground="#FF6AFCFF"
                                                       HorizontalAlignment="Center" VerticalAlignment="Center" 
                                                       Height="20" Width="20">
                            <iconPacks:PackIconVaadinIcons.RenderTransformOrigin>
                                <Point X="0.5" Y="0.5"/>
                            </iconPacks:PackIconVaadinIcons.RenderTransformOrigin>
                            <iconPacks:PackIconVaadinIcons.RenderTransform>
                                <ScaleTransform ScaleX="1" ScaleY="1" x:Name="iconScaleTransform" />
                            </iconPacks:PackIconVaadinIcons.RenderTransform>
                        </iconPacks:PackIconVaadinIcons>
                    </Border>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                    Storyboard.TargetName="iconScaleTransform"
                                    Storyboard.TargetProperty="ScaleX"
                                    To="1.5" Duration="0:0:0.25"/>
                                        <DoubleAnimation
                                    Storyboard.TargetName="iconScaleTransform"
                                    Storyboard.TargetProperty="ScaleY"
                                    To="1.5" Duration="0:0:0.25"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                    Storyboard.TargetName="iconScaleTransform"
                                    Storyboard.TargetProperty="ScaleX"
                                    To="1" Duration="0:0:0.25"/>
                                        <DoubleAnimation
                                    Storyboard.TargetName="iconScaleTransform"
                                    Storyboard.TargetProperty="ScaleY"
                                    To="1" Duration="0:0:0.25"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </ToggleButton.Template>
        </ToggleButton>
    </Grid>
</Window>

1. Window 定义

xml 复制代码 
<Window x:Class="DataParser.FlowView"
        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:DataParser"
        xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
        xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
        xmlns:bl="clr-namespace:BehaviorsModule;assembly=BehaviorsModule"
        mc:Ignorable="d"
        Title="FlowView"
        Background="Transparent" 
        WindowStyle="None"
        AllowsTransparency="True"
        BorderThickness="0" ShowInTaskbar="False">
  • x:Class="DataParser.FlowView" : 指定窗口的类名为 FlowView，位于 DataParser 命名空间。
  • xmlns : 定义了多个 XML 命名空间，包括 WPF 核心命名空间、XAML 命名空间、Blend 设计器命名空间、以及一些自定义命名空间（如 iconPacks、i、bl）。
  • Title="FlowView" : 设置窗口的标题为 FlowView。
  • Background="Transparent": 设置窗口背景为透明。
  • WindowStyle="None": 设置窗口样式为无边框。
  • AllowsTransparency="True": 允许窗口透明。
  • BorderThickness="0": 设置窗口边框厚度为0。
  • ShowInTaskbar="False": 窗口不显示在任务栏上。

2. Interaction.Behaviors

xml 复制代码 
<i:Interaction.Behaviors>
    <bl:MoveViewBehavior/>
</i:Interaction.Behaviors>
  • Interaction.Behaviors : 使用 System.Windows.Interactivity 库来为窗口添加行为。
  • bl:MoveViewBehavior: 自定义行为，允许用户通过拖动窗口移动它。

3. Grid 布局

xml 复制代码 
<Grid Background="Transparent">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"></ColumnDefinition>
        <ColumnDefinition Width="auto"></ColumnDefinition>
    </Grid.ColumnDefinitions>
  • Grid: 定义了一个透明的网格布局。
  • Grid.ColumnDefinitions : 定义了两列，宽度均为自动调整（auto）。

4. ToggleButton

xml 复制代码 
<ToggleButton x:Name="toggleBtn" 
              VerticalAlignment="Top" Width="34" Height="34" Padding="0"
              Checked="toggleBtn_Checked">
  • ToggleButton : 定义了一个切换按钮，命名为 toggleBtn。
  • VerticalAlignment="Top": 按钮垂直对齐到顶部。
  • Width="34" Height="34" Padding="0": 设置按钮的宽度和高度为34，内边距为0。
  • Checked="toggleBtn_Checked" : 当按钮被选中时，触发 toggleBtn_Checked 事件处理程序。

5. ContextMenu

xml 复制代码 
<ToggleButton.ContextMenu>
    <ContextMenu>
        <MenuItem Header="Clear" Command="{Binding ClearMessageCommand}" CommandParameter="ReceivedData" FontSize="12" Height="30" Width="80" VerticalAlignment="Top"  HorizontalAlignment="Left">
            <MenuItem.Template>
                <ControlTemplate>
                    <Button Width="50" Height="30"/>
                </ControlTemplate>
            </MenuItem.Template>
        </MenuItem>
    </ContextMenu>
</ToggleButton.ContextMenu>
  • ContextMenu : 为 ToggleButton 定义了一个上下文菜单。
  • MenuItem Header="Clear" : 菜单项的标题为 "Clear"，绑定了一个命令 ClearMessageCommand，参数为 ReceivedData。
  • ControlTemplate: 定义了一个模板，使得菜单项看起来像一个按钮。

6. ToggleButton 的模板

xml 复制代码 
<ToggleButton.Template>
    <ControlTemplate>
        <Border Background="AliceBlue" BorderThickness="1" CornerRadius="15">
            <iconPacks:PackIconVaadinIcons Kind="DotCircle" x:Name="PackIconFileIcon" Foreground="#FF6AFCFF"
                                           HorizontalAlignment="Center" VerticalAlignment="Center" 
                                           Height="20" Width="20">
                <iconPacks:PackIconVaadinIcons.RenderTransformOrigin>
                    <Point X="0.5" Y="0.5"/>
                </iconPacks:PackIconVaadinIcons.RenderTransformOrigin>
                <iconPacks:PackIconVaadinIcons.RenderTransform>
                    <ScaleTransform ScaleX="1" ScaleY="1" x:Name="iconScaleTransform" />
                </iconPacks:PackIconVaadinIcons.RenderTransform>
            </iconPacks:PackIconVaadinIcons>
        </Border>

        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                        Storyboard.TargetName="iconScaleTransform"
                        Storyboard.TargetProperty="ScaleX"
                        To="1.5" Duration="0:0:0.25"/>
                            <DoubleAnimation
                        Storyboard.TargetName="iconScaleTransform"
                        Storyboard.TargetProperty="ScaleY"
                        To="1.5" Duration="0:0:0.25"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                        Storyboard.TargetName="iconScaleTransform"
                        Storyboard.TargetProperty="ScaleX"
                        To="1" Duration="0:0:0.25"/>
                            <DoubleAnimation
                        Storyboard.TargetName="iconScaleTransform"
                        Storyboard.TargetProperty="ScaleY"
                        To="1" Duration="0:0:0.25"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
        </ControlTemplate.Triggers>

    </ControlTemplate>
</ToggleButton.Template>
  • ControlTemplate : 定义了 ToggleButton 的外观。
  • Border : 设置了一个带圆角的边框，背景为 AliceBlue。
  • PackIconVaadinIcons : 使用了 MahApps.Metro.IconPacks 库中的图标，类型为 DotCircle。
  • ScaleTransform: 定义了一个缩放变换，初始缩放比例为1。
  • ControlTemplate.Triggers: 定义了一个触发器，当鼠标悬停在按钮上时，图标的缩放比例变为1.5，鼠标移开后恢复为1。
csharp 复制代码 
using System;

namespace DataParser
{
    /// <summary>
    /// FlowView.xaml 的交互逻辑
    /// </summary>
    public partial class FlowView : Window
    {
        public FlowView()
        {
            InitializeComponent();
            InitializeFormPosition();
        }

        private void InitializeFormPosition()
        {
            var workingArea = SystemParameters.WorkArea;
            double screenWidth = workingArea.Width;
            double screenHeight = workingArea.Height;

            double x = screenWidth / 1.2;
            double y = screenHeight  /9;

            this.Left = x;
            this.Top = y;
        }

        private void toggleBtn_Checked(object sender, RoutedEventArgs e)
        {

        }

    }
}
相关推荐
one9969 小时前
WPF-绑定
microsoft·c#·.net·wpf
one99616 小时前
WPF 数据绑定中的通知机制及其性能考虑
c#·.net·wpf
△曉風殘月〆21 小时前
WPF自定义任务栏缩略图
wpf·dwm·任务栏
weixin_464078072 天前
WPF使用ContentControl控件实现区域导航，并使用Prism依赖注入优化
wpf
桂月二二2 天前
深入解析Reactive Programming框架在微服务中的最新应用
微服务·架构·wpf
军训猫猫头2 天前
31.九个按钮排列 C#例子 WPF例子
ui·c#·wpf
桂月二二3 天前
探讨面向未来的框架新技术：逻辑驱动和自适应框架的突破
wpf
△曉風殘月〆3 天前
WPF中的Microsoft XAML Behaviors包功能详解
wpf·xaml·behavior
喜欢猪猪4 天前
Apollo中间件技术：从入门到精通
wpf
Thinbug4 天前
WFP Listbox绑定数据后，数据变化的刷新
wpf·listbox
热门推荐
01Matlab|参与辅助服务的用户侧储能优化配置及经济分析02半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)03HCIA-datacom数通题库和录播视频资料04Docker--Bitnami/redis05【漏洞复现】CVE-2015-3337 Arbitrary File Reading06优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间07渗透测试之SQLMAP工具详解 kali自带SQLmap解释 重点sqlmap --tamper 使用方式详解 搞完你就很nice了08新手学习VR全景需要知道的几个问题09玄机平台应急响应—webshell查杀10ubuntu22.04.5本地apt源部署