DevExpress でのラジオボタンの枠線カスタマイズ設定

DevExpress でのラジオボタン（ASPxRadioButton）の枠線カスタマイズ設定のサンプルです。

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

＜ラジオボタンの枠線カスタマイズ設定＞

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

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

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

【サンプルプログラム】

<div>
    <dx:ASPxRadioButton ID="ASPxRadioButton1" runat="server" Text="兵庫県" 
        Theme="RedWine" Checked="True" Font-Bold="True" Font-Size="X-Large" 
        ForeColor="#3333CC" GroupName="GRP">
        <Border BorderColor="#FF66FF" BorderWidth="5px" />
    </dx:ASPxRadioButton>
    <dx:ASPxRadioButton ID="ASPxRadioButton2" runat="server" Text="京都府" 
        Theme="RedWine" Font-Bold="True" Font-Size="X-Large" ForeColor="#3333CC" 
        GroupName="GRP">
        <BorderLeft BorderColor="#FF66FF" BorderStyle="Solid" BorderWidth="5px" />
        <BorderRight BorderColor="#FF66FF" BorderStyle="Solid" BorderWidth="5px" />
    </dx:ASPxRadioButton>
    <dx:ASPxRadioButton ID="ASPxRadioButton3" runat="server" Text="大阪府" 
        Theme="RedWine" Font-Bold="True" Font-Size="X-Large" ForeColor="#3333CC" 
        GroupName="GRP">
        <Border BorderColor="#FF66FF" BorderWidth="5px" />
    </dx:ASPxRadioButton>
</div>

<div>

<dx:ASPxRadioButton ID="ASPxRadioButton1" runat="server" Text="兵庫県"

Theme="RedWine" Checked="True" Font-Bold="True" Font-Size="X-Large"

ForeColor="#3333CC" GroupName="GRP">

</dx:ASPxRadioButton>

<dx:ASPxRadioButton ID="ASPxRadioButton2" runat="server" Text="京都府"

Theme="RedWine" Font-Bold="True" Font-Size="X-Large" ForeColor="#3333CC"

GroupName="GRP">

</dx:ASPxRadioButton>

<dx:ASPxRadioButton ID="ASPxRadioButton3" runat="server" Text="大阪府"

Theme="RedWine" Font-Bold="True" Font-Size="X-Large" ForeColor="#3333CC"

GroupName="GRP">

</dx:ASPxRadioButton>

</div>

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

↓

無事に「京都府」の上下線を1重表示設定が出来ました。

関連記事はこちら:

DevExpress の ASPxRadioButton、ASPxRadioButtonList とは「ASPxRadioButton」はラジオボタンで複数の項目から一つ選択が可能です。正直「Microsoft Visual Studio」で提供されているラジオボタンと同じです。作成手順は、下記の流れです。・項目数 ......
DevExpress でのラジオボタンの枠線タイプ設定 DevExpress でのラジオボタン（ASPxRadioButton）の枠線タイプ設定のサンプルです。現状の画面デザインはこのようになっています。＜ラジオボタンの枠線タイプ設定＞・全「ASPxRadioButto ......
DevExpress でのラジオボタンと名称の隙間設定 DevExpress でのラジオボタン（ASPxRadioButton）と名称の隙間設定のサンプルです。現状の画面デザインはこのようになっています。＜ラジオボタンと名称の隙間設定＞・全「ASPxRadioButto ......
DevExpress でのラジオボタンのサイズ設定 DevExpress でのラジオボタン（ASPxRadioButton）のサイズ設定のサンプルです。現状の画面デザインはこのようになっています。＜ラジオボタンのサイズ設定＞・全「ASPxRadioButton」に対 ......
DevExpress でのラジオボタンの枠線設定 DevExpress でのラジオボタン（ASPxRadioButton）の枠線設定のサンプルです。現状の画面デザインはこのようになっています。＜ラジオボタンの枠線設定＞・全「ASPxRadioButton」の「Bo ......
DevExpress でのラジオボタンの文字色設定 DevExpress でのラジオボタン（ASPxRadioButton）の文字色設定のサンプルです。現状の画面デザインはこのようになっています。＜ラジオボタンの文字色設定＞・全「ASPxRadioButton」に対 ......
DevExpress でのラジオボタンのフォント設定 DevExpress でのラジオボタン（ASPxRadioButton）のフォント設定のサンプルです。現状の画面デザインはこのようになっています。＜ラジオボタンのフォント設定＞・全「ASPxRadioButton」 ......
DevExpress のサンプル作成（ASPxRadioButton） DevExpress のサンプル作成（ASPxRadioButton）手順です。項目数分「ASPxRadioButton」を配置して下さい。＜サンプル作成（ASPxRadioButton）＞・ラジオボタン生成（A ......
DevExpress の ASPxRadioButton でのデザイン（テーマ一覧） DevExpress の ASPxRadioButton でのデザイン（テーマ一覧）のサンプルです。各オブジェクトのテーマ設定は見てみないと違いが分かりません。今回はラジオボタンのテーマ一覧を作成しました。＜デザイ ......
DevExpress でのラジオボタン情報取得（JavaScript） DevExpress でのラジオボタン情報取得（JavaScript）のサンプルです。現状の画面デザインはこのようになっています。＜ラジオボタン情報取得（JavaScript）＞・全「ASPxRadioButton ......

投稿タグ: ASPxRadioButton

MENU

最近の投稿

人気記事