WPF Template を編集して Button コントロールの見た目をカスタマイズ

WPF では Template プロパティを書き換えることで、デフォルトの見た目を大きくカスタマイズすることができるようになっています。
ここでは Template プロパティを使って Button コントロールに画像を埋め込んでみます。なお、Visual Studio のバージョンは 2013 です。

１．Button コントロールを右クリックし、「テンプレートの編集」→「コピーして編集」を選択します。

２．「Style リソースの作成」ダイアログが表示されるので、「OK」をクリックします。


３．ButtonStyle1 というキーを持つ、Button をターゲットとするスタイルが生成されますので、<Setter Property="Template"> という箇所を探し出します。<Setter Property="Template"> には外観や振る舞いが記述されています。<ControlTemplate TargetType="{x:Type Button}"> 内に外観が定義されていて、contentPresenter というキーを持つ ContentPresenter 内にボタンのテキスト部分が定義されていますので、この ContentPresenter の横に画像を配置していきます。

編集前：

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Border>
        ...

編集後：
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                <StackPanel Orientation="Horizontal">
                    <Image Source="BlueRect.PNG" Width="13px"/>
                    <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </StackPanel>
            </Border>
        ...

実行結果：


今回は単純にボタン内の横に四角い画像を埋め込んだだけでしたが、Template プロパティを利用して様々なユーザーコントロールの見た目を自由にカスタマイズでき、Windows Forms では実現することのできないような柔軟なカスタマイズを行うことができます。

Placehold.jp ラベルやボタン画像を作成することができるサービス

Placehold.jp というサイトでは簡単にラベルやボタン画像を生成することができます。
サイズのテンプレートやカラーピッカーが用意されていますので、手軽に画像生成ができます。

Placehold.jp
http://placehold.jp/

ベックス コーヒー ショップ 新百合ヶ丘OPA

新百合ヶ丘で週末ノマドしようと出かけてきました！
ベックス コーヒー ショップでは電源が使える席が6席ありました。コンセントの口は全部で 8 つあります。

ぷららモバイルLTE 定額無制限プランを Wi-Fiルーター L-09C で利用

昨日ぷららモバイルLTE の無制限 SIM が我が家に届きました！10/24 に申し込みをして、11/07 に届きましたので到着まで 2 週間でした。
モバイルルーターは L-09C を使っています。ぷららのサポートに問い合わせたところ L-09C は動作保証外との回答をもらっていましたが、SIM ロックを解除しなくても問題なく動作しました。設定項目をメモしておきます。

 

１．L-09C の管理画面にログイン

http://192.168.2.1/ から L-09C の管理画面にアクセスします。


デフォルトのユーザーは Admin、パスワードは 1234 です。


２．プロファイルの作成

ログイン後、「NETWORK」　>　「Profile」 を選択します。画面右下の Add New ボタンをクリックしてぷららモバイル LTE 用のプロファイルを登録します。

ぷららから郵送されてくる「ぷらら会員登録証」を用意します。下記設定項目のうち、Username には「ユーザID 」を、Password は「本パスワード」をそれぞれ設定します。

項目名	値
Profile name	任意のプロファイル名を入力
Username	ぷららのユーザーID@plala.or.jp
Password	ぷららの本パスワード
Authentication	lte.mobac.net
APN	CHAP

入力を終えたら、「Save」ボタンを押します。


３．プロファイルの選択

「NETWORK」　>　「Profile」 画面に戻るので、Current Profile から登録したプロファイルを選択し、「Apply」ボタンを押します。



これで L-09Cでの設定は終わりです。

接続デバイスからL-09C の SSID を選択し、 L-09C の接続パスワードを入力して接続できます。