【愚公系列】2023年06月 WPF运动控制平台-003.运动控制平台的UI设计

一、运动控制平台的UI设计

1.代码

<Window x:Class="MotionPlatform.MainWindow"
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:MotionPlatform"
mc:Ignorable="d"
Title="MainWindow" WindowStyle="None" ResizeMode="CanResizeWithGrip" AllowsTransparency="True"
WindowStartupLocation="CenterScreen"
Height="650" Width="1200" MouseLeftButtonDown="Window_MouseLeftButtonDown">
<Window.Resources>
<Style x:Key="FontStyle" TargetType="Label">
<Setter Property="FontFamily" Value="Microsoft YA Hei" />
<Setter Property="FontSize" Value="20" />
<Setter Property ="Foreground" Value ="#E2E6E9" />
</Style>
<Style TargetType ="Hyperlink">
<!-- 清除文字修饰(去掉下划线) -->
<Setter Property ="TextBlock.TextDecorations" Value ="{x:Null}" />
<Style.Triggers>
<Trigger Property ="IsMouseOver" Value ="True">
<!-- 在鼠标悬停时显示下划线 -->
<Setter Property ="TextBlock.TextDecorations">
<Setter.Value >
<TextDecorationCollection>
<TextDecoration Location ="Underline" />
</TextDecorationCollection>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="DataGrid">
<Setter Property="RowHeaderWidth" Value="0"></Setter>
<Setter Property="AutoGenerateColumns" Value="False"></Setter>
<Setter Property="CanUserAddRows" Value="False"></Setter>
<Setter Property="CanUserResizeColumns" Value="False"></Setter>
<Setter Property="CanUserResizeRows" Value="False"></Setter>
<Setter Property="HorizontalGridLinesBrush" Value="#496D87"></Setter>
<Setter Property="VerticalGridLinesBrush" Value="#496D87"></Setter>
<Setter Property="IsReadOnly" Value="True"></Setter>
<Setter Property="BorderThickness" Value="0"></Setter>
<Setter Property="BorderBrush" Value="#496D87"></Setter>
<Setter Property="RowHeight" Value="30"></Setter>
<Setter Property="VerticalScrollBarVisibility" Value="Auto"></Setter>
<Setter Property="Background" Value="#365B74"></Setter>
</Style>
<!--DataGrid表头样式-->
<Style TargetType="DataGridColumnHeader">
<Setter Property="Foreground" Value="#6F899D" />
<Setter Property="FontSize" Value="14"></Setter>
<Setter Property="Background" Value="#365B74"></Setter>
<Setter Property="BorderThickness" Value="0 0 0 1"></Setter>
<Setter Property="BorderBrush" Value="#496D87"></Setter>
<Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
<Setter Property="Height" Value="30" />
</Style>
<Style TargetType="Button">
<Setter Property="Width" Value="80" />
<Setter Property="Height" Value="32" />
<Setter Property="Background" Value="#AAAAAA" />
<Setter Property="Foreground" Value="#DADADA" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Border" CornerRadius="5" Background="{TemplateBinding Background}" TextBlock.Foreground="{TemplateBinding Foreground}">
<!--设置控件的边框，圆角，背景色，字体颜色-->
<ContentPresenter Margin="{TemplateBinding Padding}" HorizontalAlignment="Center" VerticalAlignment="Center">
<!--显示控件的内容-->
</ContentPresenter>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#faa755"/>
<Setter Property="Foreground" Value="#FADCB2"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="#F29701"/>
<Setter Property="Foreground" Value="#FADCB2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Grid.Background>
<LinearGradientBrush StartPoint="1, 0" EndPoint="0 , 1">
<GradientStop Color="#365B74" Offset="0.2" />
<GradientStop Color="#4A6E87" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="2.5*" />
<RowDefinition Height="0.4*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="0.3*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Border BorderBrush="#74848F" BorderThickness="0 0 0 2" Margin="30 0 30 0" />
<Image Width="60" Height="45" Margin="30 0 20 0" HorizontalAlignment="Left" Source="pack://application:,,,/MotionPlatform;component/Assets/Images/logo.png" />
<Label Margin="100 0 0 0" HorizontalAlignment="Left" Style="{StaticResource FontStyle}" Content="朝夕运动控制平台" Foreground="#E2E6E9" VerticalAlignment="Center" />
<TextBlock HorizontalAlignment="Right" FontSize="16" Margin="0 0 30 0" VerticalAlignment="Center">
<Hyperlink Foreground="#FFEAE5E3" Click="Hyperlink_Click">[退出]</Hyperlink>
</TextBlock>
</Grid>
<Grid Grid.Row="1" Margin="50 10 50 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Border Margin="5" BorderBrush="#569BAC" CornerRadius="5" BorderThickness="1" Grid.Column="0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Line X1="8" Y1="8" X2="8" Y2="30" Stroke="#00F6FB" StrokeThickness="4" />
<TextBlock Margin="20 0 0 0" Text="实时状态" FontSize="20" Foreground="#9FB1BF" HorizontalAlignment="Center" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Grid.Row="1">
<TextBlock Text="当前位置" Margin="30 0" FontSize="14" Foreground="#718A9F" />
<WrapPanel Margin="90 0 0 0">
<TextBlock Text="100" FontSize="30" Foreground="#C1CCD5" />
<TextBlock Margin="20 5 0 0" Text="cm" VerticalAlignment="Center" FontSize="18" Foreground="#9DAFBC" />
</WrapPanel>
</StackPanel>
<StackPanel Grid.Row="2">
<TextBlock Text="当前速度" Margin="30 0" FontSize="14" Foreground="#718A9F" />
<WrapPanel Margin="90 0 0 0">
<TextBlock Text="100" FontSize="30" Foreground="#C1CCD5" />
<TextBlock Margin="20 5 0 0" Text="cm/s" VerticalAlignment="Center" FontSize="18" Foreground="#9DAFBC" />
</WrapPanel>
</StackPanel>
<StackPanel Grid.Row="3">
<TextBlock Text="运动状态" Margin="30 0" FontFamily="Microsoft Ya Hei" FontSize="14" Foreground="#718A9F" />
<WrapPanel Margin="90 0 0 0">
<TextBlock Text="运行" FontSize="30" Foreground="#4DCBA8" />
</WrapPanel>
</StackPanel>
</Grid>
</Border>
<Border Margin="5" BorderBrush="#569BAC" CornerRadius="5" BorderThickness="1" Grid.Column="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Line X1="8" Y1="8" X2="8" Y2="30" Stroke="#00F6FB" StrokeThickness="4" />
<TextBlock Margin="20 0 0 0" Text="实时信息提示" FontSize="20" Foreground="#9FB1BF" HorizontalAlignment="Center" VerticalAlignment="Center" />
</StackPanel>
<DataGrid Margin="1" Grid.Row="1">
<DataGrid.Columns>
<DataGridTextColumn Width="*" Binding="{Binding UserName}" Header="时间"/>
<DataGridTextColumn Width="5*" Binding="{Binding UserAccount}" Header="消息"/>
<DataGridTextColumn Width="*" Binding="{Binding UserPasswd}" Header="类型"/>
<DataGridTextColumn Width="*" Binding="{Binding UserPhone}" Header="等级"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
</Border>
<Border Margin="5" BorderBrush="#569BAC" CornerRadius="5" BorderThickness="1" Grid.Column="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Line X1="8" Y1="8" X2="8" Y2="30" Stroke="#00F6FB" StrokeThickness="4" />
<TextBlock Margin="20 0 0 0" Text="参数配置" FontSize="20" Foreground="#9FB1BF" HorizontalAlignment="Center" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Grid.Row="1">
<TextBlock Text="取料速度" Margin="30 0 0 8" FontSize="14" Foreground="#718A9F" />
<WrapPanel>
<TextBox VerticalContentAlignment="Center" HorizontalContentAlignment="Left" Margin="30 0 0 0" Background="#CFD7DD" Width="150">
<TextBox.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="5"/>
</Style>
</TextBox.Resources>
</TextBox>
<TextBlock Margin="20 5 0 0" Text="cm/s" VerticalAlignment="Center" FontSize="18" Foreground="#9DAFBC" />
</WrapPanel>
</StackPanel>
<StackPanel Grid.Row="2">
<TextBlock Text="加工速度" Margin="30 0 0 8" FontSize="14" Foreground="#718A9F" />
<WrapPanel>
<TextBox VerticalContentAlignment="Center" HorizontalContentAlignment="Left" Margin="30 0 0 0" Background="#CFD7DD" Width="150">
<TextBox.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="5"/>
</Style>
</TextBox.Resources>
</TextBox>
<TextBlock Margin="20 5 0 0" Text="cm/s" VerticalAlignment="Center" FontSize="18" Foreground="#9DAFBC" />
</WrapPanel>
</StackPanel>
<StackPanel Grid.Row="3">
<TextBlock Text="加工位置" Margin="30 0 0 8" FontSize="14" Foreground="#718A9F" />
<WrapPanel>
<TextBox VerticalContentAlignment="Center" HorizontalContentAlignment="Left" Margin="30 0 0 0" Background="#CFD7DD" Width="150">
<TextBox.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="5"/>
</Style>
</TextBox.Resources>
</TextBox>
<TextBlock Margin="20 5 0 0" Text="cm" VerticalAlignment="Center" FontSize="18" Foreground="#9DAFBC" />
</WrapPanel>
</StackPanel>
</Grid>
</Border>
</Grid>
<Grid Grid.Row="2" Margin="50 0 50 0" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="0.6*"/>
<ColumnDefinition Width="0.6*"/>
<ColumnDefinition Width="0.6*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Width="130" Content="启动系统" Grid.Column="0" />
<Button Content="去取料" Grid.Column="1" />
<Button Content="去打包" Grid.Column="2" />
<Button Content="贴标签" Grid.Column="3"/>
<WrapPanel Grid.Column="5" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock Text="去取料" VerticalAlignment="Center" Foreground="#BBC2C8" />
<Rectangle Margin="10 0 0 0" Width="80" Height="35" Fill="#BBC2C8" RadiusX="5" RadiusY="5" />
</WrapPanel>
<WrapPanel Grid.Column="6" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock Text="去打包" VerticalAlignment="Center" Foreground="#BBC2C8" />
<Rectangle Margin="10 0 0 0" Width="80" Height="35" Fill="#BBC2C8" RadiusX="5" RadiusY="5" />
</WrapPanel>
<WrapPanel Grid.Column="7" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock Text="贴标签" VerticalAlignment="Center" Foreground="#BBC2C8" />
<Rectangle Margin="10 0 0 0" Width="80" Height="35" Fill="#BBC2C8" RadiusX="5" RadiusY="5" />
</WrapPanel>
</Grid>
<Grid Grid.Row="3">
<Border BorderBrush="#1A305F" BorderThickness="0 0 0 10" />
<Canvas>
<Viewbox Name="MoveRegion" Width="100" Height="100" Canvas.Left="550" Canvas.Top="125">
<Grid>
<Path Data="M254.464 668.672c-60.928 0-110.592 49.664-110.592 110.592 0 60.928 49.664 110.592 110.592 110.592 60.928 0 110.592-49.664 110.592-110.592-0.512-61.44-49.664-110.592-110.592-110.592z" Fill="#135173" />
<Path Data="M850.944 487.936h-20.992l-194.56-206.336-0.512-0.512c-24.064-24.576-57.344-38.4-91.648-37.888h-245.76c-43.008 0-82.944 22.016-105.984 58.368l-1.024 1.536-84.48 184.832h-50.176c-28.16 0-50.688 22.528-50.688 50.688v135.168c0 60.416 48.128 110.08 108.032 112.64v-7.168c0-77.824 62.976-141.312 141.312-141.312s141.312 62.976 141.312 141.312v7.168h262.144v-7.168c1.536-77.824 66.048-139.776 144.384-138.24 75.776 1.536 136.704 62.464 138.24 138.24v7.168h34.304c23.552 0 43.008-19.456 43.008-43.008v-90.112c-0.512-91.648-75.264-165.376-166.912-165.376z m-677.376 0L244.736 332.8c11.776-17.408 31.744-28.16 52.736-28.16H404.48v183.296H173.568z m292.352 0V304.64h76.8c17.92 0 35.328 7.168 48.128 19.968l154.624 163.328H465.92z" Fill="#135173" />
<Path Data="M798.72 668.672c-60.928 0-110.592 49.664-110.592 110.592 0 60.928 49.664 110.592 110.592 110.592 60.928 0 110.592-49.664 110.592-110.592 0-61.44-49.664-110.592-110.592-110.592z" Fill="#135173" />
</Grid>
</Viewbox>
<StackPanel Canvas.Left="85" Canvas.Top="40">
<Ellipse Fill="#A0A0A0" Width="20" Height="20" />
<Line X1="10" Y1="3" X2="10" Y2="150" Stroke="#A5AEB4" StrokeThickness="2" StrokeDashArray="7" />
</StackPanel>
<StackPanel Canvas.Left="585" Canvas.Top="40">
<Ellipse Fill="#A0A0A0" Width="20" Height="20" />
<Line X1="10" Y1="3" X2="10" Y2="150" Stroke="#A5AEB4" StrokeThickness="2" StrokeDashArray="7" />
</StackPanel>
<StackPanel Canvas.Left="765" Canvas.Top="40">
<Ellipse Fill="#A0A0A0" Width="20" Height="20" />
<Line X1="10" Y1="3" X2="10" Y2="150" Stroke="#A5AEB4" StrokeThickness="2" StrokeDashArray="7" />
</StackPanel>
<StackPanel Canvas.Left="1085" Canvas.Top="40">
<Ellipse Fill="#A0A0A0" Width="20" Height="20" />
<Line X1="10" Y1="3" X2="10" Y2="150" Stroke="#A5AEB4" StrokeThickness="2" StrokeDashArray="7" />
</StackPanel>
</Canvas>
</Grid>
<Canvas Grid.Row="4" Background="#91A6B4" Margin="0 2 0 0">
<TextBlock Canvas.Left="80" Canvas.Top="6" Text="取料" FontSize="16" Foreground="#DEE4E8" />
<TextBlock Canvas.Left="580" Canvas.Top="6" Text="原点" FontSize="16" Foreground="#DEE4E8" />
<TextBlock Canvas.Left="750" Canvas.Top="6" Text="贴标签" FontSize="16" Foreground="#DEE4E8" />
<TextBlock Canvas.Left="1080" Canvas.Top="6" Text="打包" FontSize="16" Foreground="#DEE4E8" />
</Canvas>
</Grid>
</Window>

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

namespace MotionPlatform
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}

private void Hyperlink_Click(object sender, RoutedEventArgs e)
{

}

private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
this.DragMove();
}
}
}

2.效果