KEYEVENTF_EXTENDEDKEY

zeKeyのメイン機能 キーコード送信にはSendInputを使っています
SendInputには KEYBDINPUT構造体に値をセットして渡すのですが dwFlagsには常にKEYEVENTF_EXTENDEDKEY（拡張キーフラグ）を付けていました

正しくは右Shiftやフルキーボードでいう矢印やDelの列のキー等に付くものなのですが 余計につけても動くという情報も見ましたし 実際動いていました

しかしVisual StudioのエディタでCtrl+ホイール（コードの拡大縮小）をしたところ不具合が出ました（その後のテストでShiftもおかしいと判明）

左Ctrlに拡張キーフラグがセットされているとKeyDownは認識されてコードの拡大縮小はできますが KeyUpは無視するようで通常のスクロールにはならず拡大縮小が継続されてしまいました（当然ですが右Ctrlなら拡張キーなので想定通りの動作になります）

セットするべきキーとセットしないキーは実際実験すればすぐわかるのですが Key列挙体には見た事もない実験のできないキーがたくさんあって困ってしまいます
仮想キーコードが決まれば拡張フラグも決まると思うのですがなんとかならないものか

現状 面倒なので左Alt Ctrl Shiftだけ付けないようにしていますｗ

xamlでエキスパンダーのヘッダーにツールチップ表示

拙作のスキン画面にあるエキスパンダー
<Expander Header="スキンフォルダ(_D)">
のヘッダーにツールチップを付けようとしたところ

<Expander Header="スキンフォルダ(_D)" ToolTip="なんたら">
では内部全体に付いてしまいました（当たり前）

<Expander>
  <Expander.Header>
    <TextBlock Text="スキンフォルダ(_D)" ToolTip="なんたら"/>
  </Expander.Header>
</Expander>
にしたらツールチップは思った通りにヘッダーに付きました（当たり前）
しかし スキンフォルダ(_D)と表示されてアクセスキー機能が働かなくなりました

アクセスキー（アクセラレータキー）とは
メニューバーの[ファイル(F)]とかのFの部分
通常はAlt+Fで選択されます 条件によってはAlt無しでも動きます
ちなみに[コピー(C) Ctrl+C]のCtrl+Cの部分はショートカットキーです

実際には何を使ってるのかをライブビジュアルツリー（VS2015の新機能 便利ですね）で見てみたところAccessTextとなっていました
ほとんどの場合AccessTextに自動でラップされるようで表に出てきませんが こういう場合は明示的に書く必要があります

で結局
<Expander>
  <Expander.Header>
    <AccessText Text="スキンフォルダ(_D)" ToolTip="なんたら"/>
  </Expander.Header>
</Expander>
にすればよいということです
テンプレート書く羽目になるかと思っていたので 簡単に解決してよかったです

かな入力モード ConversionMode

以下の情報は私の環境での結果です 違う環境ではどうなっているか分かりません
Windows7 MS-IME 日本語109キーキーボード

ローマ字入力かな入力の切り替えは

          <z:LRButton.LeftTypeKeys>
            <z:TypeKeys TypeKey="LeftAlt">
              <z:TypeKeys TypeKey="OemCopy" />
            </z:TypeKeys>
          </z:LRButton.LeftTypeKeys>

で注意喚起のダイアログが出た上で トグル動作でした
この場合 入力モードは正常に取得できました

ＩＭＥオンの時かなキー
<z:LRButton TypeKey="OemCopy">
だけを押すと一時的に変えるモードなのかよくわかりませんが 何かキーを押すまで入力モードが反映されませでした

かなモードでの英数入力は 英数キー（Capsキー）ですが
<z:LRButton TypeKey="OemAttn">
でトグル動作でした
<z:LRButton TypeKey="Capital"/>
はCapsのトグル動作でした

KeyState.ConversionModeに実際値が入っています ＩＭＥオフの時は {x:Null} です

引用 (AutoHotkey)(IMEの制御をする 編) - もらかなです。

状態一覧表
0 = かな入力 半角英数
3 = かな入力 半角カナ
8 = かな入力 全角英数
9 = かな入力 全角ひらがな
11 = かな入力 全角カタカナ
16 = ローマ字入力 半角英数
19 = ローマ字入力 半角カタカナ
24 = ローマ字入力 全角英数
25 = ローマ字入力 全角ひらがな
27 = ローマ字入力 全角カタカナ

zeKeyセキュリティ対策

今のところzeKeyでは

外部アセンブリ禁止

