RFID设备管理C#客户端学习笔记之1：布局

时间 2019-11-19

原文原文链接

#一、总体布局前台xaml页面UI参考C#入门经典中demo的布局，总体grid分5行，第一行表现主题，第二行放置菜单控件，最后一行放置状态栏，倒数第二行填充一个richtextbox控件，用来输出操做信息。那最后剩下的第三行即是主要功能控件呆的地方，固然，他们会包含在TabControl之中。效果以下： MainApp.xaml：html

<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>

#二、菜单控件和RichTextBox控件菜单栏目包含在DockPanel控件中，MenuItem的Click属性能够指定发生的事件。设置“信息总览”菜单点击以后打开前面建立的infoShow.xamlsql

private void h1_info_Click(object sender, RoutedEventArgs e)
        {
            Window infoShow = new infoShow();
            infoShow.Show();
        }

WPF中RichTextBox被填充满以后没有自动的滚动条（WinForm中有），只须要将其放在ScrollViewer控件中便可解决此问题。 #三、添加设备为保证数据一致性，设备类型和标签号这两个字段最好是可选的，须要绑定下拉列表的数据源。并且对于查出来的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，这样就不须要在后台代码中指定这两个属性的值了markdown

<ComboBox Name="cb_deviceType" Canvas.Left="104" Canvas.Top="54" Width="115"
                                  DisplayMemberPath="Name" SelectedValuePath="TypeID"></ComboBox>

第一次用OSC的线上markdown编辑器，显示的代码竟然没有行号，着色看着也是好嗨别扭。。编辑器