DevExpress でのプログレスバーの枠設定

DevExpress でのプログレスバー（ASPxProgressBar）の枠設定のサンプルです。

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

＜プログレスバーの枠設定＞

「ASPxProgressBar」の「BorderBottom」プロパティから「BorderStyle=”Solid”」を設定します。

「ASPxProgressBar」の「BorderBottom」プロパティから「BorderWidth=”10px”」を設定します。

【サンプルプログラム】

<form id="form1" runat="server">
    <div>
        <dx:ASPxProgressBar ID="ASPxProgressBar1" runat="server" Position="120" Width="400px" Theme="Mulberry" Caption="参考書理解" CustomDisplayFormat="【{1}-{2}】の内{0}ページ完了" DisplayMode="Custom" Height="75px" Maximum="200" Minimum="7" BackColor="#FFCCCC" Font-Size="Large">
            <IndicatorStyle BackColor="#66FF99">
                <BorderTop BorderColor="#009933" BorderStyle="Solid" BorderWidth="10px" />
            </IndicatorStyle>
            <CaptionSettings HorizontalAlign="Center" Position="Bottom" ShowColon="False" VerticalAlign="Middle" />
            <CaptionCellStyle BackColor="#FFFFCC" Height="50px">
                <Border BorderColor="#3366FF" BorderStyle="Dashed" BorderWidth="3px" />
            </CaptionCellStyle>
            <CaptionStyle BackColor="#FFCCFF" Font-Italic="True" Font-Size="X-Large" ForeColor="Blue">
                <BorderLeft BorderColor="Red" BorderStyle="Double" BorderWidth="5px" />
            </CaptionStyle>
            <BorderBottom BorderStyle="Solid" BorderWidth="10px" />
        </dx:ASPxProgressBar>
    </div>
</form>

<div>

<dx:ASPxProgressBar ID="ASPxProgressBar1" runat="server" Position="120" Width="400px" Theme="Mulberry" Caption="参考書理解" CustomDisplayFormat="【{1}-{2}】の内{0}ページ完了" DisplayMode="Custom" Height="75px" Maximum="200" Minimum="7" BackColor="#FFCCCC" Font-Size="Large">

</IndicatorStyle>

</CaptionCellStyle>

</CaptionStyle>

</dx:ASPxProgressBar>

</div>

</form>

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

↓

無事にプログレスバー（ASPxProgressBar）の枠設定が出来ました。

関連記事はこちら:

DevExpress の ASPxProgressBar（プログレスバー）とは DevExpress の「ASPxProgressBar（プログレスバー）」は状況を可視化するコントロールです。「HTML」、「CSS」で表現可能ですが、正直面倒ですので、専用の「ASPxProgressBar（プログ ......
DevExpress でのプログレスバーのインジケーター枠太さ設定 DevExpress でのプログレスバー（ASPxProgressBar）のインジケーター枠太さ設定のサンプルです。現状の画面デザインはこのようになっています。＜プログレスバーのインジケーター枠太さ設定＞「ASPx ......
DevExpress でのプログレスバーのタイトルエリア枠太さ設定 DevExpress でのプログレスバー（ASPxProgressBar）のタイトルエリア枠太さ設定のサンプルです。現状の画面デザインはこのようになっています。＜プログレスバーのタイトルエリア枠太さ設定＞「ASPx ......
DevExpress でのプログレスバーのタイトルエリア枠設定 DevExpress でのプログレスバー（ASPxProgressBar）のタイトルエリア枠設定のサンプルです。現状の画面デザインはこのようになっています。＜プログレスバーのタイトルエリア枠設定＞「ASPxProg ......
DevExpress でのプログレスバーのタイトル枠設定 DevExpress でのプログレスバー（ASPxProgressBar）のタイトル枠設定のサンプルです。現状の画面デザインはこのようになっています。＜プログレスバーのタイトル枠設定＞「ASPxProgressBa ......
DevExpress でのプログレスバーのタイトル背景色設定 DevExpress でのプログレスバー（ASPxProgressBar）のタイトル背景色設定のサンプルです。現状の画面デザインはこのようになっています。＜プログレスバーのタイトル背景色設定＞「ASPxProgre ......
DevExpress でのプログレスバーのタイトルセパレーター非表示（コロン）設定 DevExpress でのプログレスバー（ASPxProgressBar）のタイトルセパレーター非表示（コロン）設定のサンプルです。現状の画面デザインはこのようになっています。＜プログレスバーのタイトルセパレーター非 ......
DevExpress でのプログレスバーの状況単位（％）非表示設定 DevExpress でのプログレスバー（ASPxProgressBar）の状況単位（％）非表示設定のサンプルです。現状の画面デザインはこのようになっています。＜プログレスバーの状況単位（％）非表示設定＞「ASPx ......
DevExpress でのプログレスバーの状況非表示設定 DevExpress でのプログレスバー（ASPxProgressBar）の状況非表示設定のサンプルです。現状の画面デザインはこのようになっています。＜プログレスバーの状況非表示設定＞「ASPxProgressBa ......
DevExpress でのプログレスバーのインジケーター枠色設定 DevExpress でのプログレスバー（ASPxProgressBar）のインジケーター枠色設定のサンプルです。現状の画面デザインはこのようになっています。＜プログレスバーのインジケーター枠色設定＞「ASPxPr ......

投稿タグ: ASPxProgressBar

MENU

最近の投稿

人気記事