Using a Cascading Style Sheet with C1Editor
In This Topic
- Create a .NET project and add a C1Editor and Button control to the form.
- In the Solution Explorer, double-click Resources.resx, click Add Resource, and select Add New String.
- Enter sEditorText as the Name of the resource.
- In the Value column, enter some content for the .xml document. You can copy this sample content and enter it if you prefer.
Sample content
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html SYSTEM
"C:\Users\jjj\AppData\Local\Temp\tmpB1BB.tmp"[]><html
xmlns="http://www.w3.org/1999/xhtml"><head><title>Famous
Pittsburgers</title><meta http-equiv="Content-Type"
content="text/html; charset=utf-8" /></head><body><h1>Famous
Pittsburghers</h1><p class="BodyText">Many famous and successful
people were born and raised in Pittsburgh; although they found
fame in other cities, they called Pittsburgh home.</p><p
class="C1SectionCollapsed">Actors/Comedians</p><ul><li><p
class="C1HBullet">Gene Kelly (Dancer and star of "Singin' in the
Rain")</p></li><li><p class="C1HBullet">Michael Keaton (Star of
"Batman," "Mr. Mom," and many other movies)</p></li><li><p
class="C1HBullet">Dennis Miller ("Saturday Night Live" cast
member and TV/radio talk show host) </p></li></ul><p
class="C1SectionCollapsed">TV Legend</p><ul><li><p
class="C1HBullet">Fred Rogers (Producer and host of PBS's "Mister
Rogers' Neighborhood")</p></li></ul><p
class="C1SectionCollapsed">Artists</p><ul><li><p
class="C1HBullet">Mary Cassatt (Impressionist
painter)</p></li><li><p class="C1HBullet">Andy Warhol (Pop
artist; Pittsburgh is the home of the Andy Warhol Museum)
</p></li></ul><p class="C1SectionCollapsed">Sports
Legends</p><ul><li><p class="C1HBullet">Dan Marino (Quarterback
of the Miami Dolphins and University of Pittsburgh
Panthers)</p></li><li><p class="C1HBullet">Joe Montana (Super
Bowl champion quarterback of the San Francisco
49ers)</p></li><li><p class="C1HBullet">Joe Namath (Outspoken New
York Jets quarterback; victorious in Super Bowl
III)</p></li><li><p class="C1HBullet">Johnny Unitas (Quarterback
of the Baltimore Colts for 17 years)</p></li><li><p
class="C1HBullet">Arnold Palmer (Golf legend and winner of more
than 60 PGA events, including the Masters and the U.S.
Open)</p></li></ul><p
class="C1SectionCollapsed">Singers</p><ul><li><p
class="C1HBullet">Perry Como (Recorded over 100 hit
singles)</p></li><li><p class="C1HBullet">Bobby Vinton ("Roses
are Red" and "Blue Velvet" hit #1 on the Billboard
charts)</p></li></ul><p
class="C1SectionCollapsed">Writers</p><ul><li><p
class="C1HBullet">Rachel Carson (Author of "Silent Spring," as
well as a pioneering
environmentalist)</p></li></ul></body></html>
- Go back to your form and double-click it.
- In the Form_Load event, enter code to load the .xml document so it looks like the following:
To write code in C#
| C# |
Copy Code |
private void Form1_Load(object sender, EventArgs e)
{
c1Editor1.LoadXml(Resources.sEditorText, null);
}
|
Load a CSS
- Create a CSS and add it to your project by right-clicking the project name in the Solution Explorer, select Add Existing Item, choosing the CSS, and clicking Add. You can use this sample CSS if you don't already have one.
Sample CSS
html {
font-family: Verdana;
font-size: 10pt;
line-height: normal;
margin-bottom: 0pt;
margin-left: 0pt;
margin-right: 0pt;
margin-top: 0pt;
}
h1 {
font-family: Verdana;
font-size: 20pt;
font-weight: bold;
line-height: normal;
margin-bottom: 8pt;
margin-left: 0pt;
margin-right: 0pt;
margin-top: 10pt;
}
h2 {
font-family: Verdana;
font-size: 16pt;
font-weight: bold;
line-height: normal;
margin-bottom: 7pt;
margin-left: 0pt;
margin-right: 0pt;
margin-top: 9pt;
page-break-after: avoid;
}
h3 {
font-family: Verdana;
font-size: 16pt;
font-weight: bold;
line-height: normal;
margin-bottom: 7pt;
margin-left: 0pt;
margin-right: 0pt;
margin-top: 9pt;
page-break-after: avoid;
}
h4 {
font-family: Verdana;
font-size: 12pt;
font-weight: bold;
line-height: normal;
margin-bottom: 2pt;
margin-left: 0pt;
margin-right: 0pt;
margin-top: 2pt;
page-break-after: avoid;
}
.C1HBullet {
font-family: Verdana;
font-size: 10pt;
font-style: italic;
line-height: 14pt;
margin-bottom: 0pt;
margin-left: 18pt;
margin-right: 0pt;
margin-top: 5pt;
text-indent: -18pt;
}
p {
font-family: Verdana;
font-size: 10pt;
line-height: 14pt;
margin-bottom: 0pt;
margin-left: 0pt;
margin-right: 0pt;
margin-top: 5pt;
text-indent: 18pt;
}
.C1SectionCollapsed {
font-weight: bold;
}
- Add a button1_Click event and use the LoadDesignCSS method:
To write code in C#
| C# |
Copy Code |
privatevoid button1_Click(object sender, EventArgs e)
{
c1Editor1.LoadDesignCSS(@"C:\CSS1.css");
}
|
Run the Project
- Press F5 to run the project. Notice the document is loaded in the C1Editor.
- Click the button. The document is formatted with the CSS.
For a detailed example of using custom cascading style sheets, see the UserCSS sample that comes with this product.
