WPF seriál 19. díl – Text Controls – RichTextBox

Kromě jednoduchého TextBoxu obsahuje WPF i TextBox většího kalibru nazvaný RichTextBox. Tento element nám bude užitečný např. při tvorbě nějakého software pro tvorbu dokumentů (Wordpad, MS Office Word, atd.), protože podporuje funkcionalitu pro bohaté formátování textu. TextBox obsahoval svojí textovou hodnotu ve vlastnosti Text, ovšem RichTextBox využívá vlastnost FlowDocument pro uchování obsahu dokumentu. Pojďme se nyní podívat, co vše FlowDocument dokáže.

FlowDocument

FlowDocument je rozdělen na dvě základní kategorie viz obrázek:

Pojďme se nyní podívat na jednotlivé kategorie, především ty označené na obrázku jako Block a Inline. Nejdříve ovšem kostra FlowDocumentu:

XAML

<FlowDocument>
</FlowDocument>

Kód:

FlowDocument flowDoc = new FlowDocument();

Block

Paragraph – jedná se o klasický odstavec, kterému můžeme nastavit např. konkrétní velikost písma, barvu pozadí, popředí, atd.

 

<Paragraph Background="AliceBlue" FontSize="20">Toto je prvni odstavec</Paragraph>

Section – pomocí sekce si můžeme např. ohraničit určitý text našeho dokumentu, např. několik odstavců. Může se Vám to zdát zbytečné, ale jakmile budete chtít nastavit např. velikost písma stejnou pro všechny odstavce, tak stačí když tuto velikost nastavíte konkrétní sekci

XAML

<Section FontSize="10">
<Paragraph>Toto je prvni odstavec uvnitr sekce</Paragraph>
<Paragraph>Toto je druhy odstavec uvnitr sekce</Paragraph>
<Paragraph>Toto je treti odstavec uvnitr sekce</Paragraph>
</Section>

Kód

// vytvorim sekci
Section section = new Section();
// nastavim velikost pisma
section.FontSize = 10;
string[] str = {"prvni", "druhy", "treti"};
foreach (var s in str)
{
    // vytvorim novy odstavec
    Paragraph p = new Paragraph();
    // text odstavce je ulozen v kolekci Inlines
    p.Inlines.Add(string.Format("Toto je {0} odstavec uvnitr sekce", s));
    // a cely odstavec vlozime pomoci vlastnosti Blocks do nasi sekce
    section.Blocks.Add(p);
}

BlockUIContainer – Líbilo by se Vám tlačítko uprostřed dokumentu, nebo např. Váš nějaký custom control, který by sloužil pro ohodnocení Vašeho dokumentu? Pomocí tohoto elementu to lze snadno zrealizovat.

XAML

<BlockUIContainer>
        <Button Content="Ulozit" Click="Button_Click"/>
</BlockUIContainer>

Kód

// vytvorim BlockUIContainer
BlockUIContainer uiContainer = new BlockUIContainer();
// vytvorim tlacitko
Button btn = new Button();
btn.Content = "Ulozit";
btn.Click += Button_Click;
// a vlozim ho do kontejneru
uiContainer.Child = btn;
// nastavim vlastnost richtextboxu IsDocumentEnabled na true abych mohl klikat na tlacitko
txt.IsDocumentEnabled = true;

Poznámka: Pokud do FlowDocumentu vložíme BlockUIContainer uvedený výše, tak bude tlačítko zakázané a nepůjde na něho kliknout. Pro povolení tlačítka musíme nastavit elementu RichTextBox vlastnost IsDocumentEnabled na true. Nastavením na true říkáme, že chceme nějak pracovat s UIElementy.

List – klasický seznam

• MarketStyle – styl (odrážky, číslování)

XAML

<List MarkerStyle="LowerLatin"> 
<ListItem> 
<Paragraph>Pondeli</Paragraph> 
</ListItem> 
<ListItem> 
<Paragraph>Utery</Paragraph> 
</ListItem> 
<ListItem> 
<Paragraph>Streda</Paragraph> 
</ListItem> 
<ListItem> 
<Paragraph>...</Paragraph> 
</ListItem> 
</List>

Kód

// vytvorim novy seznam
List list = new List();
// nastavim styl odrazek
list.MarkerStyle = TextMarkerStyle.LowerLatin;
string[] str1 = {"Pondeli", "Utery", "Streda", "..."};
foreach (var s in str1)
{
    // vytvorim objekt ListItem
    ListItem item = new ListItem();
    // novy odstavec
    Paragraph p = new Paragraph();
    // vlozim text
    p.Inlines.Add(s);
    // a cely odstavec vlozim do Listitem
    item.Blocks.Add(p);
    // a nakonec vlozim tento objekt do naseho listu
    list.ListItems.Add(item);
}

Table – klasická tabulka

• TableColumn – sloupec
• TableRowGroup – skupina řádků
• TableCell – buňka
• ColumnSpan – roztáhnutí přes několik sloupců
• RowSpan – roztáhnutí přes několik řádků

Jednoduchá tabulka může vypadat následovně

XAML

