RFID設備管理C#客戶端學習筆記之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>

#二、菜單控件和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控件中便可解決此問題。 #三、添加設備 爲保證數據一致性，設備類型和標籤號這兩個字段最好是可選的，須要綁定下拉列表的數據源。 並且對於查出來的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編輯器，顯示的代碼竟然沒有行號，着色看着也是好嗨彆扭。。