wpf 重绘一个浮动的圆形按钮
https://i-blog.csdnimg.cn/direct/101b7534015a41e2bfe2a1e1b0c6061f.gif<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>
<GridBackground="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinitionWidth="auto"></ColumnDefinition>
<ColumnDefinitionWidth="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 界说
<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
<i:Interaction.Behaviors>
<bl:MoveViewBehavior/>
</i:Interaction.Behaviors>
[*]Interaction.Behaviors: 使用 System.Windows.Interactivity 库来为窗口添加行为。
[*]bl:MoveViewBehavior: 自界说行为，允许用户通过拖动窗口移动它。
3. Grid 布局
<Grid Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
[*]Grid: 界说了一个透明的网格布局。
[*]Grid.ColumnDefinitions: 界说了两列，宽度均为主动调整（auto）。
4. ToggleButton
<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
<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 的模板
<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。
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)
{
}
}
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]