#1、整体布局 前台xaml页面UI参考C#入门经典中demo的布局,整体grid分5行,第一行表现主题,第二行放置菜单控件,最后一行放置状态栏,倒数第二行填充一个richtextbox控件,用来输出操作信息。那最后剩下的第三行便是主要功能控件呆的地方,当然,他们会包含在TabControl之中。 效果如下: MainApp.xaml:
<Window x:Class="Ex03_DeviceMS_wpf.MainApp"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="RFID设备管理系统" Height="548" Width="727" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="58"/>
<RowDefinition Height="20"/>
<RowDefinition />
<RowDefinition Height="65"/>
<RowDefinition Height="30"></RowDefinition>
</Grid.RowDefinitions>
<Canvas Grid.Row="0" Background="#C40D42">
<!--Stretch伸展;
UniformToFill,控件的高度和宽度会对称的设置直到填充整个容器;
参考[http://www.cnblogs.com/ListenFly/archive/2011/09/04/2166514.html];
这里将Image设置为固定高,没设置宽度,由于将Stretch设置为UniformToFill,因此Image控件会将高度
作为宽高比标准。
-->
<!--在项目文件夹下新建Images,WPF能读到但是在VS中看不到,在VS中新建Folder比较好-->
<Label Canvas.Right="3" Canvas.Top="13" Content="操作平台" Foreground="#FFF7EFFF"
FontFamily="Times New Roman" FontSize="24" FontWeight="Bold"/>
</Canvas>
<DockPanel Grid.Row="1" Margin="0">
<Menu Height="20" VerticalAlignment="Bottom"
Background="Black" FontWeight="Bold" Foreground="White">
<MenuItem Header="_File" Foreground="White">
<MenuItem Header="_Open" Width="200" Foreground="Black"></MenuItem>
<MenuItem Header="_Save" Width="200" Foreground="Black" Command="Save">
<MenuItem.Icon>
<Image Source="Images\base_floppydisk_32.png" Width="20"></Image>
</MenuItem.Icon>
</MenuItem>
<Separator Width="145" Foreground="Black"></Separator>
<MenuItem Header="_Close" Width="200" Foreground="Black" Command="Close"></MenuItem>
</MenuItem>
<MenuItem Header="服务器操作" Name="h1_ServerOp" Foreground="White" GotFocus="h1_ServerOp_GotFocus">
<MenuItem Header="打开服务器" Name="h2_openServer" Width="145" Foreground="Black" HorizontalAlignment="Left" Click="h2_openServer_Click" ></MenuItem>
<MenuItem Header="关闭服务器" Name="h2_closeServer" Width="145" Foreground="Black" HorizontalAlignment="Left" Click="h2_closeServer_Click" ></MenuItem>
</MenuItem>
<MenuItem Header="信息总览" Name="h1_info" Foreground="White" Click="h1_info_Click"/>
<MenuItem Header="_Help" Foreground="White">
<MenuItem Header="_About" Width="145" Foreground="Black" HorizontalAlignment="Left" ></MenuItem>
</MenuItem>
</Menu>
</DockPanel>
<!--面板-->
<Canvas Grid.Row="2" Background="#f1eded">
<TabControl x:Name="tabControl1" Canvas.Left="10" Background="#FFE5E5E5" Canvas.Top="5" Height="297" Width="658" SelectionChanged="tabControl1_SelectionChanged">
<TabItem Header="添加设备">
<Canvas>
<Label Content="设备号:" Margin="15,20"></Label>
<Label Content="类型选择:" Margin="15,50"></Label>
<Label Content="标签号:" Margin="15,80"></Label>
<Label Content="备注:" Margin=" 15,110"></Label>
<TextBox Name="tb_deviceID" Canvas.Left="104" Canvas.Top="20" Width="144"/>
<ComboBox Name="cb_deviceType" Canvas.Left="104" Canvas.Top="54" Width="115"
DisplayMemberPath="Name" SelectedValuePath="TypeID"></ComboBox>
<ComboBox Name="cb_deviceTag" Canvas.Left="104" Canvas.Top="84" Width="328"
DisplayMemberPath="tagID" SelectedValuePath="autoID"></ComboBox>
<TextBox Name="tb_deviceDscp" Canvas.Left="104" Canvas.Top="118" Width="144"></TextBox>
<Button Name="btn_addDevice" Content="添加设备" Canvas.Left="15" Canvas.Top="185" Width="70" Click="btn_addDevice_Click"></Button>
</Canvas>
</TabItem>
<TabItem Header="添加标签">
</TabItem>
<TabItem Header="指令操作">
</TabItem>
</TabControl>
<Label Content="输出:" Canvas.Top="307"/>
</Canvas>
<!--DockPanel允许控件贴靠到某条边,最后一个子空间会占满剩余空间-->
<DockPanel Grid.Row="3" Background="#f1eded" >
<ScrollViewer>
<RichTextBox Name="rtb_show" Background="White" TextChanged="rtb_show_TextChanged"></RichTextBox>
</ScrollViewer>
</DockPanel>
<Viewbox Grid.Row="4" >
<StatusBar Name="statusBar1" Height="30" Width="738">
<StatusBarItem Name="status_lbl" Content="就绪"></StatusBarItem>
</StatusBar>
</Viewbox>
</Grid>
</Window>
#2、菜单控件和RichTextBox控件 菜单栏目包含在DockPanel控件中,MenuItem的Click属性可以指定发生的事件。设置“信息总览”菜单点击之后打开前面创建的infoShow.xaml
private void h1_info_Click(object sender, RoutedEventArgs e)
{
Window infoShow = new infoShow();
infoShow.Show();
}
WPF中RichTextBox被填充满之后没有自动的滚动条(WinForm中有),只需要将其放在ScrollViewer控件中即可解决此问题。 #3、添加设备 为保证数据一致性,设备类型和标签号这两个字段最好是可选的,需要绑定下拉列表的数据源。 而且对于查出来的type表,想要显示Name这列的结果,选项的值是TypeID
方法1,直接获得dataset
//DataSet ds = MySqlHelper.GetDataSet(MySqlHelper.Conn, CommandType.Text, sql, null);
//this.cb_type.DataSource = ds.Tables[0].DefaultView;
//this.cb_type.DisplayMember = "Name";//显示Name列
//this.cb_type.ValueMember = "TypeID";//实际值为TypeID列
//方法2,调用详细步骤获得dataset
using (MySqlDataAdapter adapter = new MySqlDataAdapter(sql,MySqlHelper.Conn))
{
DataSet ds = new DataSet();
adapter.Fill(ds);//填充数据集,获得数据
this.cb_type.DataSource = ds.Tables[0].DefaultView;
this.cb_type.DisplayMember = "Name";//显示Name列
this.cb_type.ValueMember = "TypeID";//实际值为TypeID列
}
建议在xaml代码中设置了DisplayMemberPath和SelectedValuePath,这样就不需要在后台代码中指定这两个属性的值了
<ComboBox Name="cb_deviceType" Canvas.Left="104" Canvas.Top="54" Width="115"
DisplayMemberPath="Name" SelectedValuePath="TypeID"></ComboBox>
第一次用OSC的线上markdown编辑器,显示的代码居然没有行号,着色看着也是好嗨别扭。。