Webové úterý - Novinky v Silverlight 4 – díl 3.

  • Article

Ve třetím dílu pokračuji v představování nových komponent a funkcí frameworku Silverlight 4.

Ovládací prvek RichTextBox

Jedna z nových komponent přicházejících s verzí 4 je RichTextBox. Ten dovoluje editaci textu s rozšířeným formátování. Jednotlivé části textu mohou mít nastavené různé písmo, velikost, podrtžení, barvu a další. Krom samotného formátování lze vkládat i elementy jako odkazy, obrázky a dokonce vlastní XAML kód umožňující vložit jakýkoliv vizuální element do toku textu.

sl3-1

Tady je několik tipů, jak s novou komponentou pracovat:

  • V objektu RichTextBox k jeho obsahu přistupujete pomocí kolekce odstavců přes vlastnost Blocks
  • Ukládat a dále pracovat s obsahem komponenty lze přes textovou vlastnost Xamlobsahující kód celého zobrazeného dokumentu
  • Aktuálně označený kus dokumentu lze číst z vlastnosti Selection
  • Do dokumentu můžeme vkládat odstavce (Paragraph)
  • Pro vložení vizuálního elementu do dokumentu použijte třídu InlineUIContainer a její vlastnost Child

V následující ukázce demonstruji použití odstavců a sestavování dokumentu kódem. Nepředpokládám, že někdy budete celý dokument sestavovat takto (na to máme XAML), ale na elementářní formátovací funkce je toto API ideální.

C#

// vytvořit nadpis
var header = new Run();
header.Text = "Další informace\n";
header.TextDecorations = TextDecorations.Underline;
header.FontSize = 15.0;

// vytvořit odkaz
var hyperLink = new System.Windows.Documents.Hyperlink();
hyperLink.NavigateUri = new Uri(https://www.vbnet.cz);
hyperLink.Inlines.Add("VbNet.cz");

// vytvořit odstravec
var paragraph = new Paragraph();

// přidat do odstavce nadpis a odkaz
paragraph.Inlines.Add(header);
paragraph.Inlines.Add(hyperLink);

// přidat odstavec do RichTextBoxu
rtbContent.Blocks.Add(paragraph);

VB.NET

' vytvořit nadpis
Dim header As New Run()
header.Text = "Další informace\n"
header.TextDecorations = TextDecorations.Underline
header.FontSize = 15.0

' vytvořit odkaz
Dim hyperLink As New System.Windows.Documents.Hyperlink()
hyperLink.NavigateUri = New Uri(https://www.vbnet.cz)
hyperLink.Inlines.Add("VbNet.cz")

' vytvořit odstravec
Dim paragraph As New Paragraph()

' přidat do odstavce nadpis a odkaz
paragraph.Inlines.Add(header)
paragraph.Inlines.Add(hyperLink)

' přidat odstavec do RichTextBoxu
rtbContent.Blocks.Add(paragraph)

Další z výhod komponenty RichTextBox je podpora formátování ještě nezapsaného textu. Například nastavíte velké tučné písmo a teprve, až začnete psát, text se zformátuje. To je jedna z funkcí, které očekáváme od moderního editoru formátovaného textu.

Jako neméně důležitou vidím podporu klávesových zkratek, plná podpora schránky, krok „Zpět“ a lokalizace pro různé jazyky. Dále máte plnou kontrolu nad událostmi myši a kusy dokumentu lze reprezentovat jako XAML kód.

Prvek RichTextBox není jen uzavřená černá skříňka. Jeho API lze využít například k sestavení editoru na následujícím screenshotu. Ten obsahuje v dokumentu nejrůznější typy elementů a formátování včetně obrázku a tabulky.

sl3-2

Využitím komponenty RichTextBox v kombinaci například s podporou tisku se otevírá široká škála nových možností využití platformy Silverlight.

Automatická velikost sloupců a kopírování z DataGrid

Několika vylepšení se dočkala komponenta pro zobrazení dat DataGrid. Díky funkci automatické šířky lze podle určených dílů rozdělit šířku mezi sloupce, které ji nemají pevně definovanou. Stejně jako je to u layoutovací komponenty Grid.

Například máme 4 sloupce pro evidenci učeben v budově – patro, místnost, jméno a popis. Patro a Místnost mohou mít pevnou šířku. Nicméně můžete chtít, aby sloupec Jméno zabíral 1/3 zbývajícího místa (šířka nastavena jako * ) a sloupec Popis celé 2/3 (šířka nastavena jako 2* ). Kód vypadá takto:

<sdk:DataGrid AutoGenerateColumns="False" x:Name="dataGrid1" HeadersVisibility="All">
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Header="Patro" Binding="{Binding Floor}" Width="70"/>
<sdk:DataGridTextColumn Header="Místnost" Binding="{Binding RoomId}" Width="70"/>
<sdk:DataGridTextColumn Header="Jméno" Binding="{Binding Name}" Width="*"/>
<sdk:DataGridTextColumn Header="Popis" Binding="{Binding Desc}" Width="2*" />
</sdk:DataGrid.Columns>
</sdk:DataGrid>

A výsledek:

sl3-3

DataGrid dále nově podporuje scrollování pomocí kolečka myši a kopírování dat do schránky z celého řádku (následně je možné vložení do jiného programu, jako je například Microsoft Office Excel).

- Tomáš Jecha

Další díl seriálu:
Webové úterý – Novinky v Silverlight 4 – díl 1.
Webové úterý - Novinky v Silverlight 4 – díl 2.