DevExpress の ASPxTrackBar でのメモリハイライト設定

DevExpress の ASPxTrackBar でのメモリハイライト設定のサンプルです。

現状の画面デザインはこのようになっています。

今回は、カーソル位置までのメモリをハイライト設定します。

＜メモリハイライト設定＞

「ScaleLabelHighlightMode=”AlongBarHighlight”」を設定します。

【サンプルプログラム】

<form id="form1" runat="server">
<div>
<dx:ASPxTrackBar ID="ASPxTrackBar1" runat="server" Caption="分設定" 
    LargeTickInterval="10" MaxValue="60" Position="0" PositionStart="0" 
    ScaleLabelFormatString="{0}分" ScaleLabelHighlightMode="AlongBarHighlight" 
    ScalePosition="Both" Step="5" Theme="RedWine" Width="350px">
    <CaptionSettings HorizontalAlign="Center" Position="Top" ShowColon="False" 
        VerticalAlign="Middle" />
    <CaptionStyle Font-Bold="True" Font-Size="Medium" ForeColor="Blue">
    </CaptionStyle>
</dx:ASPxTrackBar>
</div>
</form>

<div>

<dx:ASPxTrackBar ID="ASPxTrackBar1" runat="server" Caption="分設定"

LargeTickInterval="10" MaxValue="60" Position="0" PositionStart="0"

ScaleLabelFormatString="{0}分" ScaleLabelHighlightMode="AlongBarHighlight"

ScalePosition="Both" Step="5" Theme="RedWine" Width="350px">

<CaptionSettings HorizontalAlign="Center" Position="Top" ShowColon="False"

VerticalAlign="Middle" />

</CaptionStyle>

</dx:ASPxTrackBar>

</div>

</form>

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

↓

無事にトラックバーのメモリハイライト設定が出来ました。
※「25」分を選択していますので、「0〜20」分のメモリがハイライトしています。

関連記事はこちら:

DevExpress のサンプル作成（ASPxTrackBar） DevExpress のサンプル作成（ASPxTrackBar）手順です。＜サンプル作成（ASPxTrackBar）＞・プロジェクト作成（ASP.NET 空の Web アプリケーション）を選択します。 ※今回はDB接 ......
DevExpress の ASPxTrackBar でのカーソル移動量設定 DevExpress の ASPxTrackBar でのカーソル移動量設定のサンプルです。現状の画面デザインはこのようになっています。デフォルトでは、一度のカーソル移動で「2」進みます。今回は、カーソル移動量を「5 ......
DevExpress の ASPxTrackBar でのタイトル表示位置（横）設定 DevExpress の ASPxTrackBar でのタイトル表示位置（横）設定のサンプルです。現状の画面デザインはこのようになっています。＜タイトル表示位置（横）設定＞「HorizontalAlign=R ......
DevExpress の ASPxTrackBar でのタイトル部分の「：（コロン）」非表示設定 DevExpress の ASPxTrackBar でのタイトル部分の「：（コロン）」非表示設定のサンプルです。現状の画面デザインはこのようになっています。＜タイトル部分の「：（コロン）」非表示設定＞「ShowCo ......
DevExpress の ASPxTrackBar でのタイトル表示位置（縦）設定 DevExpress の ASPxTrackBar でのタイトル表示位置（縦）設定のサンプルです。現状の画面デザインはこのようになっています。＜タイトル表示位置（縦）設定＞「VerticalAlign=” ......
DevExpress の ASPxTrackBar でのタイトル表示設定 DevExpress の ASPxTrackBar でのタイトル表示設定のサンプルです。現状の画面デザインはこのようになっています。＜タイトル表示設定＞「Caption=”分設定”」を設定し ......
DevExpress の ASPxTrackBar での逆表示設定 DevExpress の ASPxTrackBar での逆表示設定のサンプルです。現状の画面デザインはこのようになっています。今回は最小値「0」が上の位置にあり、最大値「60」が下の位置にあるのを逆転させます。＜ ......
DevExpress の ASPxTrackBar でのメモリ表示設定 DevExpress の ASPxTrackBar でのメモリ表示設定のサンプルです。現状の画面デザインはこのようになっています。＜幅設定＞「ScalePosition=”Both”」を設定 ......
DevExpress の ASPxTrackBar での幅設定 DevExpress の ASPxTrackBar での幅設定のサンプルです。現状の画面デザインはこのようになっています。＜幅設定＞「Width=”350px”」を設定します。【サンプルプ ......
DevExpress の ASPxTrackBar でのメモリタイトル設定 DevExpress の ASPxTrackBar でのメモリタイトル設定のサンプルです。現状の画面デザインはこのようになっています。デフォルトでは、数字のみ表示されています。今回は、数字の後ろに「分」を設定します ......

投稿タグ: ASPxTrackBar

MENU

最近の投稿

人気記事