[WPF] DataBinding-進階篇(二)UserControl自定義屬性的綁定

 MainWindow中要與UserControl自定義的屬性作綁定使用方法和基礎篇內的一樣，

分為使Code綁定或在XAML內綁定。

在UserControl內，需要將內部原件的屬性再與自定義的屬性作綁定。

MainWindow原件屬性<=>自定義屬性<=>UserControl原件屬性

利用上一篇創建的UserControl中，

Label1使用Code作屬性綁定，

Label2使用XAML作屬性綁定。

由於在WPF中的屬性綁定必須是DependencyProperty，

所以必須將自定義屬性LabelValue註冊為DependencyProperty。

註冊方法(命名原則=>屬性+Property)：

    public object LabelValue
    {
        get => GetValue(LabelValueProperty);
        set => SetValue(LabelValueProperty, value);
    }

    public static readonly DependencyProperty LabelValueProperty =
        DependencyProperty.Register("LabelValue", typeof(object), typeof(UserControl1));

UserControl的Label1使用code綁定自定義屬性LabelValue

    public UserControl1()
    {
        InitializeComponent();
        Label1.SetBinding(ContentProperty, new Binding(nameof(LabelValue)) { Source = this });
        //上下為Binding的兩種建構式
        //DataContext = this;
        //Label1.SetBinding(Label.ContentProperty,nameof(LabelValue) );
    }

UserControl的Label2在XAML綁定自定義屬性LabelValue

    <Label x:Name="Label2"
        DataContext="{Binding RelativeSource={RelativeSource AncestorType=local:UserControl1}}"
        Content="{Binding LabelValue}"
        HorizontalAlignment="Stretch"
        Grid.Row="1" 
        VerticalAlignment="Stretch"
        VerticalContentAlignment="Center" 
        HorizontalContentAlignment="Center"
        FontSize="36" 
        Background="#FF60B646"
        Foreground="#FFFBF8F6"/>

執行結果：

[WPF] DataBinding-進階篇(一)創建UserControl

MainWindow：

MainWindow的XAML：

<Window x:Class="WpfApp3.MainWindow"
        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:WpfApp3"
        mc:Ignorable="d"
        Title="MainWindow" Height="400" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Slider x:Name="Slider1"
                Grid.Column="1" 
                HorizontalAlignment="Center"
                Grid.Row="1" 
                VerticalAlignment="Center"
                Width="250"
                ValueChanged="Slider1_ValueChanged"
                SmallChange="1"
                Maximum="100"/>
        <local:UserControl1 
            HorizontalAlignment="Center" 
            VerticalAlignment="Center"/>
    </Grid>
</Window>

UserControl的XAML：

<UserControl x:Class="WpfApp3.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApp3" 
             mc:Ignorable="d" 
             d:DesignHeight="400" d:DesignWidth="400">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Label x:Name="Label1"
               Content="Label1" 
               HorizontalAlignment="Stretch"
               Grid.Row="0" 
               VerticalAlignment="Stretch" 
               HorizontalContentAlignment="Center"
               VerticalContentAlignment="Center"
               FontSize="36" 
               Background="#FFAA2525" 
               Foreground="#FFFBF8F6"/>
        <Label x:Name="Label2"
               Content="Label2"
               HorizontalAlignment="Stretch"
               Grid.Row="1" 
               VerticalAlignment="Stretch"
               VerticalContentAlignment="Center" 
               HorizontalContentAlignment="Center"
               FontSize="36" 
               Background="#FF60B646"
               Foreground="#FFFBF8F6"/>
        <Label x:Name="Label3"
               Content="Label3"
               HorizontalAlignment="Stretch"
               Grid.Row="2"
               VerticalAlignment="Stretch"
               VerticalContentAlignment="Center" 
               HorizontalContentAlignment="Center"
               FontSize="36"
               Background="#FF28389C"
               Foreground="#FFFBF8F6"/>
    </Grid>
</UserControl>

[WPF] DataBinding-基礎篇

 建置一個Label，再建置一個Slider當作輸入源。

