Eine der interessantesten Neuerungen in Silverlight 4 ist die RichTextArea. Mit dessen Hilfe kann man schön formatierten Text in Silverlight 4 erstellen. Wie dieser funktioniert wird in diesem Beitrag erläutert.
Die RichTextArea ist sehr funktional, weshalb diese auch in den weiteren Beispielen verwendet wird. Also: das Projekt sehr gut aufheben, es wird in den nächsten Wochen wieder benötigt :).
Bevor wir beginnen müssen wir uns für ein Layout entscheiden. Wir werden eine Art Ribbon basteln – jedoch auf sehr sehr einfacher Weise. Hierfür brauchen wir eine Reihe mit der Höhe von 45 Pixeln. Im unteren Bereich wollen wir auch noch 30 Pixel frei halten. Eine Reihe von flexibler Größe wird in die Mitte gegeben.
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="45"></RowDefinition>
<RowDefinition />
<RowDefinition Height="30"></RowDefinition>
</Grid.RowDefinitions>
Danach legen wir einen Verlauf für den “Ribbon” fest. Ein LinearGradientBrush erfüllt diese Anforderung voll und ganz. Der Ribbon wird in einem StackPanel mit einer Horizontalen Ausrichtung angegeben.
<StackPanel Orientation="Horizontal">
<StackPanel.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#6668A0FF" Offset="1"/>
<GradientStop Color="#7F1246A1"/>
</LinearGradientBrush>
</StackPanel.Background>
Die RichTextArea wird im Grid in der Reihe “1” eingefügt. Wie dies aussieht ist in der vorletzten Zeile des nachfolgenden Codes ersichtlich. Für unser Word-Nachbau brauchen wir vorerst drei Buttons und eine ComboBox (erweitert wird diese in den nächsten Einträgen). Der erste Button ist für fett, der zweite für kursiv und der dritte für unterstrichen zuständig. Die ComboBox enthält einige Schritgrößen von 8-22.
<Button Margin="5" FontWeight="Bold" Width="40" Content="B" Click="Button_Click" />
<Button Margin="5" FontStyle="Italic" Width="40" Content="I" Click="Button_Click" />
<Button Margin="5" Width="40" Click="Underline">
<TextBlock>
<Run TextDecorations="Underline">U</Run>
</TextBlock>
</Button>
<ComboBox Width="150" Margin="5" SelectedValue="12" SelectionChanged="ComboBox_SelectionChanged">
<ComboBoxItem Content="8" />
<ComboBoxItem Content="10" />
<ComboBoxItem Content="12" />
<ComboBoxItem Content="14" />
<ComboBoxItem Content="16" />
<ComboBoxItem Content="18" />
<ComboBoxItem Content="22" />
</ComboBox>
</StackPanel>
<RichTextArea Name="TextArea" Grid.Row="1"></RichTextArea>
</Grid>
Im nächsten Schritt wollen wir den Eventhandler für die ersten zwei Buttons erstellen. Dies ist fett und kursiv. Wichtig ist vorweg, das eine RichTextArea verschiedene Selektionen erlaubt. Diese sind über die “Selection” Property aufrufbar. Hier kann man mit “SetPropertyValue” die Eigenschaften setzen. Fett schreiben kann man mit der “FontWeightProperty”, kursiv mit der “FontStyleProperty” Enumeration.
private void Button_Click(object sender, RoutedEventArgs e)
{
string cmd = ((Button)sender).Content.ToString();
if (!string.IsNullOrEmpty(TextArea.Selection.Text))
{
switch (cmd)
{
case "B":
TextArea.Selection.SetPropertyValue(TextElement.FontWeightProperty, FontWeights.ExtraBlack);
break;
case "I":
TextArea.Selection.SetPropertyValue(TextElement.FontStyleProperty, FontStyles.Italic);
break;
default:
break;
}
}
}
Ähnlich wie bei fett und kursiv verhält es sich auch bei unterstrichen. Hierfür verwenden wir das TextElement.TextDecorationsProperty mit TextDecorations.Underline.
private void Underline(object sender, RoutedEventArgs e)
{
if (!string.IsNullOrEmpty(TextArea.Selection.Text))
{
TextArea.Selection.SetPropertyValue(TextElement.TextDecorationsProperty, TextDecorations.Underline);
}
}
Und natürlich verhält sich auch die ComboBox ähnlich. Hierfür wird die Schriftgröße geändert sobald die ComboBox-Selection sich geändert hat.
private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ComboBox c = sender as ComboBox;
ComboBoxItem ci = c.SelectedValue as ComboBoxItem;
if (!string.IsNullOrEmpty(TextArea.Selection.Text))
{
TextArea.Selection.SetPropertyValue(TextElement.FontSizeProperty, ci.Content);
}
}
Die RichTextArea in Silverlight 4 bietet einige interessante Möglichkeiten. Jedoch ist dies nur ein sehr allgemeiner Einführungsteil. Mehr zu der RichTextArea wird in den kommenden Beispielen enthalten sein, wo die weiteren Änderungen zu Silverlight 4 vorgestellt werden.
Hier geht es zum Überblick zu Silverlight 4
Bei dieser Gelegenheit möchte ich auch auf den WPF/Silverlight Community Day hinweisen, welcher am 29. Jänner in Graz statt finden wird. Hier werden die Silverlight 4 Neuerungen nochmal beleuchtet.
Mario Meir-Huber
www.meirhuber.de
Subscribe