スキン改造 - キートップ

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


スキン作成環境 構築編３の要領で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です

Visual Studio

前置き

Visual Studio Community 2015 もしくはVisual Studio Express 2015 for Desktopは
プログラム作成のための統合開発環境です（for Desktopはインストールしていないので詳しくは分かりませんが デスクトップアプリ専用版だと思います）

ひとつだけ難点は非常にサイズが大きいことです ダウンロードファイルの容量は約3.7GBだそうです
これひとつででデスクトップアプリやストアアプリ アンドロイドやｉＯＳ Ｗｅｂアプリまで 何でも作れてしまうので しょうがないですね
しかしxaml編集のためだけに入れても十分メリットがあります

Visual Studioで出来ること

構文エラー表示

スキンは１文字間違えただけでエラーになりますが 大部分の間違いを指摘してくれます（１００％全部ではありません）
エラーが出ても説明が分かりにくかったりしますが どこが悪いかだけでもありがたいです

デザインビュー

はっきり言ってマウスのみで全部出来るわけではありませんが 一目で状態がわかるのは大きいです もしこのようなプレビュー機能が無かったら絶対作る気しないです
コントロールの追加や移動なんかはコードビューでコピペする方が早いです うまく使い分けてください

ＧＵＩでプロパティ編集

コントロールに関連するプロパティをＧＵＩで編集できます
どんなプロパティがあるかがわかるので編集が簡単です
プロパティ名をタイプする必要がないので大体の値を入れてコードで微調整等使い分けてください

自動補完

コードビューで文字をタイプすると文法的に合っている補完候補が出てきます
この後は何を書くんだっけ？となっても困らないですし スペルをはっきり覚えていなくても先頭数文字で すばやく入力できます 頭を大文字にしなくていいのもいいですね

色分け表示

コレ多分デフォルト設定だと思うんですが xamlに関しては赤成分が多すぎて ちょっと見ずらいです
もちろんカスタマイズ出来ますので好みに変更してください

オプション設定

VSの私の設定（ツール - オプション...）は

xamlは階層が深くなりがちなので右に行きすぎないように xamlに限ってインデントをスペース２個に設定する


コードは等幅フォントが見やすいと思うので CodeM に変更しています
各自カスタマイズしてください