DevExpress でのチェックボックスの枠線カスタマイズ設定

DevExpress でのチェックボックス（ASPxCheckBox）の枠線カスタマイズ設定のサンプルです。

現状の画面デザインはこのようになっています。
それぞれの項目の枠線表示の為に「京都府」の上下線が2重表示のように見えます。
今回は、「京都府」の上下線を1重表示に変更します。

＜チェックボックスの枠線カスタマイズ設定＞

・「ASPxCheckBox（京都府）」の「Border」を削除します。

・「ASPxCheckBox（京都府）」の「BorderLeft」に対して「BorderColor=”#3399FF”」、「BorderStyle=”Solid”」、「BorderWidth=”5px”」を設定します。

・「ASPxCheckBox（京都府）」の「BorderRight」に対して「BorderColor=”#3399FF”」、「BorderStyle=”Solid”」、「BorderWidth=”5px”」を設定します。

【サンプルプログラム】

<div>
    <dx:ASPxCheckBox ID="ASPxCheckBox1" runat="server" Text="兵庫県" Theme="RedWine" 
        Checked="True" CheckState="Checked" Font-Size="X-Large" ForeColor="#CC3399">
        <Border BorderColor="#3399FF" BorderWidth="5px" />
    </dx:ASPxCheckBox>
    <dx:ASPxCheckBox ID="ASPxCheckBox2" runat="server" Text="京都府" Theme="RedWine" 
        Checked="True" CheckState="Checked" Font-Size="X-Large" ForeColor="#CC3399">
        <BorderLeft BorderColor="#3399FF" BorderStyle="Solid" BorderWidth="5px" />
        <BorderRight BorderColor="#3399FF" BorderStyle="Solid" BorderWidth="5px" />
    </dx:ASPxCheckBox>
    <dx:ASPxCheckBox ID="ASPxCheckBox3" runat="server" Text="大阪府" Theme="RedWine" 
        Checked="True" CheckState="Checked" Font-Size="X-Large" ForeColor="#CC3399">
        <Border BorderColor="#3399FF" BorderWidth="5px" />
    </dx:ASPxCheckBox>
</div>

<div>

<dx:ASPxCheckBox ID="ASPxCheckBox1" runat="server" Text="兵庫県" Theme="RedWine"

Checked="True" CheckState="Checked" Font-Size="X-Large" ForeColor="#CC3399">

</dx:ASPxCheckBox>

<dx:ASPxCheckBox ID="ASPxCheckBox2" runat="server" Text="京都府" Theme="RedWine"

Checked="True" CheckState="Checked" Font-Size="X-Large" ForeColor="#CC3399">

</dx:ASPxCheckBox>

<dx:ASPxCheckBox ID="ASPxCheckBox3" runat="server" Text="大阪府" Theme="RedWine"

Checked="True" CheckState="Checked" Font-Size="X-Large" ForeColor="#CC3399">

</dx:ASPxCheckBox>

</div>

それでは、実行して動作確認を行います。

↓

無事にチェックボックスの枠線カスタマイズ設定が出来ました。

関連記事はこちら:

DevExpress の ASPxCheckBox、ASPxCheckBoxList とは「ASPxCheckBox」はチェックボックスで複数項目を選択することが可能です。正直「Microsoft Visual Studio」で提供されているチェックボックスと同じです。また設定手順は、過去ブログの「De ......
DevExpress でのチェックボックスの枠線タイプ設定 DevExpress でのチェックボックス（ASPxCheckBox）の枠線タイプ設定のサンプルです。現状の画面デザインはこのようになっています。＜チェックボックスの枠線タイプ設定＞・全「ASPxCheckBox」 ......
DevExpress でのチェックボックスとテキストの隙間設定 DevExpress でのチェックボックス（ASPxCheckBox）とテキストの隙間設定のサンプルです。現状の画面デザインはこのようになっています。＜チェックボックスとテキストの隙間設定＞・全「ASPxCheck ......
DevExpress でのチェックボックスのテキスト位置設定 DevExpress でのチェックボックス（ASPxCheckBox）のテキスト位置設定のサンプルです。現状の画面デザインはこのようになっています。＜チェックボックスのテキスト位置設定＞・全「ASPxCheckBo ......
DevExpress でのチェックボックスの枠線設定 DevExpress でのチェックボックス（ASPxCheckBox）の枠線設定のサンプルです。現状の画面デザインはこのようになっています。＜チェックボックスの枠線設定＞・全「ASPxCheckBox」の「Bord ......
DevExpress でのチェックボックスの文字色設定 DevExpress でのチェックボックス（ASPxCheckBox）の文字色設定のサンプルです。現状の画面デザインはこのようになっています。＜チェックボックスの文字色設定＞・全「ASPxCheckBox」に対して ......
DevExpress でのチェックボックスの初期選択設定 DevExpress でのチェックボックス（ASPxCheckBox）の初期選択設定のサンプルです。現状の画面デザインはこのようになっています。＜チェックボックスの初期選択設定＞・全「ASPxCheckBox」に対 ......
DevExpress でのチェックボックスのフォント設定 DevExpress でのチェックボックス（ASPxCheckBox）のフォント設定のサンプルです。現状の画面デザインはこのようになっています。＜チェックボックスのフォント設定＞・全「ASPxCheckBox」に対 ......
DevExpress のサンプル作成（ASPxCheckBox） DevExpress のサンプル作成（ASPxCheckBox）手順です。作成手順は項目数分「ASPxCheckBox」を配置します。＜サンプル作成（ASPxCheckBox）＞・チェックボックス生成（ASPxC ......
DevExpress でのチェックボックスの背景色設定 DevExpress でのチェックボックス（ASPxCheckBox）の背景色設定のサンプルです。現状の画面デザインはこのようになっています。＜チェックボックスの背景色設定＞・全「ASPxCheckBox」に対して ......

投稿タグ: ASPxCheckBox

MENU

最近の投稿

人気記事