Blend機能は惜しい気もしますが そこまで必要性は感じないし ほかのDLL読み込んでまで必要な機能が思いつかない
DLL自作出来るような人はもっといいのを作ってください

namespaceはスキン用以外読み込ませない

Ｃ＃は逆コンパイルも簡単らしいので（よく知りませんが）クラス名やメンバ名がわかってもいいように namespaceを分けてxmlns:zを決め打ちすることで安全性が上がるはず
System等が欲しいなと思う時もあるんですが あまりにも広範囲すぎて危なそうなので禁止します

スキンからのアクセスをそのフォルダ以下に制限

Image等のSourceを内部で強制変換します

HyperlinkExクリックで確認ダイアログ

当然ですね

をセキュリティ対策としたいと思います

セキュリティガバガバはさすがにイヤですが ユーザーの自由度がなくなってしまっては意味が無いのでこのあたりが落し所かなと思います
もちろん大穴が見つかったら修正するつもりですが どうしようもない場合公開中止もあるかもしれません

セキュリティ対策をユーザーの責任でキャンセルを許すかどうかですが
スキン設定ファイルにユーザー固有値を含めた上で暗号化して保存する等で 十分安全を担保して実現可能だと思います がそこまで必要か悩み中です


悪意のあるスキンを使ってしまった というのは
例えば ランチャーソフト向けに（ランチャーソフトとは無関係の悪意がある人が）便利設定と偽って設定ファイルとＰＣ破壊バッチファイルをセットで公開し それを使ってしまったのと大差ないというのは言いすぎでしょうか？
それとも ブラウザのバグを突いてＨＰを開いただけでＰＣがクラッシュするような状況に近いのでしょうか？
前者はさすがに使ったユーザーの責任 後者はソフト側にも責任（法的には損害賠償などは無理でしょうが）があるような感じがしますが スキンファイルの扱いは前者寄りだと思うのですがどうでしょう？

無責任な言い方かもしれませんが 十二分に注意喚起して それ以上はユーザー責任で使ってもらうしかないかなと思います

簡単！ Path作成

xamlで標準で使えるデータとしてPathがあります
ベクターデータなので画像よりサイズが小さいですし 拡大しても荒れません
作成チュートリアルとしてEnterキーを作ってみます

Blend for Visual Studio 2015

Visual Studio Community 2015をインストールすると一緒に付いてくる Blend for Visual Studio 2015で作成します

コルタナさんで検索しBlendを起動して 新規WPFプロジェクトを作ります

Canvas

アセット-コントロール-パネルからCanvasをドラッグ&ドロップします

Canvasを右クリックしてレイアウト-すべてリセット

Rectangle

アセット-図形-RectangleをCanvasにドラッグ&ドロップ

Rectangleを選択してプロパティウィンドウから RadiusX,Yをマウスホイールで5に変更して角を丸めます

Rectangleをコピー&ペーストで４つ作ります

Rectangleをサイズ調整し↑のように重ねます

結合

重ねたRectangleをCtrlクリックで両方選択して 右クリック-結合-合算でPathにします

もうひとつ↑のように合算します

最後のRectangleを↑のように配置して今度は減算します
位置がずれるとガタガタになるのでマウスホイールで拡大したり RectangleのFillを無しにしたりしてしっかり合わせてください
減算の時は抜きたい方（左下のRectangle）を先に選択し 抜かれる方（右上のPath）を後に選択します

ペンツール

ペンツールを選択するとPathのコントロールポイントが見えるようになります
ドローソフトに慣れている方はベジェ曲線等で自由に描いてみてください

合算で出来てしまった不要なポイントをクリックして削除します

xaml

デザインからXAMLに切り替えます（↑はXamlStylerでFormat XAMLをした後です）

以上で終了です スキンにコピペして使ってみましょう

 <Path Width="92"
            Height="127"
            Data="M5.5,0.5 L86.5,0.5 C89.26,0.5 91.5,2.74 91.5,5.5 L91.5,32.5 91.5,121.5
            C91.5,124.26 89.26,126.5 86.5,126.5 L21.5,126.5 C18.74,126.5 16.5,124.26   
            16.5,121.5 L16.5,64.5 C16.5,61.74 14.26,59.5 11.5,59.5 L5.5,59.5 C2.74,59.5  
            0.5,57.26 0.5,54.5 L0.5,5.5 C0.5,2.74 2.74,0.5 5.5,0.5 z"
            Fill="#FFF4F4F5"
            Stretch="Fill"
            Stroke="Black" />

