12/30
C/S结构用户界面设计
【实验编号】
10003809547j 图形用户界面设计
【实验学时】
8学时
【实验环境】
l 所需硬件环境为微机；
l 所需软件环境为Microsoft Visual Studio 2013
【实验内容】
课程要求用winform设计图形用户界面，但是我先找到的教程是WPF，对WPF比较感兴趣，就用WPF进行实验了。
1.登录界面设计 550 * 800 单独窗口
2.参考后台管理界面写的主界面（700*1300单独窗口）由 左侧导航栏 + 头部信息栏组成
3.Dashboard页面是几个图表展示
4.点击上方Add进入新增页面填写信息点击save保存
5.
【关键步骤】
封装样式：
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:fa="http://schemas.awesome.incremented/wpf/xaml/fontawesome.sharp">
<Style x:Key="menuButton" TargetType="RadioButton">
<Setter Property="Height" Value="50"/>
<Setter Property="Margin" Value="-5,0,0,5"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource plainTextColor3}"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border Background="{TemplateBinding Background}"
BorderThickness="4,0,0,0"
BorderBrush="{TemplateBinding BorderBrush}">
<ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<!-- Mouse over back color-->
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Margin" Value="0,0,0,5"/>
<Setter Property="Background" Value="{StaticResource panelOverColor}"/>
<Setter Property="Foreground" Value="{StaticResource titleColor3}"/>
<Setter Property="BorderBrush" Value="{Binding Path=Tag, RelativeSource={RelativeSource Self}}"/>
</Trigger>
<!-- Active button back color-->
<Trigger Property="IsChecked" Value="True">
<Setter Property="Margin" Value="0,0,0,5"/>
<Setter Property="Background" Value="{StaticResource panelActiveColor}"/>
<Setter Property="Foreground" Value="{Binding Path=Tag, RelativeSource={RelativeSource Self}}"/>
<Setter Property="BorderBrush" Value="{Binding Path=Tag, RelativeSource={RelativeSource Self}}"/>
</Trigger>
</Style.Triggers>
</Style>
<!-- Menu button icon -->
<Style x:Key="menuButtonIcon" TargetType="fa:IconImage">
<Setter Property="Foreground" Value="{Binding Path=Tag, RelativeSource={RelativeSource AncestorType=RadioButton}}"/>
<Setter Property="Width" Value="22"/>
<Setter Property="Height" Value="22"/>
<Setter Property="Margin" Value="35,0,20,0"/>
</Style>
<!-- Menu button text -->
<Style x:Key="menuButtonText" TargetType="TextBlock">
<Setter Property="Foreground" Value="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType=RadioButton}}"/>
<Setter Property="FontFamily" Value="Montserrat"/>
<Setter Property="FontWeight" Value="Medium"/>
<Setter Property="FontSize" Value="13.5"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<!--Control Button-->
<Style x:Key="controlButton" TargetType="Button">
<Setter Property="Width" Value="35"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource plainTextColor3}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}"
CornerRadius="4">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<!-- Mouse over back color-->
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource panelActiveColor}"/>
<Setter Property="Foreground" Value="{Binding Path=Tag, RelativeSource={RelativeSource Self}}"/>
</Trigger>
</Style.Triggers>
</Style>
<!-- Menu button icon -->
<Style x:Key="controlButtonIcon" TargetType="fa:IconImage">
<Setter Property="Foreground" Value="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType=Button}}"/>
<Setter Property="Width" Value="9"/>
<Setter Property="Height" Value="9"/>
</Style>
<!--Icon Button-->
<Style x:Key="iconButton" TargetType="Button">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Width" Value="25"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource plainTextColor1}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<!-- Mouse over back color-->
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="{Binding Path=Tag, RelativeSource={RelativeSource Self}}"/>
</Trigger>
</Style.Triggers>
</Style>
<!-- Menu button icon -->
<Style x:Key="iconButtonIcon" TargetType="fa:IconImage">
<Setter Property="Foreground" Value="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType=Button}}"/>
<Setter Property="Width" Value="16"/>
<Setter Property="Height" Value="16"/>
</Style>
</ResourceDictionary>
Cs交互逻辑：
namespace WPF_LoginForm.View
{
/// <summary>
/// MainView.xaml 的交互逻辑
/// </summary>
public partial class MainView : Window
{
public MainView()
{
InitializeComponent();
}
[DllImport("user32.dll")]
public static extern IntPtr SendMessage( IntPtr hWnd, int wMsg, int wParam, int lParam);
private void pnControlBar_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
WindowInteropHelper helper = new WindowInteropHelper(this);
SendMessage(helper.Handle, 161, 2, 0);
}
private void pnControlBar_MouseEnter(object sender, MouseEventArgs e)
{
this.MaxHeight = SystemParameters.MaximizedPrimaryScreenHeight;
}
private void btnClose_Click(object sender, RoutedEventArgs e)
{
Application.Current.Shutdown();
}
private void btnMinimize_Click(object sender, RoutedEventArgs e)
{
this.WindowState= WindowState.Minimized;
}
private void btnMaxmize_Click(object sender, RoutedEventArgs e)
{
if (this.WindowState == WindowState.Normal)
this.WindowState = WindowState.Maximized;
else this.WindowState = WindowState.Normal;
}
}
}
【实验体会】
WPF相比于winform的界面编写更加困难，winform的界面可以直接拖动实现，比较节省页面的开发时间，但是用wpf的话要写出界面的组件并编辑组件的样式，这里面还要考虑样式的重复使用，这就要自己封装样式属性，这一点很麻烦，但是写代码的体验上与app开发比较相似，如果有app经验的话还是比较容易上手的。
浙公网安备 33010602011771号