10003809547j 图形用户界面设计
【实验学时】
8学时
【实验环境】
所需硬件环境为微机；
所需软件环境为Microsoft Visual Studio 2013
【实验内容】
编写一整套Mis系统UI界面，Mis系统名称自拟。我编写的是《铁大医院信息管理系统》。这个系统有四个模块，分别是查看病房、住院登记、查找病人、出院结算。系统使用了多种控件，页面美观，方便用户使用。
【关键步骤】
1.确定主题，我选择的主题是《铁大医院信息管理系统》
2.使用WPF框架开发，采用XAML设计界面
3.确定系统的功能
4.在网上找一些图片素材，使用ps处理一下
5.主窗口(LayoutWindow)包含功能按钮区和内容显示区，使用Frame控件实现页面切换，界面顶部显示用户信息和实时时间
6.设计各个功能页面和处理逻辑。使用了listview、lable、button、textbox、combobox等控件
部分关键代码：
LoginWindow.xaml
<Window x:Class="UI.LoginWindow"
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:UI"
mc:Ignorable="d" WindowStyle="None" ResizeMode="NoResize"
WindowStartupLocation="CenterScreen" MouseMove="Window_MouseMove"
Title="登陆界面" Height="484" Width="775" Icon="Images\Logo.png">
<Window.Background>
<ImageBrush ImageSource="Images\LoginBG.png"/>
</Window.Background>
<Grid>
<StackPanel Orientation="Horizontal">
<Image Width="65" Margin="120,75,10,10" Source="Images\Logo.png"
HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Label Name="labelSys" Content="铁大医院信息管理系统" Width="250" Height="40"
FontSize="22" FontFamily="宋体-方正超大字符集" Foreground="Black"
Margin="0,90,10,10" VerticalAlignment="Top" ToolTip="当前登陆界面"/>
<Label Name="labelUserName" Content="用户名：" Width="80" Height="30"
FontSize="19" Foreground="White" FontFamily="宋体"
Margin="-210,-65,0,0" HorizontalAlignment="Left"/>
<Label Name="labelPwd" Content="密 码：" Width="80" Height="30"
FontSize="19" Foreground="White" FontFamily="宋体"
Margin="-210,55,0,0" HorizontalAlignment="Left"/>
</StackPanel>
<StackPanel Orientation="Vertical">
<TextBox Name="txtBoxUserName" Width="190" Height="25"
VerticalContentAlignment="Center" FontSize="16" FontFamily="宋体"
Margin="100,199,10,10" VerticalAlignment="Center"
TextChanged="txtBoxUserName_TextChanged"/>
<PasswordBox Name="txtBoxPwd" Width="190" Height="25" PasswordChar="*" FontFamily="宋体"
VerticalContentAlignment="Center" FontSize="16"
Margin="100,25,10,10" VerticalAlignment="Center"
PasswordChanged="txtBoxPwd_PasswordChanged"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button Name="btnLogin" FontSize="21" Width="90" Height="35" IsDefault="True"
IsEnabled="True" BorderBrush="Transparent" Click="btnLogin_Click"
Margin="250,200,0,0" VerticalAlignment="Center" Background="Transparent">
<Image Name="imgLogin" Source="Images\Login.png" Stretch="UniformToFill" />
</Button>
<Button Name="btnCancel" FontSize="21" Width="90" Height="35"
IsEnabled="True" BorderBrush="Transparent" Click="btnCancel_Click"
Margin="100,200,0,0" Background="Transparent">
<Image Name="imgCancel" Source="Images\Cancel.png" Stretch="UniformToFill" />
</Button>
</StackPanel>
<StackPanel Orientation="Vertical">
<Label Name="userNameTip" Margin="410,199,10,10"
FontSize="15" FontFamily="宋体" Foreground="Red" Height="25" Width="120"
HorizontalAlignment="Center" />
<Label Name="pwdTip" Margin="410,25,10,10"
FontSize="15" FontFamily="宋体" Foreground="Red" Height="25" Width="110"
HorizontalAlignment="Center" />
</StackPanel>
</Grid>
</Window>
LayoutWindow.xaml
<Window x:Class="UI.LayoutWindow"
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:UI"
mc:Ignorable="d" WindowStartupLocation="CenterScreen" Title="铁大医院信息管理系统"
Height="740" Width="1400" Icon="Images\Logo.png">
<Viewbox Stretch="Fill">
<StackPanel Width="1400">
<ToolBar DockPanel.Dock="Top">
<!--ToolBar和StatusBar就是一个容器-->
<Button Content="设置"></Button>
<Separator></Separator>
<Button Content="退出" Click="close"></Button>
<Separator></Separator>
</ToolBar>
<StackPanel Height="65" Orientation="Horizontal" >
<StackPanel.Background>
<ImageBrush ImageSource="Images\UpperPanel.png" Str
LayoutWindow.xaml
<Window x:Class="UI.LayoutWindow"
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:UI"
mc:Ignorable="d" WindowStartupLocation="CenterScreen" Title="铁大医院信息管理系统"
Height="740" Width="1400" Icon="Images\Logo.png">
<Viewbox Stretch="Fill">
<StackPanel Width="1400">
<ToolBar DockPanel.Dock="Top">
<!--ToolBar和StatusBar就是一个容器-->
<Button Content="设置"></Button>
<Separator></Separator>
<Button Content="退出" Click="close"></Button>
<Separator></Separator>
</ToolBar>
<StackPanel Height="65" Orientation="Horizontal" >
<StackPanel.Background>
<ImageBrush ImageSource="Images\UpperPanel.png" Stretch="Fill"/>
</StackPanel.Background>
<Label Content="铁大医院信息管理系统"
FontFamily="黑体" FontSize="29" Foreground="Black"
Margin="120,12,0,0" />
<Label Name="lblShow" Content="当前用户："
Foreground="Black" FontSize="16" Height="33" Width="95"
Margin="490 0" VerticalAlignment="Bottom"/>
<Label Name="lblUserName" Content=""
Foreground="Black" FontSize="16" Height="33" Width="80"
Margin="-920,0,0,0" VerticalAlignment="Bottom"/>
<Label Name="lblDate"
Foreground="Black" FontSize="16" Height="33" Width="220"
Margin="-600,0,0,0" VerticalAlignment="Bottom"/>
<Label Name="lblTime" Height="40" Width="220"
FontSize="26" Foreground="Black" FontFamily="宋体"
VerticalAlignment="Top" Margin="-540,0,0,0"
VerticalContentAlignment="Center" />
</StackPanel>
<Grid Height="595">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.75*"/>
<ColumnDefinition Width="8.25*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="Height" Value="45"/>
<Setter Property="Width" Value="180"/>
<Setter Property="Margin" Value="0,15,0,15"/>
<EventSetter Event="Click" Handler="Button_Click"/>
</Style>
</StackPanel.Resources>
<Rectangle Height="20" Fill="Transparent"/>
<Button Name="sickroomCheck" Tag="查看病房">
<Grid>
<TextBlock Text="查看病房" Foreground="MidnightBlue"
FontSize="19" FontFamily="楷体"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Grid>
</Button>
<Button Name="register" Tag="住院登记">
<Grid>
<TextBlock Text="住院登记" Foreground="MidnightBlue"
FontSize="19" FontFamily="楷体"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Grid>
</Button>
<Button Name="searchPatient" Tag="查找病人">
<Grid>
<TextBlock Text="查找病人" Foreground="MidnightBlue"
FontSize="19" FontFamily="楷体"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Grid>
</Button>
<Button Name="settlement" Tag="出院结算">
<Grid>
<TextBlock Text="出院结算" Foreground="MidnightBlue"
FontSize="19" FontFamily="楷体"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Grid>
</Button>
<Rectangle Height="20" Fill="Transparent"/>
</StackPanel>
【程序运行截图】
登录页面
查看病房页面：
点击病房科技查询该病房的病床的状况
住院登记页面：
查找病人页面：
出院结算页面：
【实验体会】
在本次实验中，我设计并开发了《铁大医院信息管理系统》的用户界面。系统分为四个主要功能模块：查看病房、住院登记、查找病人和出院结算。整个系统采用了 WPF 框架，使用 XAML 进行界面设计，使得界面更加直观、美观且具有较强的交互性。
首先，我确定了系统的主题，并设计了适合的模块功能。然后，在功能实现过程中，我结合实际需求和实验要求，选择了常用的控件，如 ListView、Label、Button、TextBox 和 ComboBox 等，来完成数据展示和用户交互。
通过这次实验，我不仅掌握了C/S架构软件的基本编写方法，还提升了界面设计和用户交互方面的能力。通过实践，我加深了对控件布局、事件处理、界面逻辑的理解，也学到了如何通过合理的设计提升系统的可用性和用户体验。这次实验不仅是对我编程能力的锻炼，也让我更加意识到界面设计和功能实现的平衡，未来我将在此基础上进一步优化和完善系统功能。