数値に微妙な誤差が出ていてちょっと気持ち悪いので 小数点第３位を四捨五入してすっきりさせました

絵心があればイラスト等も描けるのですが 私は無いのでこれで精一杯ですｗ

レインボーアニメーション

一発ネタっぽいですがｗｗ

某天国.xaml より（わかりやすいように背景のみにしています）
元ネタ Rainbow color Animation by GradientStops[index].offset : Color « Windows Presentation Foundation « VB.Net Tutorial

<Rectangle Margin="15,50,15,15">
  <Rectangle.Fill>
    <LinearGradientBrush x:Name="brush">
      <LinearGradientBrush.GradientStops>
        <GradientStop Color="Red"/>
        <GradientStop Color="Orange"/>
        <GradientStop Color="Yellow"/>
        <GradientStop Color="Green"/>
        <GradientStop Color="Blue"/>
        <GradientStop Color="Indigo"/>
        <GradientStop Color="Violet"/>
      </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
  </Rectangle.Fill>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard SpeedRatio="3" TargetName="brush">
          <DoubleAnimation Duration="0:0:7"
                            RepeatBehavior="Forever"
                            Storyboard.TargetProperty="GradientStops[0].Offset"
                            To="1"/>
          <DoubleAnimation BeginTime="0:0:1"
                            Duration="0:0:7"
                            RepeatBehavior="Forever"
                            Storyboard.TargetProperty="GradientStops[1].Offset"
                            To="1"/>
          <DoubleAnimation BeginTime="0:0:2"
                            Duration="0:0:7"
                            RepeatBehavior="Forever"
                            Storyboard.TargetProperty="GradientStops[2].Offset"
                            To="1"/>
          <DoubleAnimation BeginTime="0:0:3"
                            Duration="0:0:7"
                            RepeatBehavior="Forever"
                            Storyboard.TargetProperty="GradientStops[3].Offset"
                            To="1"/>
          <DoubleAnimation BeginTime="0:0:4"
                            Duration="0:0:7"
                            RepeatBehavior="Forever"
                            Storyboard.TargetProperty="GradientStops[4].Offset"
                            To="1"/>
          <DoubleAnimation BeginTime="0:0:5"
                            Duration="0:0:7"
                            RepeatBehavior="Forever"
                            Storyboard.TargetProperty="GradientStops[5].Offset"
                            To="1"/>
          <DoubleAnimation BeginTime="0:0:6"
                            Duration="0:0:7"
                            RepeatBehavior="Forever"
                            Storyboard.TargetProperty="GradientStops[6].Offset"
                            To="1"/>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

コピペコードですが スキンロード時に タイミングをずらしながら７色の基準位置を変更するアニメーションを開始して 虹スクロールするようになっています
そのため最初は単色なのと 左右両端で色が変わる時に ちょっと期待（画像を無限スクロールするようなイメージ）と違う動作になっていますが まあそんなに目立たないでしょう
単独で使う場合は何か他の方法がいいかもしれませんが 思いついていませんｗ

EventTrigger と Storyboard は非常に強力なので何かいいアイデアを思いついたら どんどん活用したいですね

zeKeyのTypeKeyで指定する値とキーボードの対応表

ぶっちゃけた話 .NETのSystem.Windows.Input.Key をそのまま使っています
ここやここをみればいいんですが とても見やすいとは思えないのでまとめました

日本語109キーボードでの対応表

画像クリックで元画像
グレーのキーは文字そのままで通ります（xamlでは大文字小文字の区別はしないようです）
半角/全角キーとひらがな/カタカナキーは 特殊な挙動をしますので実際にキーコードを追ってください（とはいえzeKeyで完全に再現するのは無理です）
IMEのOnOffはKanjiModeで良いです

ややこしい記号キー部分

意味とキーが合っているものは意味のある名前 合ってないものは番号にしました
詳しくは↓の表を見てください

xamlで通るSystem.Windows.Input.Key値

複数の定義があるKey値やKeyConverterで変換されるものも含む
日本語キーボードになさそうなものは除外

