Tuesday, September 17, 2019

如何透過Winform使用Wpf UserControl

English version

前言


你可以在這篇文章知道以下事情
  1. 讓WPF control寄生在一個Winform上面
  2. 只要編輯xaml就可以客制畫面，不用重新compile
  3. 如何在WPF裡使用Dependancy Injection ( 我看了N個範例發現不太容易找 )
  4. 如何在編輯時讓WPF的designer顯示跟runtime類似
這邊文章適合
  1. 有C# winform開發知識的人
  2. 沒空從頭開始看WPF
  3. 想試試看WPF，又有一個winform project可以玩
  4. 不知道怎麼對WPF做Dependancy Injeection
為甚麼我要用WPF
  1. 希望User可以自行修改畫面，但是又不用重新compile
  2. User懂一點xml, 但是不懂怎麼寫C#
先備知識
  1. MVVM-- Model-View-ViewModel: 有點類似MVC
    1. Model: 資料
    2. View: WPF designer顯示的畫面. 等同 winform UserControl.Designer.cs
    3. ViewModel: WPF的Control.Datacontext. 控制顯示的邏輯
    4. 在MVVM, code-behind 越少越好
  2. Code-Behind:
    1. 等同C# UserControl.cs
  3. Loose xaml:
    1. 沒有 x:Class attribute的xaml， x:Class 等同 winform designer partial class.

   第一步: 建立一個Winform來Host WPF control, 可參考 microsoft document. 

    這個範例很好，但是他使用code-behind去處理click event，這樣會讓xaml變成非loose xaml，讓他不能被動態讀取，或是讀取出來還要用code-behind做一堆事情，才譨處理，我會建議用ICommand這個介面去處理click，在後面的範例也會提到，如果對WPF比較熟了，建議看看MVVM Light,  Prism 幫你處理繁瑣的事情

如何在Winform放入WPF control

Example here. 範例使用.Net 4.0, 4.5以上應該也可以適用
  1. 打開 Example.sln.
  2. 點選 WPFHost project. 加上以下dll
    1. PresentationCore
    2. PresentationFramework
    3. System
    4. WindowsBase
  3. Form1.cs 示範winform怎麼 host WPF control.
  4. RSource 示範dependancy injection到 WPF usercontrol. 他會連上Device Register，在此不討論
  5. ctrlHost 負責WPF hosting，而且必須加進一個panel control裡面
  6. 根據microsoft document，必須把這段程式放在Form_Load內，我還沒測試過放在別的地方會怎麼樣
  1.   private void Form1_Load( object sender, EventArgs e )
  2.   {
  3.    RSource Source = new RSource();
  4.    ctrlHost = new ElementHost();
  5.    ctrlHost.Dock = DockStyle.Fill;
  6.    panel1.Controls.Add( ctrlHost );
  7.    wpfAddressCtrl = new WpfCustomControl.UserControl1( Source );
  8.    wpfAddressCtrl.InitializeComponent();
  9.    ctrlHost.Child = wpfAddressCtrl;
  10.   }


建立一個符合MVVM的WPF control