<Table Background="AliceBlue">
    <Table.Columns>
        <TableColumn/>
        <TableColumn/>
        <TableColumn/>
        <TableColumn/>
    </Table.Columns>
    <TableRowGroup>
        <TableRow>
            <TableCell ColumnSpan="4">
                <Paragraph TextAlignment="Center" FontWeight="Bold">.NET Framework 3.0</Paragraph>
            </TableCell>
        </TableRow>
        <TableRow>
            <TableCell BorderBrush="Black" BorderThickness="2">
                <Paragraph TextAlignment="Center">WPF</Paragraph>
            </TableCell>
            <TableCell BorderBrush="Black" BorderThickness="2">
                <Paragraph TextAlignment="Center">WCF</Paragraph>
            </TableCell>
            <TableCell BorderBrush="Black" BorderThickness="2">
                <Paragraph TextAlignment="Center">WF</Paragraph>
            </TableCell>
            <TableCell BorderBrush="Black" BorderThickness="2">
                <Paragraph TextAlignment="Center">WCS</Paragraph>
            </TableCell>
        </TableRow>
    </TableRowGroup>
</Table>

Kód

// vytvorim si tabulku
Table table = new Table();
// nastavim pozadi
table.Background = Brushes.AliceBlue;
// vytvorim si 4 sloupecky
for (int i = 0; i < 4; i++)
{
    // vytvorim novy sloupec
    TableColumn column = new TableColumn();
    table.Columns.Add(column);
}
// vytvorim objekt TableRowGroup do ktereho budu vkladat radky
TableRowGroup group = new TableRowGroup();
// vytvorim prvni radek -  'nadpis' pres 4 sloupce
TableRow row = new TableRow();
TableCell cell = new TableCell();
// nastavim ze bude pres 4 sloupce
cell.ColumnSpan = 4;
Paragraph par = new Paragraph();
// text bude tucny
par.FontWeight = FontWeights.Bold;
// a zarovnan do stredu
par.TextAlignment = TextAlignment.Center;
par.Inlines.Add(".NET Framework 3.0");
// do bunky vlozim text
cell.Blocks.Add(par);
// pridam bunku do radku
row.Cells.Add(cell);
// radek vlozim do kolekce radku
group.Rows.Add(row);

// na dalsim radku vytvorim 4 bunky ktere vlozim do prislusnych sloupcu
TableRow otherRow = new TableRow();
string[] strLabels = {"WPF", "WCF", "WF", "WCS"};
foreach (var s in strLabels)
{
    TableCell c = new TableCell();
    // nastavim okraj bunce
    c.BorderThickness = new Thickness(2);
    c.BorderBrush = Brushes.Black;
    Paragraph paragraph = new Paragraph();
    // text zarovnan do stredu
    paragraph.TextAlignment = TextAlignment.Center;
    paragraph.Inlines.Add(s);
    // do bunky vlozim text
    c.Blocks.Add(paragraph);
    // bunku pridam do radku
    otherRow.Cells.Add(c);
}
// pote cely radek pridam mezi ostatni
group.Rows.Add(otherRow);
// a nakonec pridam skupinu radku do nasi tabulky
table.RowGroups.Add(group);

Zobrazení FlowDocumentu

Možností jak zobrazit FlowDocument máme hned několik:

RichTextBox

Využít element RichTextBox a nastavit vlastnost IsReadOnly na true, uživatel tedy nebude moct měnit text. Pokud je ovšem textu příliš hodně, tak můžeme využít element ScrollViewer, který přidá našemu RichTextBoxu vertikální scrollbar pouze v případě, kdy je to potřeba

<ScrollViewer>
<RichTextBox x:Name="txt" IsReadOnly="True">
</RichTextBox>
</ScrollViewer>

FlowDocumentScrollViewer

Zobrazí dokument jako jednotný soubor se scrollbarem. Tento styl zobrazení je stejný jako výše zmíněný způsob, nebo jako „Web Layout“ (Rozložení webové stránky) v Microsoft Office Word. Existuje zde i podpora pro zoom, která je defaultně vypnutá. Pro zapnutí této funkcionality musíte nastavit vlastnost IsToolBarVisible na true

<FlowDocumentScrollViewer x:Name="doc" IsToolBarVisible="true">
</FlowDocumentScrollViewer>

FlowDocumentPageViewer

Zobrazí dokument podobně jako „Full green reading“ (čtení na celé obrazovce) v Microsoft Office Word. Je zde vestavěná podpora pro stránkování a zoom

<FlowDocumentPageViewer x:Name="doc">
</FlowDocumentPageViewer>

FlowDocumentReader

jedná se element, který je kombinací dvou předcházejících (FlowDocumentScrollViewer a FlowDocumentPageViewer) elementů. Navíc přidává funkcionalitu pro hledání textu nebo zobrazit text ve více sloupcích

<FlowDocumentReader x:Name="doc">
</FlowDocumentReader>

Závěr

Pomocí FlowDocumentu můžeme velice jednoduše vytvářet opravdu bohaté dokumenty a jak jsme mohli vidět, použití je opravdu vskutku jednoduché.

Materiály ke stažení

Demo

Komentáře

Přidat komentář

jméno

text komentáře

opište text z obrázku