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

最新推荐文章于 2020-09-14 16:58:04 发布

weixin_34064653

最新推荐文章于 2020-09-14 16:58:04 发布

阅读量387

点赞数

文章标签： c# python ui

原文链接：https://my.oschina.net/SnifferApache/blog/413036

版权

2019独角兽企业重金招聘Python工程师标准>>>

#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编辑器，显示的代码居然没有行号，着色看着也是好嗨别扭。。

转载于:https://my.oschina.net/SnifferApache/blog/413036