Example here ( 跟上面是同一個，只是怕你先跳過來看 )
  1. 打開WpfCustomControls project
  2. 右鍵點 UserControl1.xaml 選"View code"，或展開他選UserControl1.xaml.cs.
  3. this.Content代表View的來源.
  4. this.DataContext 就是 ViewModel, 所以我要把 RSource丟進 CncViewModel.
  5. 注意 GetXamlWithoutxClassDirective，讀取loose xaml的時候要記得把 x:Class attribute 移除，我暫時沒找到更好的方法
  1.   void LoadXAMLMethod()
  2.   {
  3.    // Changing content need to be out of constructor
  4.    try {
  5.     System.Diagnostics.Debug.WriteLine( "LoadXaml" );
  6.     string szActualPath = Path.GetFullPath( @".\..\..\..\WpfCustomControls\UserControl1.xaml" );
  7.     string szXaml = GetXamlWithoutxClassDirective( szActualPath );
  8.     UserControl rootObject = XamlReader.Parse( szXaml ) as UserControl;
  9.     this.Content = rootObject;
  10.     this.DataContext = new CncViewModel( m_Source );
  11.    }
  12.    catch( FileNotFoundException ex ) {
  13.     MessageBox.Show( ex.Message.ToString() );
  14.    }
  15.   }
  1.  
  1.   private string GetXamlWithoutxClassDirective( string m_szFilepath )
  2.   {
  3.    string szFailedText = string.Empty;
  4.    string szFullText = string.Empty;
  5.    using( StreamReader sr = new StreamReader( m_szFilepath ) ) {
  6.     szFullText = sr.ReadToEnd();
  7.    }
  8.    int nDirectiveStartIndex = szFullText.IndexOf( "x:Class" );
  9.    if( nDirectiveStartIndex == -1 ) {
  10.     return szFullText;
  11.    }
  12.    // finding x:Class="abcdeftg.gxy"
  13.    int nStartQuote = szFullText.IndexOf( "\"", nDirectiveStartIndex + 1 );
  14.    if( nStartQuote == -1 ) {
  15.     return szFailedText;
  16.    }
  17.    int nEndQuote = szFullText.IndexOf( "\"", nStartQuote + 1 );
  18.    if( nEndQuote == -1 ) {
  19.     return szFailedText;
  20.    }
  21.    //  where "after" second " 
  22.    int nDirectiveEndIndex = nEndQuote + 1;
  23.    int nDirectiveLength = nDirectiveEndIndex - nDirectiveStartIndex;
  24.    string szNotDirectiveText = szFullText.Remove( nDirectiveStartIndex, nDirectiveLength );
  25.    return szNotDirectiveText;
  26.   }

   可以發現我直接在runtime 讀UserControl1.xaml in runtime. 這樣User就能直接把xaml desiner當作設計用GUI.

