スタイルを GridWeb に適用する

Aspose.Cells.GridWeb へのプリセット スタイルまたはカスタム スタイルの適用

プリセット スタイル

開発者の労力を節約するために、Aspose.Cells.GridWeb にはいくつかのプリセット スタイルが用意されています。スタイルを適用するには、リストからスタイルを選択するだけです。

スタイル カラースキーム
標準 銀
カラフル1 ローズ
カラフル2 青い
プロフェッショナル1 シアン
プロフェッショナル2 シアン再び
トラディショナル1 暗い
トラディショナル2 グレー
カスタム カスタマイズされた
特定のスタイルが選択されると、GridWeb コントロールの全体的な外観が変更されます。開発者は、設計時にグリッドに適用するプリセット スタイルを選択できますが、このタスクは、Aspose.Cells.GridWeb の柔軟な API を使用して実行時に実行することもできます。

プリセット スタイルを選択するには:

  1. Aspose.Cells.GridWeb コントロールを Web フォームに追加します。
  2. コントロールに適用するプリセット スタイルを選択します。

GridWeb コントロールは、開発者が任意のプリセット スタイルを割り当てることができる PresetStyle プロパティを提供します。

以下のコード スニペットの出力を以下に示します。

Colorful1 スタイルが適用された GridWeb コントロール

todo:画像_代替_文章

// For complete examples and data files, please go to https://github.com/aspose-cells/Aspose.Cells-for-.NET
// Applying Colorful1 style on the GridWeb control
GridWeb1.PresetStyle =PresetStyle.Colorful1;
view raw Examples.GridWeb-CSharp-GridWebBasics-ApplyPresetStyle.aspx-ApplyPresetStyle.cs hosted with ❤ by GitHub

ヘッダー バーのスタイル

GridWeb コントロールを見ると、2 つのヘッダー バーがあることがわかります。 1 つは列 (A、B、C、D など) 用で、もう 1 つは行 (1、2、3、4 など) 用です。 Aspose.Cells.GridWeb を使用すると、開発者はこれらのヘッダー バーの外観を制御できます。開発者は、設計時または実行時にヘッダー バーのスタイルを設定できます。

以下のコード例の出力を次に示します。

ヘッダー バーの変更されたスタイル

todo:画像_代替_文章

// For complete examples and data files, please go to https://github.com/aspose-cells/Aspose.Cells-for-.NET
// Setting header bar properties, BackColor, ForeColor, Font & BorderWidth
GridWeb1.HeaderBarStyle.BackColor = System.Drawing.Color.Brown;
GridWeb1.HeaderBarStyle.ForeColor = System.Drawing.Color.Yellow;
GridWeb1.HeaderBarStyle.Font.Bold = true;
GridWeb1.HeaderBarStyle.Font.Name = "Century Gothic";
GridWeb1.HeaderBarStyle.BorderWidth = new Unit(2, UnitType.Point);
view raw Examples.GridWeb-CSharp-GridWebBasics-ApplyHeaderBarStyle.aspx-ApplyHeaderBarStyle.cs hosted with ❤ by GitHub

タブバーのスタイル

タブバーのスタイルを設定できます。

アクティブおよび非アクティブのタブ バーの変更されたスタイル

todo:画像_代替_文章

上の図では、Sheet4 がアクティブなタブであるため、以下のコード例で定義されているように、その外観は他のタブとは異なります。

// For complete examples and data files, please go to https://github.com/aspose-cells/Aspose.Cells-for-.NET
// Setting Tab properties, BackColor, ForeColor
GridWeb1.TabStyle.BackColor = System.Drawing.Color.Yellow;
GridWeb1.TabStyle.ForeColor = System.Drawing.Color.Blue;
// Setting active tab properties, BackColor, ForeColor
GridWeb1.ActiveTabStyle.BackColor = System.Drawing.Color.Blue;
GridWeb1.ActiveTabStyle.ForeColor = System.Drawing.Color.Yellow;
view raw Examples.GridWeb-CSharp-GridWebBasics-ApplyTabBarStyle.aspx-ApplyTabBarStyle.cs hosted with ❤ by GitHub

再利用可能なカスタマイズされたスタイル ファイル

Aspose.Cells.GridWeb は、その外観またはスタイル設定をファイルに保存することもサポートしています。 GridWeb コントロールのすべての外観プロパティを設定したら、これらのプロパティまたは設定をディスク ファイルに保存できます。このアプローチは、コントロールのすべてのスタイル (または外観) プロパティを 1 つずつ設定する代わりに、スタイル ファイルから古いスタイル構成を再利用することで、開発者が時間と労力を節約するのに非常に役立ちます。

スタイルファイルの保存

スタイル プロパティの設定が完了したら、GridWeb コントロールの SaveCustomStyleFile メソッドを呼び出して、スタイル構成設定を XML ファイルの形式で保存できます (これは、スタイル ファイルが XML ファイルとして保存されているためです)。