XAML：

  <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Label x:Name="Label1" 
               Content="Label1" 
               Grid.Row="0"
               Grid.Column="1"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
               FontSize="36"/>
        <Slider x:Name="Slider1"
                Grid.Column="1" 
                HorizontalAlignment="Center"
                Grid.Row="1" 
                VerticalAlignment="Center"
                Width="200" 
                ValueChanged="Slider1_ValueChanged" SmallChange="1" Maximum="100"/>
  </Grid>

 WPF的DataBinding分兩種，一種是寫code，一種是寫在XAML，

最大的差異是XAML能即時預覽，使用code的只能在執行後才看得出效果。

使用Code：

      public MainWindow()
        {
            InitializeComponent();
            Label1.SetBinding(ContentProperty, new Binding("Value") { Source = Slider1 });
            //欲綁定的物件.SetBinding(欲綁定的屬性, new Binding(目標的屬性名稱){Source = 目標物件});      
            //PS.欲綁定的屬性必須是DependencyProperty(命名規則=>屬性+Property)
            //Binding物件有兩個建構式，另一個用法如下
            //Label1.SetBinding(ContentProperty, new Binding() { Source = Slider1, Path = new PropertyPath("Value") });      
        }

使用XAML：

 <Label x:Name="Label1" 
    Content="{Binding ElementName=Slider1, Path=Value}"
    Grid.Row="0"
    Grid.Column="1"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    FontSize="36"/>
    //欲綁定的屬性="{Binding ElementName=現有的物件, Path=物件上的屬性}"

[Windows Form] DataBinding

 建置一個Label，再建置一個TrackBar當作輸入源。

程式碼：

	public Form1()
	{
		InitializeComponent();
		label1.DataBindings.Add(new Binding("Text",trackBar1,"Value"));
		//欲綁定的物件.DataBindings.Add(new Binding(欲綁字的屬性,目標物件,目標屬性));  
	}

 執行結果：

