
<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><DoubleAnimationStoryboard.TargetName="iconScaleTransform"Storyboard.TargetProperty="ScaleX"To="1.5" Duration="0:0:0.25"/><DoubleAnimationStoryboard.TargetName="iconScaleTransform"Storyboard.TargetProperty="ScaleY"To="1.5" Duration="0:0:0.25"/></Storyboard></BeginStoryboard></Trigger.EnterActions><Trigger.ExitActions><BeginStoryboard><Storyboard><DoubleAnimationStoryboard.TargetName="iconScaleTransform"Storyboard.TargetProperty="ScaleX"To="1" Duration="0:0:0.25"/><DoubleAnimationStoryboard.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><DoubleAnimationStoryboard.TargetName="iconScaleTransform"Storyboard.TargetProperty="ScaleX"To="1.5" Duration="0:0:0.25"/><DoubleAnimationStoryboard.TargetName="iconScaleTransform"Storyboard.TargetProperty="ScaleY"To="1.5" Duration="0:0:0.25"/></Storyboard></BeginStoryboard></Trigger.EnterActions><Trigger.ExitActions><BeginStoryboard><Storyboard><DoubleAnimationStoryboard.TargetName="iconScaleTransform"Storyboard.TargetProperty="ScaleX"To="1" Duration="0:0:0.25"/><DoubleAnimationStoryboard.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
{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){}}
}