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

1. <Window x:Class="DataParser.FlowView"
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6.         xmlns:local="clr-namespace:DataParser"
7.         xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
8.         xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
9.         xmlns:bl="clr-namespace:BehaviorsModule;assembly=BehaviorsModule"
10.         mc:Ignorable="d"
11.         Title="FlowView"
12.         Background="Transparent"
13.         WindowStyle="None"
14.         AllowsTransparency="True"
15.         BorderThickness="0" ShowInTaskbar="False">
17.     <i:Interaction.Behaviors>
18.         <bl:MoveViewBehavior/>
19.     </i:Interaction.Behaviors>
21.     <Grid  Background="Transparent">
22.         <Grid.ColumnDefinitions>
23.             <ColumnDefinition  Width="auto"></ColumnDefinition>
24.             <ColumnDefinition  Width="auto"></ColumnDefinition>
25.         </Grid.ColumnDefinitions>
27.         <ToggleButton x:Name="toggleBtn"
28.                       VerticalAlignment="Top" Width="34" Height="34" Padding="0"
29.                       Checked="toggleBtn_Checked">
30.             <ToggleButton.ContextMenu>
31.                 <ContextMenu>
32.                     <MenuItem Header="Clear" Command="{Binding ClearMessageCommand}" CommandParameter="ReceivedData" FontSize="12" Height="30" Width="80" VerticalAlignment="Top"  HorizontalAlignment="Left" >
33.                         <MenuItem.Template>
34.                             <ControlTemplate>
35.                                 <Button Width="50" Height="30"/>
36.                             </ControlTemplate>
37.                         </MenuItem.Template>
38.                         
39.                     </MenuItem>
40.                 </ContextMenu>
41.             </ToggleButton.ContextMenu>
43.             <ToggleButton.Template>
44.                 <ControlTemplate>
45.                     <Border Background="AliceBlue" BorderThickness="1" CornerRadius="15">
46.                         <iconPacks:PackIconVaadinIcons Kind="DotCircle" x:Name="PackIconFileIcon" Foreground="#FF6AFCFF"
47.                                                        HorizontalAlignment="Center" VerticalAlignment="Center"
48.                                                        Height="20" Width="20">
49.                             <iconPacks:PackIconVaadinIcons.RenderTransformOrigin>
50.                                 <Point X="0.5" Y="0.5"/>
51.                             </iconPacks:PackIconVaadinIcons.RenderTransformOrigin>
52.                             <iconPacks:PackIconVaadinIcons.RenderTransform>
53.                                 <ScaleTransform ScaleX="1" ScaleY="1" x:Name="iconScaleTransform" />
54.                             </iconPacks:PackIconVaadinIcons.RenderTransform>
55.                         </iconPacks:PackIconVaadinIcons>
56.                     </Border>
58.                     <ControlTemplate.Triggers>
59.                         <Trigger Property="IsMouseOver" Value="True">
60.                             <Trigger.EnterActions>
61.                                 <BeginStoryboard>
62.                                     <Storyboard>
63.                                         <DoubleAnimation
64.                                     Storyboard.TargetName="iconScaleTransform"
65.                                     Storyboard.TargetProperty="ScaleX"
66.                                     To="1.5" Duration="0:0:0.25"/>
67.                                         <DoubleAnimation
68.                                     Storyboard.TargetName="iconScaleTransform"
69.                                     Storyboard.TargetProperty="ScaleY"
70.                                     To="1.5" Duration="0:0:0.25"/>
71.                                     </Storyboard>
72.                                 </BeginStoryboard>
73.                             </Trigger.EnterActions>
74.                             <Trigger.ExitActions>
75.                                 <BeginStoryboard>
76.                                     <Storyboard>
77.                                         <DoubleAnimation
78.                                     Storyboard.TargetName="iconScaleTransform"
79.                                     Storyboard.TargetProperty="ScaleX"
80.                                     To="1" Duration="0:0:0.25"/>
81.                                         <DoubleAnimation
82.                                     Storyboard.TargetName="iconScaleTransform"
83.                                     Storyboard.TargetProperty="ScaleY"
84.                                     To="1" Duration="0:0:0.25"/>
85.                                     </Storyboard>
86.                                 </BeginStoryboard>
87.                             </Trigger.ExitActions>
88.                         </Trigger>
89.                     </ControlTemplate.Triggers>
91.                 </ControlTemplate>
92.             </ToggleButton.Template>
93.         </ToggleButton>
94.     </Grid>
95. </Window>

复制代码

1. Window 界说

1. <Window x:Class="DataParser.FlowView"
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6.         xmlns:local="clr-namespace:DataParser"
7.         xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
8.         xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
9.         xmlns:bl="clr-namespace:BehaviorsModule;assembly=BehaviorsModule"
10.         mc:Ignorable="d"
11.         Title="FlowView"
12.         Background="Transparent"
13.         WindowStyle="None"
14.         AllowsTransparency="True"
15.         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

1. <i:Interaction.Behaviors>
2.     <bl:MoveViewBehavior/>
3. </i:Interaction.Behaviors>

复制代码

• Interaction.Behaviors: 使用 System.Windows.Interactivity 库来为窗口添加行为。
  
• bl:MoveViewBehavior: 自界说行为，允许用户通过拖动窗口移动它。
  

3. Grid 布局

1. <Grid Background="Transparent">
2.     <Grid.ColumnDefinitions>
3.         <ColumnDefinition Width="auto"></ColumnDefinition>
4.         <ColumnDefinition Width="auto"></ColumnDefinition>
5.     </Grid.ColumnDefinitions>

复制代码

• Grid: 界说了一个透明的网格布局。
  