如何連結View跟Model (Data)?

    可以參考Data Binding Overview，或是看下面的懶人版:
  1. {Binding PropertyOfViewModel} 讓你可以把資料直接綁到DataContext的properties上，注意只有properties, field不支援
  2. DataContext會從Parent繼承，除非有額外指定
    ( ref: What is this "DataContext" you speak of? )

   我用ViewModel做了一些自製語法，並且有設定this.DataContext = new CncViewModel( m_Source );

  1. 因為要讓使用者自訂圖片與多國語系，我用特殊語法支援字串
  2. 使用 IIndexableGetter讓自訂語法 STR[InsertKeyHere]可以拿到多國語系字串，PIC[Filepath] 則會顯示特定位置的圖片.
  3. 注意 ICommand MyCommand 他讓xaml變成loose xaml, 不再需要event handler

  1.  public class CncViewModel : INotifyPropertyChanged
  2.  {
  3.   public CncViewModel( RSource source )
  4.   {
  5.    m_R = source;
  6.    m_Pic = new MockPicture();
  7.    m_Str = new MockStringLookup();
  8.  
  9.    // Using a timer to update value
  10.    tmr = new System.Timers.Timer();
  11.    tmr.AutoReset = true;
  12.    tmr.Interval = 300;
  13.    tmr.Elapsed += M_Source_TimeTicked;
  14.    tmr.Enabled = true;
  15.  
  16.   }
  17.   Timer tmr;
  18.   private void M_Source_TimeTicked( object sender, EventArgs e )
  19.   {
  20.    firePropChanged( "R" );
  21.    firePropChanged( "STR" );
  22.   }
  23.   void firePropChanged( string szProp )
  24.   {
  25.    if( PropertyChanged == null ) {
  26.     return;
  27.    }
  28.    PropertyChanged( this, new PropertyChangedEventArgs( szProp ) );
  29.   }
  30.   public IIndexableGetter<int> R
  31.   {
  32.    get
  33.    {
  34.     return m_R;
  35.    }
  36.   }
  37.   public IIndexableGetter<string> STR
  38.   {
  39.    get
  40.    {
  41.     return m_Str;
  42.    }
  43.   }
  44.   public IIndexableGetter<BitmapImage> PIC
  45.   {
  46.    get
  47.    {
  48.     return m_Pic;
  49.    }
  50.   }
  51.  
  52.   public ICommand MyCommand
  53.   {
  54.    get
  55.    {
  56.     return new RelayCommand( ParseSyntecCmd );
  57.    }
  58.   }
  59.  
  60.   public void ParseSyntecCmd( string[] arr )
  61.   {
  62.    Console.WriteLine( "Cmd fired" );
  63.    if( arr == null ) {
  64.     Console.WriteLine( "Null" );
  65.     return;
  66.    }
  67.    foreach( var szStr in arr ) {
  68.     // Implement string command here
  69.     Console.WriteLine( "Prm: " + szStr );
  70.    }
  71.   }
  72.  
  73.   // private
  74.   IIndexableGetter<BitmapImage> m_Pic;
  75.   IIndexableGetter<int> m_R;
  76.   IIndexableGetter<string> m_Str;
  77.   public event PropertyChangedEventHandler PropertyChanged;
  78.  }
  1.  
  1.  
  1.  public class MockStringLookup : IIndexableGetter<string>
  2.  {
  3.   public string this[ string szIndex ]
  4.   {
  5.    get
  6.    {
  7.     // Implement your own custom string or multilanguage mechanism.
  8.     string[] szSplit = szIndex.Split( ':' );
  9.     if( szSplit.Length == 0 ) {
  10.      return string.Empty;
  11.     }
  12.     return szSplit[ szSplit.Length - 1 ];
  1.    }
  2.   s}
  3.  }sdfsd
  1.  
  1.  
  1.  



  1. Button.Command 示範如何使用CommandParameter
    1. 如果只有一行，使用CommandParameter="SomeSyntax".
    2. Example Button.CommandParameter below shows how to define an array of string in xaml.
  2. Button.Style應該滿好懂得，R[6000]=1背景是粉紅色  R[6000]=0變成白色

  1.         <Button
  2.             Grid.Column="2"
  3.             x:Name="CycleStart" 
  4.             Margin="22,10,105,0" VerticalAlignment="Top" Height="49"
  5.             Command="{Binding MyCommand}">
  6.             <Button.CommandParameter>
  7.                 <x:Array Type="{x:Type s:String}">
  8.                     <s:String>MySyntax_Inv R6000.0</s:String>
  9.                     <s:String>MySyntax_R6001=2</s:String>
  10.                 </x:Array>
  11.             </Button.CommandParameter>
  12.             <Button.Style>
  13.                 <Style TargetType="{x:Type Button}">
  14.                     <Style.Triggers>
  15.                         <DataTrigger Binding="{Binding R[6000]}"
  16.                             Value="1">
  17.                             <Setter Property="Background" Value="Pink" />
  18.                         </DataTrigger>
  19.                         <DataTrigger Binding="{Binding R[6000]}"
  20.                             Value="0">
  21.                             <Setter Property="Background" Value="White" />
  22.                         </DataTrigger>
  23.                     </Style.Triggers>
  24.                 </Style>
  25.             </Button.Style>
  26.             <Image x:Name="image" Height="43" Width="43" Source="{Binding PIC[Images\\play.png]}"/>
  27.         </Button>

WPF Designer模擬runtime顯示

