ようこそ zeKey software keyboard のページへ

zeKeyとは
最初にお読みください 特徴と注意事項等

ダウンロード
ダウンロード方法

使い方
豊富な画像でわかりやすく説明します

同梱スキン
同梱スキンについて画像と簡単な説明

スキン作成ガイド
スキン作成について環境構築から丁寧に解説（更新中）

ブログ
解説ブログなのであまり関係のない記事は書きません
読みやすいように投稿日時を変更することがあります

Ver. 1.1.0 差し替え

【更新履歴】
Ver. 1.1.0 2017/5/1 小変更・バグ修正
・スキン向きのコンテナコントロール追加。
・Keyboardスキンを上記コントロールで書き換え。
・タイプライター風スキンの小さいスペースキーに割り当てがなかった。
・落書きスキンで使用しているWidth HeightのBindingが効いていなかった。
・「エクスプローラーでスキンフォルダを開く」メニューが効かなかった。
・隠し属性とシステム属性のフォルダ&ファイルを表示しないようにした。

本日公開されました

http://www.vector.co.jp/soft/winnt/util/se514849.html

StackGrid

exe化されてしまうxamlでは気にはなっていましたが まあいいかと思っていたのですが スキンはテキストなのでGridの冗長さが非常に気になります
簡潔に書けるように StackPanelのような使い勝手の1行(1列)Gridを作りました

    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="30" />
        <ColumnDefinition /><!--<ColumnDefinition Width="*" />-->
        <ColumnDefinition Width="2*" />
      </Grid.ColumnDefinitions>
      <Button Content="aaaaa" />
      <Button Grid.Column="1" />
      <Button Grid.Column="2" />
      <Button Grid.Column="3" />
    </Grid>

これが

    <z:StackGrid><!--<z:StackGrid Orientation="Horizontal">-->
      <Button z:StackGrid.Length="Auto" Content="aaaaa" />
      <Button z:StackGrid.Length="30" />
      <Button /><!--<Button z:StackGrid.Length="*" />-->
      <Button z:StackGrid.Length="2*" />
    </z:StackGrid>

こう書けます

メリット

• ColumnDefinitions(RowDefinitions)の行を削減できる
• Grid.Column="1"等を書かなくて済む

ほとんどの場合セル１つに１つのコントロールでしょうから行数を半分にできます
コントロールの追加や削除の際に数字を変えるのがほんと面倒でした

デメリット

• 1行または1列限定
• Grid.ColumnSpan(RowSpan)に当たるものがない
• 子要素を重ねられない

1行限定はStackGridなりGridなりを重ねれば済むことが多いと思いますSpanは1行なら使いたいことはまずないはずです
子要素を重ねられないのはやや残念ですが 作りこむのが面倒だったのでそういう場面では素直にGridを使ってください

メモ帳でカスタマイズ

スキンファイルはテキストファイルですので メモ帳やテキストエディタで編集ができます

フルキーボード.xamlを例にメモ帳でも出来る範囲の改造をいくつか紹介します
メモ帳でフルキーボード.xamlを開き編集したら上書き保存をしてzeKeyでリロードします

キートップの文字の変更

Spaceキーの文字をなくしてみます
"Space"を検索します

Content="Space"の部分を削除するか Content=""とします
もちろん Content="スペース"とすればカタカナで表示されます

その下に TypeKey="Space"とありますがそちらはいじってはいけません
TypeKeyはこのボタンが何キーかという指定なので 変えるとスペースキーと認識されなくなってしまいます

ちょっと大きすぎて間の抜けたテンキーの＋キーは Content=" + "と両側にスペースを入れると少しはましになるかもしれません

数個のキーを削除する

右Alt Win Ctrlを削除してみます
"RightAlt"を検索します

          <z:LRToggleButton Canvas.Left="450"
                            Canvas.Top="250"
                            Width="35"
                            Height="35"
                            Content="Alt"
                            TypeKey="RightAlt" />
を丸ごと削除します
そのすぐ下にTypeKey="RWin"とTypeKey="RightCtrl"のz:LRToggleButtonもあるので同様に削除します
フルキーボード.xamlでは各キーは絶対配置（左上座標と幅 高さ）での指定なので 削除した部分は何もないエリアになります

キーの場所 大きさを変える

開いた空間がもったいないのでスペースキー変換キーを大きくしてみます
先ほどのRightAltのすぐ上にそのあたりのキーがあるので Canvas.Top="250"やWidth="35"の数字を大きくしてみてください
位置や大きさが変わるのが確認できると思います
ですがメモ帳で変更を上書き保存→zeKeyでリロードの繰り返し作業で あまりにも面倒すぎますね


実際キートップの文字変更以上のことは メモ帳には荷が重いと思いますので この次で説明するVisual Studioを使用してください

スキン構造

通常WPFアプリケーションのxamlは
<Window>
  <StackPanel>
    <TextBlock />
    <Button />
  </StackPanel>
</Window>
のような作りになります（属性は省略）
Windowがルート要素になりラベルやボタンとレイアウトを決めるコンテナ等で構成され
それぞれに属性を設定することで好みのデザインにしていきます

zeKeyのスキンではz:Keyboardという専用のコントロールをルート要素にします
z:Keyboardには自動で隠れる機能 それを設定する属性や概要のための属性 隠れた（出た）イベント等必要なすべての機能が用意されています
そして適切なコンテナを挟んで ソフトキーボードのキー用に最適化された z:LRButtonやz:LRRepeatButtonを必要な個数レイアウトし
<z:Keyboard>
  <StackPanel>
    <z:LRButton />
    <z:LRRepeatButton />
  </StackPanel>
</z:Keyboard>
といった構造になります

スキン作成時の注意点

トグルボタンはFocusable="False"にセットする

<ToggleButton Focusable="False"/>

スキンを開いた直後等キーボードフォーカスが他のウィンドウにない状態の時
トグルボタンを押した後 エンターキーやスペースキーでトグルボタンが押されてしまう
トグルボタンの動作としては合っているが ソフトキーボードとしては余計な動作なのでFalseに設定し無効にする
z:LRToggleButtonはデフォルトでFalseになっているので設定不要

ControlTemplateにTargetTypeがない時のTemplateBinding

'System.NotSupportedException'
'System.Xaml.XamlObjectWriterException' が出るが普通に動いている気がする
RelativeSource TemplatedParentにするか TargetType指定で消えた

ResourcesのSolidColorBrushはソートし表示される

x:Keyの名前順にソートするので それを踏まえて名前を付けていただくと見やすくなります
スペースも許容されるので利用してください

エスケープ

xmlと同じです
よく使うもの
&: &amp;
>: &gt;
<: &lt;
": &quot;
': &apos;

&#[10進数]; または &#x[16進数];
&#10;と&#xa;はどちらも改行「\n」です

xaml固有のものは「{}」があります
""の最初に「{」を置く場合Binding等と混同しないよう"{}{"とする必要があります

スキン作成 プロジェクト

作成直後

スキン作成には要らないフォルダやファイルばかりですが特に気にしないでＯＫです

フォルダ構成

Skinフォルダを作成してその中にスキンを入れてください
図のようにzeKey.exeとXceed.Wpf.Toolkit.dllをコピーしておくとテストが楽になります

ファイル参照

外部ファイルの参照は
"pack://siteoforigin:,,,/Skin/image.png"や
"pack://siteoforigin:,,,/Skin/_img/image.png"のようになります