• Grid.ColumnDefinitions: 界说了两列，宽度均为主动调整（auto）。
  

4. ToggleButton

1. <ToggleButton x:Name="toggleBtn"
2.               VerticalAlignment="Top" Width="34" Height="34" Padding="0"
3.               Checked="toggleBtn_Checked">

复制代码

• ToggleButton: 界说了一个切换按钮，命名为 toggleBtn。
  
• VerticalAlignment=“Top”: 按钮垂直对齐到顶部。
  
• Width=“34” Height=“34” Padding=“0”: 设置按钮的宽度和高度为34，内边距为0。
  
• Checked=“toggleBtn_Checked”: 当按钮被选中时，触发 toggleBtn_Checked 事件处置惩罚步伐。
  

5. ContextMenu

1. <ToggleButton.ContextMenu>
2.     <ContextMenu>
3.         <MenuItem Header="Clear" Command="{Binding ClearMessageCommand}" CommandParameter="ReceivedData" FontSize="12" Height="30" Width="80" VerticalAlignment="Top"  HorizontalAlignment="Left">
4.             <MenuItem.Template>
5.                 <ControlTemplate>
6.                     <Button Width="50" Height="30"/>
7.                 </ControlTemplate>
8.             </MenuItem.Template>
9.         </MenuItem>
10.     </ContextMenu>
11. </ToggleButton.ContextMenu>

复制代码

• ContextMenu: 为 ToggleButton 界说了一个上下文菜单。
  
• MenuItem Header=“Clear”: 菜单项的标题为 “Clear”，绑定了一个命令 ClearMessageCommand，参数为 ReceivedData。
  
• ControlTemplate: 界说了一个模板，使得菜单项看起来像一个按钮。
  

6. ToggleButton 的模板

1. <ToggleButton.Template>
2.     <ControlTemplate>
3.         <Border Background="AliceBlue" BorderThickness="1" CornerRadius="15">
4.             <iconPacks:PackIconVaadinIcons Kind="DotCircle" x:Name="PackIconFileIcon" Foreground="#FF6AFCFF"
5.                                            HorizontalAlignment="Center" VerticalAlignment="Center"
6.                                            Height="20" Width="20">
7.                 <iconPacks:PackIconVaadinIcons.RenderTransformOrigin>
8.                     <Point X="0.5" Y="0.5"/>
9.                 </iconPacks:PackIconVaadinIcons.RenderTransformOrigin>
10.                 <iconPacks:PackIconVaadinIcons.RenderTransform>
11.                     <ScaleTransform ScaleX="1" ScaleY="1" x:Name="iconScaleTransform" />
12.                 </iconPacks:PackIconVaadinIcons.RenderTransform>
13.             </iconPacks:PackIconVaadinIcons>
14.         </Border>
16.         <ControlTemplate.Triggers>
17.             <Trigger Property="IsMouseOver" Value="True">
18.                 <Trigger.EnterActions>
19.                     <BeginStoryboard>
20.                         <Storyboard>
21.                             <DoubleAnimation
22.                         Storyboard.TargetName="iconScaleTransform"
23.                         Storyboard.TargetProperty="ScaleX"
24.                         To="1.5" Duration="0:0:0.25"/>
25.                             <DoubleAnimation
26.                         Storyboard.TargetName="iconScaleTransform"
27.                         Storyboard.TargetProperty="ScaleY"
28.                         To="1.5" Duration="0:0:0.25"/>
29.                         </Storyboard>
30.                     </BeginStoryboard>
31.                 </Trigger.EnterActions>
32.                 <Trigger.ExitActions>
33.                     <BeginStoryboard>
34.                         <Storyboard>
35.                             <DoubleAnimation
36.                         Storyboard.TargetName="iconScaleTransform"
37.                         Storyboard.TargetProperty="ScaleX"
38.                         To="1" Duration="0:0:0.25"/>
39.                             <DoubleAnimation
40.                         Storyboard.TargetName="iconScaleTransform"
41.                         Storyboard.TargetProperty="ScaleY"
42.                         To="1" Duration="0:0:0.25"/>
43.                         </Storyboard>
44.                     </BeginStoryboard>
45.                 </Trigger.ExitActions>
46.             </Trigger>
47.         </ControlTemplate.Triggers>
49.     </ControlTemplate>
50. </ToggleButton.Template>

复制代码

• ControlTemplate: 界说了 ToggleButton 的外观。
  
• Border: 设置了一个带圆角的边框，配景为 AliceBlue。
  
• PackIconVaadinIcons: 使用了 MahApps.Metro.IconPacks 库中的图标，类型为 DotCircle。
  
• ScaleTransform: 界说了一个缩放变换，初始缩放比例为1。
  
• ControlTemplate.Triggers: 界说了一个触发器，当鼠标悬停在按钮上时，图标的缩放比例变为1.5，鼠标移开后恢复为1。
  

1. using System;
3. namespace DataParser
4. {
5.     /// <summary>
6.     /// FlowView.xaml 的交互逻辑
7.     /// </summary>
8.     public partial class FlowView : Window
9.     {
10.         public FlowView()
11.         {
12.             InitializeComponent();
13.             InitializeFormPosition();
14.         }
16.         private void InitializeFormPosition()
17.         {
18.             var workingArea = SystemParameters.WorkArea;
19.             double screenWidth = workingArea.Width;
20.             double screenHeight = workingArea.Height;
22.             double x = screenWidth / 1.2;
23.             double y = screenHeight  /9;
25.             this.Left = x;
26.             this.Top = y;
27.         }
29.         private void toggleBtn_Checked(object sender, RoutedEventArgs e)
30.         {
32.         }
34.     }
35. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。