Key値	説明
Cancel, BREAK	Break キー Ctrl+Pause
Back, BACKSPACE, BKSP, BS	Backspace キー
Tab	TAB キー
Clear	Clear キー NumLock中にテンキーの５キー
Return, Enter	Enter キー
Pause	Pause キー
Capital, CapsLock	CapsLock キー
KanaMode	IMEかなモード キー
KanjiMode	IME漢字モード キー Alt+半角/全角
Escape, ESC	Esc キー
ImeConvert	変換 キー
ImeNonConvert	無変換 キー
Space	Space キー
Prior, PageUp, PGUP	PageUp キー
Next, PageDown, PGDN	PageDown キー
End	End キー
Home	Home キー
Left	← キー
Up	↑ キー
Right	→ キー
Down	↓ キー
Snapshot, PrintScreen, PRTSC	PrintScreen キー
Insert, INS	Insert キー
Delete, DEL	Delete キー
D0	0 キー(テンキーでは無い方) 数字のみの0は不可
｜
D9	9 キー(テンキーでは無い方) 数字のみの9は不可
A	A キー
｜
Z	Z キー
LWin, WINDOWS, WIN, LEFTWINDOWS	左Windows キー
RWin, RIGHTWINDOWS	右Windows キー
Apps, APPLICATION	アプリケーション キー
NumPad0	テンキーの0 キー
|
NumPad9	テンキーの9 キー
Multiply	テンキーの* キー
Add	テンキーの+ キー
Subtract	テンキーの- キー
Decimal	テンキーの. キー
Divide	テンキーの/ キー
F1	F1 キー
|
F12	F12 キー
NumLock	NumLock キー
Scroll	ScrollLock キー
LeftShift, SHIFT	左Shift キー
RightShift	右Shift キー
LeftCtrl, CONTROL, CTRL	左Ctrl キー
RightCtrl	右Ctrl キー
LeftAlt, ALT	左Alt キー
RightAlt	右Alt キー
BrowserBack	ブラウザーの戻る キー
BrowserForward	ブラウザーの進む キー
BrowserRefresh	ブラウザーの更新 キー
BrowserStop	ブラウザーの中止 キー
BrowserSearch	ブラウザーの検索 キー
BrowserFavorites	ブラウザーのお気に入り キー
BrowserHome	ブラウザーのホーム キー
VolumeMute	音量ミュート キー
VolumeDown	音量ダウン キー
VolumeUp	音量アップ キー
MediaNextTrack	メディアの次のトラック キー
MediaPreviousTrack	メディアの前のトラック キー
MediaStop	メディアの停止 キー
MediaPlayPause	メディアの再生/一時停止 キー
SelectMedia	メディアの選択 キー
LaunchMail	メールを起動 キー
LaunchApplication1	アプリケーション1の起動 キー
LaunchApplication2	アプリケーション2の起動 キー
Oem1, OemSemicolon, SEMICOLON	:* キー (注意)
OemPlus	;+ キー
OemComma, COMMA	,< キー
OemMinus, MINUS	-= キー
OemPeriod, PERIOD	.> キー
Oem2, OemQuestion	/? キー
Oem3, OemTilde	@` キー (注意)
Oem4, OemOpenBrackets	[{ キー
Oem5, OemPipe	￥| キー
Oem6, OemCloseBrackets	]} キー
Oem7, OemQuotes, QUOTES	^~ キー (注意)
Oem102, OemBackslash, BACKSLASH	￥_ キー

以下IME関連？
私も良くわからないのでキーコードを表示しながらキーボードを打ってみてください

FinalMode	The IME Final mode key.
ImeAccept	The IME Accept key.
ImeModeChange	The IME Mode change request.
OemAttn, DbeAlphanumeric	The OEM_ATTN key.
OemFinish, DbeKatakana, FINISH	The OEM_FINISH key.
OemCopy, DbeHiragana	The OEM_COPY key.
OemAuto, DbeSbcsChar	The OEM_AUTO key.
OemEnlw, DbeDbcsChar	The OEM_ENLW key.
OemBackTab, DbeRoman	The OEM_BACKTAB key.
Attn, DbeNoRoman	The ATTN key.

xamlでの色指定方法

xamlで色の指定をする時に
<Border Background="○○"/>等
の○○に入れる文字列です

RGB 値で

#rgb
例：#F00 赤

#argb
例：#80F0 半透明緑

#rrggbb
例：#00FFFF 水色

#aarrggbb
例：#800000FF 半透明青

文字で

xamlで 文字による指定可能な色は Colors クラス にある色のようです
リンクの下のほうに色見本がありますが 全部画像で非常に使いづらいので「UNIX X11 colors」で検索してください
DarkSeaGreen 以外は同じだそうです（wikipediaによると）

例：DeepPink 濃いピンク

システムリソースで

<Border>
  <Border.Background>
    <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.GradientActiveCaptionColorKey}}"/>
  </Border.Background>
</Border>

のようにして Windowsで個人設定した色をリアルタイムで反映させることが出来ます
上の例ではボーダー背景を アクティブタイトルバー色に設定
詳しくは SystemColors クラス を参照

ユーザーごとの好みにあったスキン色に設定できますが どんな色かの予想が付かないので注意が必要です

チュートリアル 05 zeKeyで色変更

<!--  zeKey skinfile  https://ze-key.blogspot.jp/  -->
<z:Keyboard xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:z="clr-namespace:zeKey.Skin;assembly=zeKey"
            Width="300"
            Height="72"
            z:DragMoveBehavior.CanMove="True"
            Background="{DynamicResource 背景}"
            Foreground="{DynamicResource 文字}">
  <z:Keyboard.Resources>
    <SolidColorBrush x:Key="文字" Color="Black" />
    <SolidColorBrush x:Key="背景" Color="White" />
  </z:Keyboard.Resources>
  <Grid>
    <Viewbox>
      <TextBlock>
        Hello, world!
      </TextBlock>
    </Viewbox>
    <z:ResizeGrip />
  </Grid>
</z:Keyboard>
 
<!--
  <z:Keyboard.Resources>というタグが出てきました
  使いまわしたいブラシやスタイルの置き場です
  詳しい説明は省きますがzeKeyの機能により
  SolidColorBrush(単色ブラシ)は色の変更ができるようになります
  x:KeyにzeKeyの色タブで表示される文字 Colorに初期設定色を指定して
  "{DynamicResource 背景}"のように参照します
 
  色をリアルタイムで変更可能になりましたが つまみの色まで変わってしまいました
  親の属性の値が子要素に引き継がれるものがあります FontSizeもそうでした
  z:KeyboardのBackground Foreground指定が
  TextBlock z:ResizeGripに引き継がれて色が変わります
  20行目を
    <z:ResizeGrip Foreground="Black"/>
  に変えてください 新たに指定した場合は 引き継いだ規定値より優先されます
  こうするとテキストだけが変わるようになります
-->

SolidColorBrushを色のように扱っていますが 正確にはBrushは色ではなく塗りです
なのでグラデーションブラシや画像ブラシ等もあります
Background等の属性はほとんどの場合 Brushを要求するので簡単に指定できるようにSolidColorBrushで指定することにしています
グラデーションは別の機会に解説します

チュートリアル 04 リサイズ追従

<!--  zeKey skinfile  https://ze-key.blogspot.jp/  -->
<z:Keyboard xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:z="clr-namespace:zeKey.Skin;assembly=zeKey"
            Width="300"
            Height="72"
            z:DragMoveBehavior.CanMove="True"
            Background="White">
  <Grid>
    <Viewbox>
      <TextBlock>
        Hello, world!
      </TextBlock>
    </Viewbox>
    <z:ResizeGrip />
  </Grid>
</z:Keyboard>
 
<!--
  中身がリサイズによって拡大縮小するようになりました
  大きさが変わるのでフォントサイズ指定は意味がなくなったので削除しました
 
  10行目を
  <Viewbox Stretch="Fill">
  に変えてみてください
  また6行目を削除してみてください
  そのうちのどれかは希望する動作だと思います
-->

拡大縮小にはViewboxが便利です 中身を自分のサイズに自動調整します
拡縮方法(Stretch)と拡縮方向(StretchDirection)を選べます

ViewboxはGridいっぱいに広がっており Gridはz:Keyboardいっぱいに広がっているため TextBlockは結局z:Keyboardのサイズになります

チュートリアル 03 リサイズグリップ

<!--  zeKey skinfile  https://ze-key.blogspot.jp/  -->
<z:Keyboard xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:z="clr-namespace:zeKey.Skin;assembly=zeKey"
            Width="300"
            Height="72"
            z:DragMoveBehavior.CanMove="True"
            Background="White"
            FontSize="48">
  <Grid>
    <TextBlock>
      Hello, world!
    </TextBlock>
    <z:ResizeGrip />
  </Grid>
</z:Keyboard>
 
<!--
  リサイズ可能にするつまみが付きました
  
  タグによって子供の要素を複数持てるものと1つだけしか持てないものがあります
  Keyboardは１つしか持てないので間に要素を複数持てるGridというのを挟みます
  Gridは文字は持てないので「Hello, world!」をTextBlockという文字表示用コントロールに挟みます
  14行目がリサイズ用のつまみです デフォルトでは右下に3本線のつまみが出ます
  
  Width="300" Height="72"と数値で指定しています
  今まではスキンは中身のサイズに合わせるという設定になっていました
  なのでフォントサイズによって大きさが自動で変わりましたが
  リサイズ可能にするには数値を指定して自動サイズ設定を解除する必要があります
  
  これでリサイズするようになりました
  しかし期待している動作はこれではないと思います
  次回リサイズに中身も追従するようにします
-->

うすうす感じているかもしれませんが z:が付くものはzeKey独自のコントロールです
実はz:の付かない<ResizeGrip>もあるのですが中の処理が違うため使えません

チュートリアル 02 ドラッグ移動

<!--  zeKey skinfile  https://ze-key.blogspot.jp/  -->
<z:Keyboard xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:z="clr-namespace:zeKey.Skin;assembly=zeKey"
            z:DragMoveBehavior.CanMove="True"
            Background="White"
            FontSize="48">
  Hello, world!
</z:Keyboard>
 
<!--
  3行増えまして マウスドラッグで移動可能になりました
  5行目がマウスで移動できるようにする設定です
  今のところ付けたら動かせると思っておけばＯＫです
  
  ドラッグしやすいように 6行目で背景色を付け 7行目で文字を大きくしました
-->

Visual Studioで編集している場合はプロパティウィンドウでいろいろと変更可能です
実験してみてください

チュートリアル 01 最小のスキン

<!--https://ze-key.blogspot.jp-->
<z:Keyboard xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:z="clr-namespace:zeKey.Skin;assembly=zeKey">
  Hello, world!
</z:Keyboard>
 
<!--
  最小のスキンファイル
  スペースや改行 表示する文字以外 １文字も削れません
  
  画面左上100,100の位置に「Hello, world!」と表示する
  スキン設定のうち 概要 色は何も表示されないが フォント 隠す設定 詳細は変更可能
  マウスでの移動 リサイズはできない
-->

お約束のハロワです
１行目はコメントですがスキンファイルには必須です 最低でも2行目以内には「https://ze-key.blogspot.jp」の表記がないとスキンとして読み込みません

2～4行目は開始タグですが訳が分かりませんね とりあえずそう書くものと思ってください
xamlはhtmlよりタグの中が長くなりやすいです

5行目 htmlと同じように内容（コンテンツ）部分です

6行目 終了タグです スキンは<z:Keyboard></z:Keyboard>で囲わなければいけません（コメントは除く）

スキン改造 - 画像

ソリューションに画像を追加して２２４行目にImegeを入れましょう

        <Image Canvas.Left="456"
               Height="295"
               Source="pack://siteoforigin:,,,/Skin/sd20_lie-down.png" />

キートップがちょっと邪魔なので透明度を設定します


面白いかは別として Contentを利用すればこういう事もできます

        <z:LRRepeatButton Canvas.Left="230"
                          Canvas.Top="240"
                          Width="115"
                          Height="35"
                          Content="スペース"
                          TypeKey="Space" >
          <z:LRRepeatButton.Background>
            <ImageBrush ImageSource="pack://siteoforigin:,,,/Skin/sd20_lie-down.png"
                                 Stretch="Uniform"/>
          </z:LRRepeatButton.Background>
        </z:LRRepeatButton>

こういう方法もあります

好きな画像を使って自分だけのキーボードにしてみましょう
配布する場合は著作権に注意してください

スキン改造 - 配置

キーを減らすのは簡単です 選択してDelキーです（メニューや右クリックメニューにもあります）


複数選択はCtrl+クリックで出来ます
マウスドラッグで選択もできますが 余計なものも選択されたり移動になってしまったりするので Ctrl+クリックが確実です


キーの位置はマウスでドラッグするかプロパティ-レイアウト-Left Topでマウスホイール またはコードに直接数値を入れることで変更できます
幅と高さも同様です


大きさや位置変更もマウス操作で好きにいじりましょう
その際書式メニューに 整列や同じサイズに揃える がありますので使ってください


全体のサイズを変える時は一旦z:KeyboardのWidth Heightを削除しCanvasのサイズを変更します


大きさが決まったらCanvasのWidth Heightと同じ数値をz:KeyboardのWidth Heightに設定します（そうしないとリサイズが出来なくなってしまいます）


TN仕様そっくりになってしまいましたが それぞれ自分の理想の配置にしてください

スキン改造 - キートップ

手始めに「フルキーボード」スキンを改造していきます


スキン作成環境 構築編３の要領でVSでプロジェクトを作り「フルキーボード.xaml」を追加-既存の項目として読み込みます（zeKeyの参照も忘れずに） これでSkinフォルダにコピーされ元のファイルとは別のファイル扱いになっていますので 編集してもＯＫです 念のためファイル名を変えておきましょう

単純にキートップの文字を変える場合は 変えたいキーを選択し プロパティウィンドウかコードウィンドウでContentを書き換えます

ひらがな等２行になるものはちょっと面倒ですがこんな感じでしょうか？

        <z:LRRepeatButton Canvas.Left="140"
                          Canvas.Top="80"
                          Width="35"
                          Height="35"
                          TypeKey="D3" >
          <z:LRRepeatButton.Content>
            <TextBlock >
              <Run Text="＃ ぁ" />
              <LineBreak />
              <Run Text="３ あ" />
            </TextBlock>
          </z:LRRepeatButton.Content>
        </z:LRRepeatButton>

こだわって隙間等の微調整もいくらでもできますが フォントが変わると簡単にずれるので程々にしておくのがよいと思います（数が多くて面倒なだけｗｗ）

スキン改造 - 基本

Visual Studioの簡単な説明


スキン（.xaml）を開くとデザイナとコードエディタが出ます
左右か上下か選べます 幅やズームを調整できます
グリッド表示やスナップ メニューや右クリックメニューに順序や整列があります


何か選択してプロパティウィンドウを表示すると アイテムのプロパティを変更できます
よく使うのは ブラシ 共通 レイアウト zeKey あたりでしょうか


コードの緑色はコメントです 一通り読んでおきましょう

データバインディング

xamlにはデータバインディングという強力な機能があります
プログラム内の値やxamlの要素間で値を結びつけることができます
結びつけるというのは単に値を取得するというわけではなく 変更がリアルタイムに反映され表示が変化します
変更通知モードによっては ＵＩの操作をプログラム側のデータ変更として通知できます
またプログラムにコマンドが用意されていれば プログラムコードを直接呼ぶことができます

zeKeyではプログラム内の値（データコンテキスト）は CapsLock等のモード付キーの状態やキー送信のコマンド等が用意されています
<DataTrigger Binding="{Binding ModeKeys.ImeLock}" Value="true">

<MouseBinding Command="{Binding TypeKeyCommand}" CommandParameter="Up" Gesture="{z:WheelUp}" />

{}波括弧で囲われた部分はマークアップ拡張といってバインディング等を楽に書けるようにした xamlの拡張部分です

{に続いてBindingと書かれた部分がバインディングで 続く値を=の前の値と結びます
説明だけではわかりにくいのでサンプルスキンで使っているところを参考にしてください

xaml基礎

xamlとは

xaml(eXtensible Application Markup Language)は
xml(eXtensible Markup Language)を拡張したファイル形式です
xmlはhtmlのようなツリー構造をテキストで表現するファイル形式です
htmlとJavaScriptのような関係で xamlとC#等でプログラムを作る際に見た目の記述に使います

詳しい説明は他のサイトを見て頂くとして 簡単に説明します

xamlはひとつだけ要素を持ちます（ルート要素）

<要素></要素>
がひとつの塊です

要素は中身を持つことが出来ます（子要素）

<要素>何か</要素>

中身を持っていない場合
<要素></要素>
は
<要素/>
と省略できます

子供の子供の...と深くすることが出来ます

<要素>
    <子要素>
        <孫要素/>
    </子要素>
</要素>

内側より先に外が終わることは出来ません

<要素>
    <子要素>
        <孫要素>
    </子要素>
        <孫要素/>
</要素>
  ＮＧ

子要素を複数持てるものがあります（持て無いものもあります）

<要素>
    <子要素>
        <孫要素/>
        <孫要素/>
    </子要素>
    <子要素/>
</要素>

要素は属性を持てます 属性は「＝””」で値を指定します

<要素 属性１="値" 属性２="値" 属性３="値"/>

改行や複数の空白は無視されます

<要素 属性１="値"
       属性２="値">
    <子要素>
        <孫要素/>
    </子要素>
</要素>
と
<要素 属性１="値" 属性２="値"><子要素><孫要素/></子要素></要素>
は同じです

<!-- -->で囲われた部分はコメントになり無視されます

<要素>
    <!--コメント-->
    <子要素/>
</要素>

しかしコメントも要素の一種なので「<>」の中には書けません
<要素 属性１="値"
<!--コメント-->
"属性２="値"/>
ＮＧ

属性を「<要素.属性>」として子要素にすることが出来ます

<要素 属性="値"/>
と
<要素>
    <要素.属性>値</要素.属性>
</要素>
は同じです

実は子要素を持つというのは 要素ごとに決まっている既定属性値に入れているということです
実例を出します
<TextBlock>
    zeKey
</TextBlock>
は子要素として文字列「zeKey」を持っています TextBlock の 既定属性は Text なので
<TextBlock Text="zeKey"/>
と同じ意味になります

<TextBlock>
     <TextBlock.Text>
        zeKey
    </TextBlock.Text>
</TextBlock>
と展開することも出来ます この場合ただ長くなっただけで無意味ですが

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
</Grid>
のように属性値を複数持てる属性を指定する場合に使います

値はすべて文字列です

しかしxamlを読み込む段階で自動で変換されます
<TextBlock Width="100"/>
100は数値に変換されます

ですが属性が期待している値に 変換できないような値は 当然エラーになります
<TextBlock Width="テキストブロック"/>
ＮＧ

要素 属性は大文字小文字を区別します

<Textblock width="100"/>
ＮＧ

プロジェクト

ではスキン作成用のプロジェクトを作ります

スタートページの新しいプロジェクト... または メニューの ファイル - 新規作成 - プロジェクト... を選択
Visual C# ＷＰＦアプリケーション 適当な名前を付けて ＯＫボタン
ソリューションのディレクトリを作成はアンチェック


ソリューション エクスプローラーで参照を右クリック 参照の追加... または メニューの プロジェクト - 参照の追加... を選択


さらに 参照...ボタンを押して


zeKeyをインストールしたフォルダのzeKey.exeを選択します


ソリューション エクスプローラーでスキンプロジェクトの右クリックから 追加 - 新しいフォルダー または メニューの プロジェクト - 新しいフォルダー でSkinフォルダを作成
 

ここまではスキン作成用プロジェクトの設定です
スキンを複数作る場合は以下を繰り返せばＯＫです

Skinフォルダにサンプルスキンをドラッグ&ドロップしてください
Skinフォルダにコピーされます


ソリューション エクスプローラーでスキンをダブルクリックし開きます
無事に表示されましたでしょうか


以上でスキン作成の準備が出来ました
エラーが出るようでしたら

• メニューの ビルド - ソリューションのリビルド をしてみてください

警告が出ると思われるのでプロジェクトのプロパティでターゲットを.NET4.6に変更します

• xamlファイルを開きなおすとエラーが消えることがあります
• ＶＳ自体を再起動でエラーが消えることがあります

それでも駄目な時は設定をもう一度確認してください

スキンフォルダ（インストールファルダ\Skin）の扱い

サブフォルダも作れますので 適当に整理してください
スキンに使う画像等はスキンと同じフォルダかその子孫フォルダに入れてください（スキンより上や兄弟フォルダではいけません）

起動中の名前変更やフォルダ移動等は感知しませんので再取得（スキンフォルダ(D)を右クリックもしくはCtrl+R）が必要です

「_」アンダーバーから始まるフォルダやファイルは非表示になります

リソースフォルダやバックアップ用ファイル等に利用してください

拡張機能

ではまず より便利になる拡張機能の導入をしておきます
非常に簡単なのですぐに終わります

ＶＳを立ち上げたらメニューの ツール - 拡張機能と更新プログラム... を選んで
以下の拡張をインストールしてください

XamlStyler

コードビューの右クリックメニューに「Format XAML」という整形メニューを追加します
インデント（見やすいように字下げ）だけでなく プロパティを並び変えて 統一した見た目のコードにしてくれます
行数が増えてしまいますが 頻繁に横スクロールするより楽です
注意

オプション（メニューのツール - オプション... - Xaml Styler）でElement Reorderingの「Reorder Canvas panel children by left/top/fight/bottom」はFalseにしてください
キーボードスキンと非常に相性が悪いです（行ごとに順番に並べていたのに 列ごとに並べ替えられてしまいました）

Highlight all occurrences of selected word

標準で付いていて欲しいですが 選択した文字と同じ部分をハイライト表示します 定義したリソースやスタイルを探すのに無いと非常に不便です

Productivity Power Tools 2015

いろいろ機能が入っています メニューの ツール - オプションを確認してください

Text Sharp

コレは好みだと思いますが設定したフォントによっては かなり汚くなるので気になったらどうぞ
このフォントはCodeMです