[C#] 連接到MySQL

 1.先載入參考(MySQL.Data)

    專案中的參考(右鍵)=>加入參考=>"組件"中尋找MySQL.Data

2.建立ConnectString

  private static MySqlConnectionStringBuilder MySQL => new MySqlConnectionStringBuilder
  {
     Server = "127.0.0.1",	//MySQL的位置或URL(127.0.0.1為本地)
     Port = 3306,		//MySQL預設Port為3306
     UserID = "Username",	//MySQL的使用者帳號
     Password = "Password",	//MySQL的使用者密碼
     Database = "mydb",		//MySQL的DB名稱
     CharacterSet = "utf8"	//MySQL的字元集
  };

3.讀取MySQL
   讀取DB內的table的所有資料至DataSet，
   相關的資料操作請參考DataSet。

  private static DataSet GetDataFromMySQL()
  {
   DataSet ds;
   using (var conn = new MySqlConnection(MySQL.ConnectionString))
   {
    const string sql = @" SELECT * FROM `tableName`";
    using (var adapter = new MySqlDataAdapter(sql, conn))
    {
     try
     {
      ds = new DataSet();
      adapter.Fill(ds, "tableName");
     }
     catch
     {
      MessageBox.Show(@"Can not connect to database...", @"Message");
      ds = null;
     }
    }
   }
   return ds;
  }

4.更新MySQL

   藉由MySqlDataAdapter會自動生成相關的command，
   如果需要更詳細的調整可自己寫SQL command。
   MySqlDataAdapter會自動判斷並使用相關的command，
   例如:有增加DataRow會使用InsertCommand
            有減少DataRow會使用DeleteCommand
             DataRow無增減，但row內容有改變時，會使用UpdateCommand

  *註: 使用UpdateCommand時要特別注意不可改變DataRow的順序，

          不然MySQL會報內部錯誤。

          避免這問題最好是修改過一個DataRow就Update一次較為保險，

          但遇到資料量大時效率會變差。

public static bool UpdateMySQL(DataTable table)
{
  using (var conn = new MySqlConnection(MySQL.ConnectionString))
  {
   var sql = $@"SELECT * FROM `{table.TableName}`";
   using (var adapter = new MySqlDataAdapter(sql, conn))
   {
    using (var cmd = new MySqlCommandBuilder(adapter))
    {
     adapter.InsertCommand = cmd.GetInsertCommand();//可省略會自動生成，
     adapter.DeleteCommand = cmd.GetDeleteCommand();//也可自己下SQL指令。
     adapter.UpdateCommand = cmd.GetUpdateCommand();
     var updateNum = adapter.Update(table);
     Console.WriteLine($@"更新{updateNum}個檔案");
     return updateNum != 0;
    }
   }
  }
 }

[C#]Modbus RTU讀取馬達Encoder使用C#

最近公司買了一個馬達的Encoder去測試外部馬達的角度，其中使用到Modbus-RTU當作通訊協定，通訊port的部份是使用Comport，所以硬體的架構為Encoder => RS232 => TTL => PC。

產品規格書及封包格式

介面：

1.Label1 => 顯示角度數值。

2.Combo_Box => 如果有兩個以上的Comport時可選擇。

3.Button1 => 選擇Comport後連線用。

4.Button2 => 測試CRC時用。

程式碼：

    Form1.cs

using System;
using System.Globalization;
using System.IO.Ports;
using System.Windows.Forms;
using static WindowsFormsApp4.CRC;
using Timer = System.Timers.Timer;

namespace WindowsFormsApp4
{
    public partial class Form1 : Form
    {
        private readonly Timer timer;
        public Form1()
        {
            InitializeComponent();
            SearchComport();
            //設定timer(多久發送一次訊號)
            timer = new Timer { AutoReset = true, Interval = 100 };
            timer.Elapsed += Timer_Elapsed;
        }
        
        //查詢用的封包
        private static readonly byte[] data =
        { 0x01, 0x04, 0x00, 0x01, 0x00, 0x01, 0x60, 0x0a };
        
        private readonly SerialPort _serialPort = new SerialPort();
        private void Timer_Elapsed(object sender, System.Timers.ElapsedEventArgs e)
        {
            _serialPort.Write(data, 0, data.Length);
        }

        private void Button1_Click(object sender, EventArgs e)
        {
            timer.Enabled = true;
        }
        
        private void Button2_Click(object sender, EventArgs e)
        {
            var value = CRC16(data);
            Label1.InvokeIfRequired(() => Label1.Text = Convert.ToString(value));
            Console.WriteLine($@"value => {value}");
        }

        private void SearchComport()
        {
            var ports = SerialPort.GetPortNames();
            var count = 0;
            if (ports.Length <= 0) return;
            foreach (var port in ports)
            {
                CB_Comport.Items.Add(port);
                Console.WriteLine($@"port{++count} => {port}");
            }
            CB_Comport.SelectedIndex = 0;
        }

        private void CB_Comport_SelectedIndexChanged(object sender, EventArgs e)
        {
            //如果之前有開啟就先關閉
            if (_serialPort.IsOpen) _serialPort.Close(); 
            //選取到的comport索引
            var itemIndex = CB_Comport.SelectedIndex;
            //設定comport名稱
            _serialPort.PortName = CB_Comport.Items[itemIndex].ToString();
            //設定comport鮑率
            _serialPort.BaudRate = 9600;
            //設定comport讀寫的timeout
            _serialPort.ReadTimeout = 500;
            _serialPort.WriteTimeout = 500;
            //設定接收到data後的動作
            _serialPort.DataReceived += ReadData;
            //一定要開啟，不然你之前做的都是白工
            _serialPort.Open();
        }
        
        private void ReadData(object sender, SerialDataReceivedEventArgs e)
        {
            try
            {
                var recBuffer = new byte[_serialPort.BytesToRead];
                _serialPort.Read(recBuffer, 0, recBuffer.Length);
                //不知道為何?!有時回傳會少byte，所以如果不是完整的封包就捨棄
                if (recBuffer.Length < 7) return;
                Console.WriteLine(BitConverter.ToString(recBuffer));
                //封包的第四及五個byte為資料的高位元及低位元
                var value = recBuffer[3] << 8 | recBuffer[4];
                //Encoder解析度為32768 => 0x8000
                var degree = 360f * value / 0x8000;
                Label1.InvokeIfRequired(() => 
               	 	Label1.Text = degree.ToString("F1", CultureInfo.InvariantCulture));
                //以下為測試CRC是否正確
                //只取不是CRC的部份，所以只有5個byte
                //var buffer = new byte[5];
                //for (var i = 0; i < buffer.Length; i++)
                //{
                //    buffer[i] = recBuffer[i];
                //}
                //var crc = GetCRC(buffer);
                //(與0xFF做AND計算，只保留後8個位元)
                //var Lo = Convert.ToString(crc & 0xFF, 16);
                //(向後位移8位元，如：0x1234 => 0x0012)
                //var Hi = Convert.ToString(crc >> 8, 16);
                //Console.WriteLine($@"CRC => {Convert.ToString(crc, 16)}");
                //Console.WriteLine($@"Hi => {Hi}");
                //Console.WriteLine($@"Lo => {Lo}");
                //var revHi = Convert.ToString(recBuffer[6], 16);
                //var revLo = Convert.ToString(recBuffer[5], 16);
                //var revCRC = revHi + revLo;
                //var check = revCRC == Hi + Lo;
                //Console.WriteLine($@"revCRC => {revCRC} Hi+Lo => {Hi + Lo} Check => {check}");
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message);
            }
        }
    }

    public static class Extension
    {
        //非同步委派更新UI
        public static void InvokeIfRequired(this Control control, MethodInvoker action)
        {
            if (control.InvokeRequired)//在非當前執行緒內 使用委派
                control.Invoke(action);
            else
                action();
        }
    }
}

執行結果：

在CRC的部份分成兩種方式，一種是計算，一種是查表。

計算的好處是節省空間及明確的表達邏輯，避免複製貼上造成的錯誤。

查表的好處是反應快，節省計算時間。

在這封包格式上CRC佔了2byte = 16bit，所以是使用CRC16的計算方式。

特別要注意CRC計算完後在傳送封包時高低位元要記得交換位置。

C語言的程式碼及計算步驟

C#寫法：

    CRC.cs

using System.Collections.Generic;

namespace WindowsFormsApp4
{
    internal static class CRC
    {
    	//使用計算的方式
    	public static ushort CRC16(IEnumerable pDataBytes)
        {
            ushort crc = 0xffff;
            const ushort poly = 0xA001;

            foreach (var t in pDataBytes)
            {
                crc ^= t; //XOR=>兩兩相同為0，不同為1，
                //如：1111
               	//    0001
               	//    _______
               	//    1110
                for (var j = 0; j < 8; j++)
                {
              	  //檢查最低位元是否為1
                    if ((crc & 0x01) == 0x01)
                    {
                        crc >>= 1; //向右移一位元，如：0x1234 => 0x0123
                        crc ^= poly;
                    }
                    else
                    {
                        crc >>= 1;
                    }
                }
            }
            return crc;
        }
        
        //使用查表的方式
        public static ushort GetCRC(IEnumerable values)
        {
            byte hi = 0xff;
            byte lo = 0xff;
            foreach (var value in values)
            {
                var index = lo ^ value;
                lo = (byte)(hi ^ aucCRCHi[index]);
                hi = aucCRCLo[index];
            }
            return (ushort)(hi << 8 | lo);
        }

        private static readonly byte[] aucCRCHi =
        {
            0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41, 0x01, 0xC0, 0x80, 0x41,
            0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41, 0x00, 0xC1, 0x81, 0x40,
            0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41, 0x01, 0xC0, 0x80, 0x41,
            0x00, 0xC1, 0x81, 0x40, 0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41,
            0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41, 0x01, 0xC0, 0x80, 0x41,
            0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41, 0x00, 0xC1, 0x81, 0x40,
            0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41, 0x00, 0xC1, 0x81, 0x40,
            0x01, 0xC0, 0x80, 0x41, 0x01, 0xC0, 0x80, 0x41, 0x00, 0xC1, 0x81, 0x40,
            0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41, 0x01, 0xC0, 0x80, 0x41,
            0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41, 0x00, 0xC1, 0x81, 0x40,
            0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41, 0x01, 0xC0, 0x80, 0x41,
            0x00, 0xC1, 0x81, 0x40, 0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41,
            0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41, 0x01, 0xC0, 0x80, 0x41,
            0x00, 0xC1, 0x81, 0x40, 0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41,
            0x01, 0xC0, 0x80, 0x41, 0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41,
            0x00, 0xC1, 0x81, 0x40, 0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41,
            0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41, 0x01, 0xC0, 0x80, 0x41,
            0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41, 0x00, 0xC1, 0x81, 0x40,
            0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41, 0x01, 0xC0, 0x80, 0x41,
            0x00, 0xC1, 0x81, 0x40, 0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41, 
            0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41, 0x01, 0xC0, 0x80, 0x41,
            0x00, 0xC1, 0x81, 0x40
        };

        private static readonly byte[] aucCRCLo =
        {
            0x00, 0xC0, 0xC1, 0x01, 0xC3, 0x03, 0x02, 0xC2, 0xC6, 0x06, 0x07, 0xC7,
            0x05, 0xC5, 0xC4, 0x04, 0xCC, 0x0C, 0x0D, 0xCD, 0x0F, 0xCF, 0xCE, 0x0E,
            0x0A, 0xCA, 0xCB, 0x0B, 0xC9, 0x09, 0x08, 0xC8, 0xD8, 0x18, 0x19, 0xD9,
            0x1B, 0xDB, 0xDA, 0x1A, 0x1E, 0xDE, 0xDF, 0x1F, 0xDD, 0x1D, 0x1C, 0xDC,
            0x14, 0xD4, 0xD5, 0x15, 0xD7, 0x17, 0x16, 0xD6, 0xD2, 0x12, 0x13, 0xD3,
            0x11, 0xD1, 0xD0, 0x10, 0xF0, 0x30, 0x31, 0xF1, 0x33, 0xF3, 0xF2, 0x32,
            0x36, 0xF6, 0xF7, 0x37, 0xF5, 0x35, 0x34, 0xF4, 0x3C, 0xFC, 0xFD, 0x3D,
            0xFF, 0x3F, 0x3E, 0xFE, 0xFA, 0x3A, 0x3B, 0xFB, 0x39, 0xF9, 0xF8, 0x38,
            0x28, 0xE8, 0xE9, 0x29, 0xEB, 0x2B, 0x2A, 0xEA, 0xEE, 0x2E, 0x2F, 0xEF,
            0x2D, 0xED, 0xEC, 0x2C, 0xE4, 0x24, 0x25, 0xE5, 0x27, 0xE7, 0xE6, 0x26,
            0x22, 0xE2, 0xE3, 0x23, 0xE1, 0x21, 0x20, 0xE0, 0xA0, 0x60, 0x61, 0xA1,
            0x63, 0xA3, 0xA2, 0x62, 0x66, 0xA6, 0xA7, 0x67, 0xA5, 0x65, 0x64, 0xA4,
            0x6C, 0xAC, 0xAD, 0x6D, 0xAF, 0x6F, 0x6E, 0xAE, 0xAA, 0x6A, 0x6B, 0xAB,
            0x69, 0xA9, 0xA8, 0x68, 0x78, 0xB8, 0xB9, 0x79, 0xBB, 0x7B, 0x7A, 0xBA,
            0xBE, 0x7E, 0x7F, 0xBF, 0x7D, 0xBD, 0xBC, 0x7C, 0xB4, 0x74, 0x75, 0xB5,
            0x77, 0xB7, 0xB6, 0x76, 0x72, 0xB2, 0xB3, 0x73, 0xB1, 0x71, 0x70, 0xB0,
            0x50, 0x90, 0x91, 0x51, 0x93, 0x53, 0x52, 0x92, 0x96, 0x56, 0x57, 0x97,
            0x55, 0x95, 0x94, 0x54, 0x9C, 0x5C, 0x5D, 0x9D, 0x5F, 0x9F, 0x9E, 0x5E,
            0x5A, 0x9A, 0x9B, 0x5B, 0x99, 0x59, 0x58, 0x98, 0x88, 0x48, 0x49, 0x89,
            0x4B, 0x8B, 0x8A, 0x4A, 0x4E, 0x8E, 0x8F, 0x4F, 0x8D, 0x4D, 0x4C, 0x8C,
            0x44, 0x84, 0x85, 0x45, 0x87, 0x47, 0x46, 0x86, 0x82, 0x42, 0x43, 0x83,
            0x41, 0x81, 0x80, 0x40
        };
    }
}

CRC檢查：