Example here

   使用了自訂語法之後，Designer就沒辦法正常顯示資料，因為要透過runtime的資料才能正常顯示尺寸(有些control設定時，會根據字型大小改變，一個方式是每次改好就執行程式，另一個方式則是建立MockViewModel讓它顯示於Designer上，另一個副作用是xaml intellisense也會有用，下面是注意事項

  1. 實作 MockDesignViewModel.
  2. xmlns:d的意思是使用 xaml blend namespace  "d". 
  3. mc:Ignorable="d" 表示runtime可忽略d
  4. d:DataContext 表示只在deisntime建立 MockDesignViewModel
  5. 顯示如果有問題，可以參考 How to debug in wpf design view 


  1. <--! Example of Usercontrol using a design instance >
  1. <UserControl x:Class="WpfCustomControl.UserControl1"
  2.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  5.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  6.              xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
  7.              xmlns:s="clr-namespace:System;assembly=mscorlib"
  8.              xmlns:local="clr-namespace:WpfCustomControl"
  9.              mc:Ignorable="d" 
  10.              d:DesignHeight="800" d:DesignWidth="600"
  11.              d:DataContext="{d:DesignInstance Type=local:MockDesignViewModel, IsDesignTimeCreatable=True}"
  12.              >
  1. </UserControl>
  1.  

  1. // Exmaple of a mock design view model.
  1.  public class MockDesignViewModel
  2.  {
  3.   public MockDesignViewModel()
  4.   {
  5.    m_Pic = new MockPicture();
  6.    m_R = new MockRegister();
  7.    m_Str = new MockStringLookup();
  8.   }
  9.  
  10.   public IIndexableGetter<BitmapImage> PIC
  11.   {
  12.    get
  13.    {
  14.     return m_Pic;
  15.    }
  16.   }
  17.  
  18.   public IIndexableGetter<int> R
  19.   {
  20.    get
  21.    {
  22.     return m_R;
  23.    }
  24.   }
  25.  
  26.   public IIndexableGetter<string> STR
  27.   {
  28.    get
  29.    {
  30.     return m_Str;
  31.    }
  32.   }
  33.  
  34.   IIndexableGetter<BitmapImage> m_Pic;
  35.   IIndexableGetter<int> m_R;
  36.   IIndexableGetter<string> m_Str;
  37.  }
  38.  
  39.  public class MockStringLookup : IIndexableGetter<string>
  40.  {
  41.   public string this[ string szIndex ]
  42.   {
  43.    get
  44.    {
  45.     string[] szSplit = szIndex.Split( ':' );
  46.     if( szSplit.Length == 0 ) {
  47.      return string.Empty;
  48.     }
  49.     return szSplit[ szSplit.Length - 1 ];
  50.    }
  51.   }
  52.  }
  53.  
  54.  public class MockRegister : IIndexableGetter<int>
  55.  {
  56.   public int this[ string szIndex ]
  57.   {
  58.    get
  59.    {
  60.     int nIndex = 0;
  61.     bool bParse = Int32.TryParse( szIndex, out nIndex );
  62.     return nIndex;
  63.    }
  64.   }
  65.  }
  66.  
  67.  public class MockPicture : IIndexableGetter<BitmapImage>
  68.  {
  69.   public MockPicture()
  70.   {
  71.    // This is where solution is in design time
  72.    string szWorkingDir = Environment.CurrentDirectory;
  73.  
  74.    // Get out of 3 layer folder
  75.    m_szPictureDir = szWorkingDir;
  76.   }
  77.  
  78.   public BitmapImage this[ string szIndex ]
  79.   {
  80.    get
  81.    {
  82.     string szCombinedpath = m_szPictureDir + "\\" + szIndex;
  83.     string szActualPath = Path.GetFullPath( szCombinedpath );
  84.     var uri = new Uri( szActualPath );
  85.     BitmapImage bmp = new BitmapImage( uri );
  86.     return bmp;
  87.    }
  88.   }
  89.   // Private
  90.   string m_szPictureDir;
  91.  }
  1.  

References:
  1. Basic knowledge of WPF
    1. Understanding the change in mindset when switching from WinForms to WPF
    2. What is this "DataContext" you speak of?
    3. A Simple MVVM Example
  2. WPF Hosting
    1. Walkthrough: Hosting a WPF Composite Control in Windows Forms.
  3. Data binding
    1. Data Binding Overview
  4. ICommand
    1. ICommand MVVM implementation
  5. DesignTime settings 
    1. How to debug in wpf design view
Posted by at No comments:
Labels: , , , , , , , , ,

Monday, September 16, 2019

Quick Guide for Using WPF UserControl in Winform

Preface


In this article, you will know following things in a tiny example.
  1. Create a winform to host WPF control.
  2. Let user change layout by editing xaml without compilation, so you don't have to worry about version control of your user.
  3. Inject dependantcy in WPF from winform.
    ( It is easy, but I found it's hard to know when I have zero knowledge about WPF. )
  4. How to let user self design in WPF designer looks identical ( or similar ) as in runtime.
This article suites for who
  1. Having experience in winform C# development.
  2. Don't have time to start from scratch.
  3. Wants to give WPF a try in your winform project.
  4. Searching hard but don't know how to pass reference into WPF viewmodel.

Why would I want to try wpf:
  1. I want my users to change GUI layout without compilation.
  2. My users don't know how to write C# code, but they have some knowledge of xml.
Before running through the example, here are some terms you need to know.
  1. MVVM-- Model-View-ViewModel: Kind of similar to MVC.
    1. Model: Your data.
    2. View: What you see in WPF designer. Equivalent to winform UserControl.Designer.cs
    3. ViewModel: In a WPF control, it s your Control.Datacontext. It controls how view to display model. 
    4. In MVVM, code-behind is better to be as tiny as possible.
  2. Code-Behind:
    1. It is equivalent to C# UserControl.cs
  3. Loose xaml:
    1. Xaml without x:Class attribute, where x:Class is equivalent to winform designer partial class.

   First of all, you need a winform to host WPF control, and there is a good example in microsoft document. 

   Though this example is complete enough, it uses code-behinde to handle button click event.
This xaml of example is not loose xaml.. You can't load it in runtime property, unless doing something dirty (subscribing events) in code behind.
I will suggest to use ICommand interface to handle button click and it will be implemented in my example. I don't use any third-party library in this example, but you may want to take a look at MVVM Light  or Prism if you dig deeper in WPF.

How to host WPF Control

Example here. It is using dot net 4.0, but 4.5 or above will work as well.
  1. Click Example.sln.
  2. Look at WPFHost project. And following dlls are needed
    1. PresentationCore
    2. PresentationFramework
    3. System
    4. WindowsBase
  3. Form1.cs will show you how to host WPF control.
  4. RSource is dependency injected into WPF usercontrol. It is connected to device registers, but it's out of scope of this article.
  5. ctrlHost is hosting WPF control and MUST be added in a panel control.
  6. In microsoft document, this code of snippet is placed in Form_Load. I don't know what would went wrong if it's in ctor. Haven't try it yet.
  1.   private void Form1_Load( object sender, EventArgs e )
  2.   {
  3.    RSource Source = new RSource();
  4.    ctrlHost = new ElementHost();
  5.    ctrlHost.Dock = DockStyle.Fill;
  6.    panel1.Controls.Add( ctrlHost );
  7.    wpfAddressCtrl = new WpfCustomControl.UserControl1( Source );
  8.    wpfAddressCtrl.InitializeComponent();
  9.    ctrlHost.Child = wpfAddressCtrl;
  10.   }


Make a WPF Control with MVVM

Example here ( same as above one, just in case you're jumping into here )
  1. Look at WpfCustomControls project
  2. Right click on UserControl1.xaml and choose "View code", or expand this control and click UserControl1.xaml.cs.
  3. this.Content is the View.
  4. this.DataContext is the ViewModel, and that's why I put my RSource reference in CncViewModel.
  5. Also in GetXamlWithoutxClassDirective, I remove x:Class attribute while loading. This method is pretty straight-forward but I can't find any substitute of it..
  1.   void LoadXAMLMethod()
  2.   {
  3.    // Changing content need to be out of constructor
  4.    try {
  5.     System.Diagnostics.Debug.WriteLine( "LoadXaml" );
  6.     string szActualPath = Path.GetFullPath( @".\..\..\..\WpfCustomControls\UserControl1.xaml" );
  7.     string szXaml = GetXamlWithoutxClassDirective( szActualPath );
  8.     UserControl rootObject = XamlReader.Parse( szXaml ) as UserControl;
  9.     this.Content = rootObject;
  10.     this.DataContext = new CncViewModel( m_Source );
  11.    }
  12.    catch( FileNotFoundException ex ) {
  13.     MessageBox.Show( ex.Message.ToString() );
  14.    }
  15.   }
  1.  
  1.   private string GetXamlWithoutxClassDirective( string m_szFilepath )
  2.   {
  3.    string szFailedText = string.Empty;
  4.    string szFullText = string.Empty;
  5.    using( StreamReader sr = new StreamReader( m_szFilepath ) ) {
  6.     szFullText = sr.ReadToEnd();
  7.    }
  8.    int nDirectiveStartIndex = szFullText.IndexOf( "x:Class" );
  9.    if( nDirectiveStartIndex == -1 ) {
  10.     return szFullText;
  11.    }
  12.    // finding x:Class="abcdeftg.gxy"
  13.    int nStartQuote = szFullText.IndexOf( "\"", nDirectiveStartIndex + 1 );
  14.    if( nStartQuote == -1 ) {
  15.     return szFailedText;
  16.    }
  17.    int nEndQuote = szFullText.IndexOf( "\"", nStartQuote + 1 );
  18.    if( nEndQuote == -1 ) {
  19.     return szFailedText;
  20.    }
  21.    //  where "after" second " 
  22.    int nDirectiveEndIndex = nEndQuote + 1;
  23.    int nDirectiveLength = nDirectiveEndIndex - nDirectiveStartIndex;
  24.    string szNotDirectiveText = szFullText.Remove( nDirectiveStartIndex, nDirectiveLength );
  25.    return szNotDirectiveText;
  26.   }

   You may find I'm loading UserControl1.xaml in runtime. Because I will use UserControl1.xaml as designer interface, so User may user xaml designer as GUI to design their own view.

How do I connect View to data?

    Look at Data Binding Overview would be better. Also I have simple summary here for you:
  1. Using {Binding PropertyOfViewModel} will let you bind properties of your DataContext directly. Only properties work, a field is not allowed.
  2. Every element of DataContext is inherit from parent until you assign a different one.
    (ref: What is this "DataContext" you speak of?)

   Here's my ViewModel and my syntax implementation.
Remember I set this.DataContext = new CncViewModel( m_Source );

  1. In my case, I need to let user put custom picture and string on xaml, so I need my own syntax to let WPF control get my string.
  2. I use IIndexableGetter to provide indexer of let STR[InsertKeyHere] to get my custom string syntax. Also PIC[Filepath] would also display the picture.
  3. You may see   ICommand MyCommand  . That is the implementation about ICommand and it will set you free from event. If 

  1.  public class CncViewModel : INotifyPropertyChanged
  2.  {
  3.   public CncViewModel( RSource source )
  4.   {
  5.    m_R = source;
  6.    m_Pic = new MockPicture();
  7.    m_Str = new MockStringLookup();
  8.  
  9.    // Using a timer to update value
  10.    tmr = new System.Timers.Timer();
  11.    tmr.AutoReset = true;
  12.    tmr.Interval = 300;
  13.    tmr.Elapsed += M_Source_TimeTicked;
  14.    tmr.Enabled = true;
  15.  
  16.   }
  17.   Timer tmr;
  18.   private void M_Source_TimeTicked( object sender, EventArgs e )
  19.   {
  20.    firePropChanged( "R" );
  21.    firePropChanged( "STR" );
  22.   }
  23.   void firePropChanged( string szProp )
  24.   {
  25.    if( PropertyChanged == null ) {
  26.     return;
  27.    }
  28.    PropertyChanged( this, new PropertyChangedEventArgs( szProp ) );
  29.   }
  30.   public IIndexableGetter<int> R
  31.   {
  32.    get
  33.    {
  34.     return m_R;
  35.    }
  36.   }
  37.   public IIndexableGetter<string> STR
  38.   {
  39.    get
  40.    {
  41.     return m_Str;
  42.    }
  43.   }
  44.   public IIndexableGetter<BitmapImage> PIC
  45.   {
  46.    get
  47.    {
  48.     return m_Pic;
  49.    }
  50.   }
  51.  
  52.   public ICommand MyCommand
  53.   {
  54.    get
  55.    {
  56.     return new RelayCommand( ParseSyntecCmd );
  57.    }
  58.   }
  59.  
  60.   public void ParseSyntecCmd( string[] arr )
  61.   {
  62.    Console.WriteLine( "Cmd fired" );
  63.    if( arr == null ) {
  64.     Console.WriteLine( "Null" );
  65.     return;
  66.    }
  67.    foreach( var szStr in arr ) {
  68.     // Implement string command here
  69.     Console.WriteLine( "Prm: " + szStr );
  70.    }
  71.   }
  72.  
  73.   // private
  74.   IIndexableGetter<BitmapImage> m_Pic;
  75.   IIndexableGetter<int> m_R;
  76.   IIndexableGetter<string> m_Str;
  77.   public event PropertyChangedEventHandler PropertyChanged;
  78.  }
  1.  
  1.  
  1.  public class MockStringLookup : IIndexableGetter<string>
  2.  {
  3.   public string this[ string szIndex ]
  4.   {
  5.    get
  6.    {
  7.     // Implement your own custom string or multilanguage mechanism.
  8.     string[] szSplit = szIndex.Split( ':' );
  9.     if( szSplit.Length == 0 ) {
  10.      return string.Empty;
  11.     }
  12.     return szSplit[ szSplit.Length - 1 ];
  1.    }
  2.   s}
  3.  }sdfsd
  1.  
  1.  
  1.  

    The xaml of a button named "CycleStart". ( It's not really called CycleStart in loose xaml, because loose xaml don't have x syntax. ).

  1. Button.Command show you how to bind multiply self defined syntax in Command
    1. If there is only one parameter, simply use  CommandParameter="SomeSyntax".
    2. Example Button.CommandParameter below shows how to define an array of string in xaml.
  2. Button.Style is a self explanatory demo. If R[6000] value is 1, background is pink. If R[6000] is 0, background is white.

  1.         <Button
  2.             Grid.Column="2"
  3.             x:Name="CycleStart" 
  4.             Margin="22,10,105,0" VerticalAlignment="Top" Height="49"
  5.             Command="{Binding MyCommand}">
  6.             <Button.CommandParameter>
  7.                 <x:Array Type="{x:Type s:String}">
  8.                     <s:String>MySyntax_Inv R6000.0</s:String>
  9.                     <s:String>MySyntax_R6001=2</s:String>
  10.                 </x:Array>
  11.             </Button.CommandParameter>
  12.             <Button.Style>
  13.                 <Style TargetType="{x:Type Button}">
  14.                     <Style.Triggers>
  15.                         <DataTrigger Binding="{Binding R[6000]}"
  16.                             Value="1">
  17.                             <Setter Property="Background" Value="Pink" />
  18.                         </DataTrigger>
  19.                         <DataTrigger Binding="{Binding R[6000]}"
  20.                             Value="0">
  21.                             <Setter Property="Background" Value="White" />
  22.                         </DataTrigger>
  23.                     </Style.Triggers>
  24.                 </Style>
  25.             </Button.Style>
  26.             <Image x:Name="image" Height="43" Width="43" Source="{Binding PIC[Images\\play.png]}"/>
  27.         </Button>

Simulate runtime display in WPF designer

Example here ( same as above one, just in case you're jumping into here )

   You might find some of display (eg: content strings) in designer is different from runtime. Rather than always run your program on runtime to see the change, all you need is a mocked ViewModel to display in designer. Also it will allow user to use intellisense in xaml which is a convenient side-effect of mocking ViewModel. Here are some notes:

  1. Implement your own MockDesignViewModel.
  2. xmlns:d xaml namespace aliasing as "d" in xaml. In this case, d is for blend to be shown in designtime.
  3. mc:Ignorable="d"  means ignore xmlns:d it on runtime.
  4. d:DataContext ...etc means it will create an instance of MockDesignViewModel on designtime.
  5. If you have troubles in getting design view right, How to debug in wpf design view would help a lot.


  1. <--! Example of Usercontrol using a design instance >
  1. <UserControl x:Class="WpfCustomControl.UserControl1"
  2.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  5.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  6.              xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
  7.              xmlns:s="clr-namespace:System;assembly=mscorlib"
  8.              xmlns:local="clr-namespace:WpfCustomControl"
  9.              mc:Ignorable="d" 
  10.              d:DesignHeight="800" d:DesignWidth="600"
  11.              d:DataContext="{d:DesignInstance Type=local:MockDesignViewModel, IsDesignTimeCreatable=True}"
  12.              >
  1. </UserControl>
  1.  

  1. // Exmaple of a mock design view model.
  1.  public class MockDesignViewModel
  2.  {
  3.   public MockDesignViewModel()
  4.   {
  5.    m_Pic = new MockPicture();
  6.    m_R = new MockRegister();
  7.    m_Str = new MockStringLookup();
  8.   }
  9.  
  10.   public IIndexableGetter<BitmapImage> PIC
  11.   {
  12.    get
  13.    {
  14.     return m_Pic;
  15.    }
  16.   }
  17.  
  18.   public IIndexableGetter<int> R
  19.   {
  20.    get
  21.    {
  22.     return m_R;
  23.    }
  24.   }
  25.  
  26.   public IIndexableGetter<string> STR
  27.   {
  28.    get
  29.    {
  30.     return m_Str;
  31.    }
  32.   }
  33.  
  34.   IIndexableGetter<BitmapImage> m_Pic;
  35.   IIndexableGetter<int> m_R;
  36.   IIndexableGetter<string> m_Str;
  37.  }
  38.  
  39.  public class MockStringLookup : IIndexableGetter<string>
  40.  {
  41.   public string this[ string szIndex ]
  42.   {
  43.    get
  44.    {
  45.     string[] szSplit = szIndex.Split( ':' );
  46.     if( szSplit.Length == 0 ) {
  47.      return string.Empty;
  48.     }
  49.     return szSplit[ szSplit.Length - 1 ];
  50.    }
  51.   }
  52.  }
  53.  
  54.  public class MockRegister : IIndexableGetter<int>
  55.  {
  56.   public int this[ string szIndex ]
  57.   {
  58.    get
  59.    {
  60.     int nIndex = 0;
  61.     bool bParse = Int32.TryParse( szIndex, out nIndex );
  62.     return nIndex;
  63.    }
  64.   }
  65.  }
  66.  
  67.  public class MockPicture : IIndexableGetter<BitmapImage>
  68.  {
  69.   public MockPicture()
  70.   {
  71.    // This is where solution is in design time
  72.    string szWorkingDir = Environment.CurrentDirectory;
  73.  
  74.    // Get out of 3 layer folder
  75.    m_szPictureDir = szWorkingDir;
  76.   }
  77.  
  78.   public BitmapImage this[ string szIndex ]
  79.   {
  80.    get
  81.    {
  82.     string szCombinedpath = m_szPictureDir + "\\" + szIndex;
  83.     string szActualPath = Path.GetFullPath( szCombinedpath );
  84.     var uri = new Uri( szActualPath );
  85.     BitmapImage bmp = new BitmapImage( uri );
  86.     return bmp;
  87.    }
  88.   }
  89.   // Private
  90.   string m_szPictureDir;
  91.  }
  1.  

References:
  1. Basic knowledge of WPF
    1. Understanding the change in mindset when switching from WinForms to WPF
    2. What is this "DataContext" you speak of?
    3. A Simple MVVM Example
  2. WPF Hosting
    1. Walkthrough: Hosting a WPF Composite Control in Windows Forms.
  3. Data binding
    1. Data Binding Overview
  4. ICommand
    1. ICommand MVVM implementation
  5. DesignTime settings 
    1. How to debug in wpf design view

If there is any inaccurate description, that would be my fault. Please feel free to let me know what is wrong.
Posted by at No comments:
Labels: , , , , , , , , ,

Sunday, December 4, 2016

How does a monkey to start Dota2 Modding

My goal is to create an infinite bouncing Luna moon glaives.
1. Just to change mechanisms.
2. No FX required.

Progress:


All I have to do:
1. Get mod working
 --  Myll's getting started really helped.
https://moddota.com/forums/discussion/142/getting-started-with-dota-2-modding

2. Get to know how to customize an ability ( Data driven ability,  Key value and Lua script )
-- Noya's Beginner's guide is cool.
https://moddota.com/forums/discussion/135/beginners-guide-to-dota-scripting

3. Oh my god.. I can't just change a parameter to let moon glaives bouncing 666 times..
    Shall I reinvent the wheel?
-- All works had been done by MNoya's Sepll Library! Thank to open source!
https://github.com/Pizzalol/SpellLibrary

4. Umm.. this wheel doesn't work.
-- Seems after dota2 modkit merged all document, everything goes wrong..
-- Taking time to check it out later.
Posted by at No comments:
Labels: , ,
Subscribe to: Posts (Atom)