// For complete examples and data files, please go to https://github.com/aspose-cells/Aspose.Cells-for-.NET
// Setting header bar properties, BackColor, ForeColor, Font & BorderWidth
GridWeb1.HeaderBarStyle.BackColor = System.Drawing.Color.Brown;
GridWeb1.HeaderBarStyle.ForeColor = System.Drawing.Color.Yellow;
GridWeb1.HeaderBarStyle.Font.Bold = true;
GridWeb1.HeaderBarStyle.Font.Name = "Century Gothic";
GridWeb1.HeaderBarStyle.BorderWidth = new Unit(2, UnitType.Point);
// Setting Tab properties, BackColor, ForeColor
GridWeb1.TabStyle.BackColor = System.Drawing.Color.Yellow;
GridWeb1.TabStyle.ForeColor = System.Drawing.Color.Blue;
// Setting Active Tab properties, BackColor, ForeColor
GridWeb1.ActiveTabStyle.BackColor = System.Drawing.Color.Blue;
GridWeb1.ActiveTabStyle.ForeColor = System.Drawing.Color.Yellow;
// Saving style information to an XML file
GridWeb1.SaveCustomStyleFile((this.Master as Site).GetDataDir() + "\\GridWebBasics\\CustomPresetStyle_out.xml");
view raw Examples.GridWeb-CSharp-GridWebBasics-ApplyCustomPresetStyle.aspx-SaveCustomStyle.cs hosted with ❤ by GitHub

スタイルファイルを読み込んでいます

既存のスタイル ファイルから GridWeb コントロールにスタイル設定を適用するために、開発者はスタイル ファイルのパスをコントロールの CustomStyleFileName プロパティに設定できます。ただし、それを行う前に、コントロールの PresetStyle プロパティを Custom に設定する必要があります。そのスタイル ファイルには、開発者によって既に定義されているカスタム スタイル情報が含まれているためです。

// For complete examples and data files, please go to https://github.com/aspose-cells/Aspose.Cells-for-.NET
// Setting the PresetStyle of the control to Custom
GridWeb1.PresetStyle = PresetStyle.Custom;
// Setting the path of style file to load style information from this file to the control
GridWeb1.CustomStyleFileName = (this.Master as Site).GetDataDir() + "\\GridWebBasics\\CustomStyle1.xml";
view raw Examples.GridWeb-CSharp-GridWebBasics-ApplyCustomPresetStyle.aspx-LoadCustomStyle.cs hosted with ❤ by GitHub

XML スタイル テンプレートの標準形式

 <ViewerStyleTemplate SelectCellColor="Black" FrameTableStyle-BorderStyle="Solid" FrameTableStyle-LayoutFixed="Fixed" FrameTableStyle-BorderWidth="1px" FrameTableStyle-BorderColor="Gray" FrameTableStyle-BorderCollapse="Collapse" FrameTableStyle-BackColor="White" SelectCellBgColor="#EEEEFF" HeaderBarWidth="30pt" ScrollBarBaseColor="" HeaderBarStyle-LeftBorderStyle-BorderStyle="Solid" HeaderBarStyle-LeftBorderStyle-BorderWidth="1px" HeaderBarStyle-LeftBorderStyle-BorderColor="White" HeaderBarStyle-VerticalAlign="Middle" HeaderBarStyle-RightBorderStyle-BorderStyle="Solid" HeaderBarStyle-RightBorderStyle-BorderWidth="1px" HeaderBarStyle-RightBorderStyle-BorderColor="Gray" HeaderBarStyle-BorderWidth="1px" HeaderBarStyle-Font-Size="10pt" HeaderBarStyle-Font-Names="Arial" HeaderBarStyle-BorderColor="Gray" HeaderBarStyle-BorderStyle="Solid" HeaderBarStyle-HorizontalAlign="Center" HeaderBarStyle-ForeColor="Black" HeaderBarStyle-TopBorderStyle-BorderStyle="Solid" HeaderBarStyle-TopBorderStyle-BorderWidth="1px" HeaderBarStyle-TopBorderStyle-BorderColor="White" HeaderBarStyle-BackColor="#E0E0E0" HeaderBarStyle-BottomBorderStyle-BorderStyle="Solid" HeaderBarStyle-BottomBorderStyle-BorderWidth="1px" HeaderBarStyle-BottomBorderStyle-BorderColor="Gray" HeaderBarStyle-Wrap="False" ActiveHeaderColor="Black" HeaderBarTableStyle-LayoutFixed="Fixed" HeaderBarTableStyle-BorderWidth="0px" HeaderBarTableStyle-BorderCollapse="Separate" HeaderBarHeight="15pt" ActiveTabStyle-Height="15pt" ActiveTabStyle-BorderWidth="1px" ActiveTabStyle-Font-Size="10pt" ActiveTabStyle-Font-Names="Arial" ActiveTabStyle-BorderColor="Gray" ActiveTabStyle-BorderStyle="Solid" ActiveTabStyle-ForeColor="Black" ActiveTabStyle-BackColor="White" ActiveTabStyle-Wrap="False" ActiveCellColor="Black" DefaultGridLineColor="Silver" ViewTableStyle-LayoutFixed="Fixed" ViewTableStyle-BorderWidth="0px" ViewTableStyle-BorderCollapse="Collapse" ActiveCellBgColor="#DDDDFF" TabStyle-Height="15pt" TabStyle-BorderWidth="1px" TabStyle-Font-Size="10pt" TabStyle-Font-Names="Arial" TabStyle-BorderColor="Gray" TabStyle-BorderStyle="Solid" TabStyle-ForeColor="Black" TabStyle-BackColor="#E0E0E0" TabStyle-Wrap="False" ActiveHeaderBgColor="#F2F2F2" ScrollBarArrowColor="" BottomTableStyle-LayoutFixed="Fixed" BottomTableStyle-Height="20pt" BottomTableStyle-BorderWidth="0px" BottomTableStyle-BorderCollapse="Collapse" BottomTableStyle-TopBorderStyle-BorderStyle="Solid" BottomTableStyle-TopBorderStyle-BorderWidth="1px" BottomTableStyle-TopBorderStyle-BorderColor="Gray" BottomTableStyle-BackColor="#F0F0F0" />
GridWeb を Web フォームに追加する GridWeb とそのヘッダー バーのサイズを変更する