Mit WPF ist es super einfach einen TextEditor, der so ziemlich alle wichtigen Funktionen zur Textformatierung mitbringt, zu implementieren. Nur wenige Arbeitsschritte sind dazu notwendig.

sxTextEditor

Zuerst bauen wir uns das Grundgerüst um den Editor herum. Ich wähle da ein Dockpanel, der das ToolBarTray oben andockt, und dann benötigen wir noch das Element RichTextBox, welches sich darunter docken soll.

Die RichTextBox, benötigt zum darstellen von Dokumenten die ein FlowDocument und ein Paragraph die den Inhalt auf ein Absatz gruppiert.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    <DockPanel>
        <Border BorderBrush="#000000" BorderThickness="1" Margin="10" DockPanel.Dock="Top">
            <DockPanel>
                <ToolBarTray DockPanel.Dock="Top">
                   //...
                </ToolBarTray>
 
                <RichTextBox x:Name="NoteDocument" DockPanel.Dock="Top">
                    <FlowDocument>
                        <Paragraph>
 
                        </Paragraph>
                    </FlowDocument>
                </RichTextBox>
            </DockPanel>
        </Border>
    </DockPanel>

Für die erste ToolBar, benötigen wir für die Schriftarten und Schriftgrößen. Hier setze ich zwei ComboBoxen ein und die Source für die ComboBox Elemente weise ich im CodeBehind zu. Ich wähle dazu für die Schriftarten alle installierten Systemfonts und die Schriftgrösse bekommt ein paar einfache Items mit dem Datentyp String.

XAML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    <ComboBox Name="cbFontStyle" Width="150" Background="#ffffff"
              SelectionChanged="ComboBox_SelectionChanged">
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <TextBlock FontFamily="{Binding .}" Text="{Binding Source}" />
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>
    <ComboBox Name="cbFontSize" Background="#ffffff" Width="30"
              SelectionChanged="cbFontSize_SelectionChanged">
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}" />
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>

CODE:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Media;
 
namespace sxTextEditor
{
    /// <summary>
    /// Interaktionslogik für Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            LoadFontSize();
 
            LoadSystemFonts();
        }
 
        #region FontSize
        //Lädt die zur Verfügung stehenden Fontgroessen in die ComboBox
        void LoadFontSize()
        {
            cbFontSize.Items.Add("8");
            cbFontSize.Items.Add("10");
            cbFontSize.Items.Add("11");
            cbFontSize.Items.Add("12");
            cbFontSize.Items.Add("13");
            cbFontSize.Items.Add("14");
            cbFontSize.Items.Add("16");
            cbFontSize.Items.Add("18");
            cbFontSize.Items.Add("20");
            cbFontSize.Items.Add("22");
            cbFontSize.Items.Add("26");
            cbFontSize.Items.Add("30");
            cbFontSize.Items.Add("40");
        }
        #endregion

        /// <summary>
        /// Laedt die installierten SystemSchriftArten in die ComboBox
        /// </summary>
        void LoadSystemFonts()
        {
            cbFontStyle.ItemsSource=Fonts.SystemFontFamilies;
        }
 
        //ComboBoxMethode Schriftart
        private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (e.OriginalSource != null)
                NoteDocument.Selection.ApplyPropertyValue(TextElement.FontFamilyProperty, new FontFamily((e.OriginalSource as ComboBox).SelectedValue.ToString()));
        }
 
        //ComboBoxMethode Schriftgroesse
        private void cbFontSize_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (e.OriginalSource != null)
                NoteDocument.Selection.ApplyPropertyValue(TextElement.FontSizeProperty, Double.Parse((e.OriginalSource as ComboBox).SelectedValue.ToString()));
        }
    }
}

Der zweiten ToolBar widmen wir den Hervorhebungen im Text (Auszeichnungen). Dazu setze ich jeweilig ein ImageButton.

Die Icons dafür habe ich kostenlos über FamFamFam bezogen, bitte dazu das Lizenzmodel beachten. Die Commands (EditingCommands) für die Buttons beziehe ich aus dem PresentationFramework (PresentationFramework.dll).

Wie folgt sieht das im Code (XAML) aus:

1
2
3
4
5
6
7
8
9
10
11
<ToolBar>
    <Button Command="EditingCommands.ToggleBold" >
        <Image Source="../Images/text_bold.ico" Stretch="None"  />
    </Button>
    <Button Command="EditingCommands.ToggleItalic" >
        <Image Source="../Images/text_italic.ico" Stretch="None"/>
    </Button>
    <Button Command="EditingCommands.ToggleUnderline" >
        <Image Source="../Images/text_underline.ico" Stretch="None"/>
    </Button>
</ToolBar>

Die dritte Toolbar bekommt alle Button für die Ausrichtung im Text:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ToolBar>
    <Button Command="EditingCommands.AlignLeft" >
        <Image Source="../Images/text_align_left.ico" Stretch="None"/>
    </Button>
    <Button Command="EditingCommands.AlignCenter" >
        <Image Source="../Images/text_align_center.ico" Stretch="None"/>
    </Button>
    <Button Command="EditingCommands.AlignRight" >
        <Image Source="../Images/text_align_right.ico" Stretch="None"/>
    </Button>
    <Button Command="EditingCommands.AlignJustify" >
        <Image Source="../Images/text_align_justify.ico" Stretch="None"/>
    </Button>
</ToolBar>

und die vierte Toolbar bekommt die AufzählungsElemente zugewiesen.

1
2
3
4
5
6
7
8
<ToolBar>
    <Button Command="EditingCommands.ToggleBullets">
        <Image Source="../Images/text_list_bullets.ico" Stretch="None"/>
    </Button>
    <Button Command="EditingCommands.ToggleNumbering">
        <Image Source="../Images/text_list_numbers.ico" Stretch="None"/>
    </Button>
</ToolBar>


Das wars auch schon, nun habt Ihr einen einfachen TextEditor…
Viel Spass beim entwicklen!

Download: source| release

Einfacher Texteditor mit WPF
Markiert in: