Appliquer des styles à GridWeb

Aspose.Cells.GridWeb a son propre aspect par défaut, mais il est possible de changer son apparence. Aspose.Cells.GridWeb propose plusieurs propriétés permettant aux développeurs de contrôler pleinement son apparence. Ce sujet aborde certaines de ces propriétés.

Appliquer des styles prédéfinis ou personnalisés à Aspose.Cells.GridWeb

Styles prédéfinis

Pour économiser les efforts des développeurs, Aspose.Cells.GridWeb offre certains styles prédéfinis. Il suffit de sélectionner un style dans la liste pour l’appliquer.

Styles	Schéma de couleurs
Standard	Silver
Colorful1	Rose
Colorful2	Blue
Professional1	Cyan
Professional2	Cyan again
Traditional1	Dark
Traditional2	Gray
Custom	Customized
Quand un style particulier est sélectionné, il change l’apparence globale du contrôle GridWeb. Les développeurs peuvent sélectionner un style prédéfini à appliquer sur le Grid pendant la conception mais cette tâche peut également être accomplie à l’exécution en utilisant l’API flexible d’Aspose.Cells.GridWeb.

Le contrôle Aspose.Cells.GridWeb est représenté par la classe GridWeb.

Pour sélectionner un style prédéfini :

1. Ajoutez le contrôle Aspose.Cells.GridWeb à un formulaire Web.
2. Sélectionnez un style prédéfini à appliquer sur le contrôle.

Le contrôle GridWeb fournit la propriété PresetStyle à laquelle les développeurs peuvent affecter n’importe quel style prédéfini souhaité.

Le résultat de l’extrait de code ci-dessous est affiché ci-dessous.

Contrôle GridWeb avec le style Colorful1 appliqué

// 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;

Style de barre d’en-tête

Si vous regardez le contrôle GridWeb, vous remarquerez deux barres d’en-tête. Une pour les colonnes (c’est-à-dire A, B, C, D, etc.) et une autre pour les lignes (c’est-à-dire 1, 2, 3, 4, etc.). Aspose.Cells.GridWeb permet aux développeurs de contrôler l’apparence de ces barres d’en-tête. Les développeurs peuvent définir le style des barres d’en-tête soit au moment de la conception, soit à l’exécution.

Le contrôle GridWeb fournit la propriété HeaderBarStyle qui applique un style sur les deux barres d’en-tête du contrôle.

La sortie du code d’exemple ci-dessous est indiquée ici.

Style modifié de la barre d’en-tête

// 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);

Style de barre d’onglets

Il est possible de définir le style de la barre d’onglets.

Styles modifiés des barres d’onglets actives et non actives

Sur la figure ci-dessus, Sheet4 est l’onglet actif, donc son apparence est différente des autres onglets, comme défini par le code d’exemple ci-dessous.

// 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;

Fichier de style personnalisé réutilisable

Aspose.Cells.GridWeb prend également en charge la persistance de ses paramètres d’apparence ou de style dans un fichier. Lorsque vous avez défini toutes les propriétés d’apparence du contrôle GridWeb, vous pouvez enregistrer ces propriétés ou paramètres dans un fichier sur disque. Cette approche est très utile pour les développeurs qui peuvent ainsi gagner du temps et des efforts en réutilisant leurs anciennes configurations de style à partir d’un fichier de style au lieu de définir toutes les propriétés de style (ou d’apparence) du contrôle une par une.

Enregistrement du fichier de style

Une fois que vous avez terminé de définir les propriétés de style, vous pouvez enregistrer vos paramètres de configuration de style sous forme de fichier XML (car le fichier de style est stocké sous forme de fichier XML) en appelant la méthode SaveCustomStyleFile du contrôle GridWeb.

// 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");

Le fichier de style enregistré est au format XML, donc les développeurs peuvent également éditer ce fichier avec n’importe quel éditeur de texte, le cas échéant.

Chargement du fichier de style

Pour appliquer les paramètres de style d’un fichier de style existant au contrôle GridWeb, les développeurs peuvent définir le chemin du fichier de style dans la propriété CustomStyleFileName du contrôle. Mais avant cela, il est nécessaire de définir la propriété PresetStyle du contrôle sur Custom. C’est parce que le fichier de style contient des informations de style personnalisé déjà définies par un développeur.

Il est également possible de charger ou d’enregistrer un fichier de style à l’aide de Aspose.Cells.GridWeb Designer.

// 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";

IMPORTANT : Charger un fichier de style dans un contrôle GridWeb n’affecte pas les paramètres de formatage des cellules du contrôle.

Format standard du modèle de style 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" />