inabox/inabox.wpf/DynamicGrid/Editors/RichTextEditor/RichTextEditor.xaml

<UserControl x:Class="InABox.DynamicGrid.RichTextEditor"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:sf="http://schemas.syncfusion.com/wpf"
             xmlns:dynamicGrid="clr-namespace:InABox.DynamicGrid"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.DataContext>
        <dynamicGrid:RichTextEditorViewModel x:Name="ViewModel"/>
    </UserControl.DataContext>
    <UserControl.Resources>
        <dynamicGrid:ButtonVisibleConverter x:Key="ToolbarVisibleConverter" Flag="None"/>
        <dynamicGrid:ButtonVisibleConverter x:Key="AlignVisibleConverter" Flag="Align"/>
        <dynamicGrid:ButtonVisibleConverter x:Key="BoldVisibleConverter" Flag="Bold"/>
        <dynamicGrid:ButtonVisibleConverter x:Key="ColorVisibleConverter" Flag="Color"/>
        <dynamicGrid:ButtonVisibleConverter x:Key="FontVisibleConverter" Flag="Font"/>
        <dynamicGrid:ButtonVisibleConverter x:Key="HyperlinkVisibleConverter" Flag="Hyperlink"/>
        <dynamicGrid:ButtonVisibleConverter x:Key="ItalicVisibleConverter" Flag="Italic"/>
        <dynamicGrid:ButtonVisibleConverter x:Key="PictureVisibleConverter" Flag="Picture"/>
        <dynamicGrid:ButtonVisibleConverter x:Key="TableVisibleConverter" Flag="Table"/>
        <dynamicGrid:ButtonVisibleConverter x:Key="UnderlineVisibleConverter" Flag="Underline"/>
        <dynamicGrid:ButtonVisibleConverter x:Key="ZoomVisibleConverter" Flag="Zoom"/>

        <sf:FontFamilyStringConverter x:Key="FontFamilyStringConverter" />
        <sf:UnderlineToggleConverter x:Key="UnderlineToggleConverter" />
        <sf:LeftAlignmentToggleConverter x:Key="LeftAlignmentToggleConverter" />
        <sf:RightAlignmentToggleConverter x:Key="RightAlignmentToggleConverter" />
        <sf:CenterAlignmentToggleConverter x:Key="CenterAlignmentToggleConverter" />
        <sf:JustifyAlignmentToggleConverter x:Key="JustifyAlignmentToggleConverter" />
    </UserControl.Resources>
    <Border BorderBrush="DarkGray" BorderThickness="0.75" CornerRadius="2">
        <DockPanel>

            <sf:ToolBarAdv x:Name="Toolbar" DockPanel.Dock="Top" Focusable="False" GripperVisibility="Collapsed"
                           IsOverflowOpen="False"
                           Visibility="{Binding VisibleButtons, Converter={StaticResource ToolbarVisibleConverter}}">
                <ComboBox Margin="12 2 0 2" Focusable="False" Width="160" x:Name="fontFamilyCombo"
                          SelectedValue="{Binding Path=Selection.CharacterFormat.FontFamily, Mode=TwoWay, ElementName=Editor, Converter={StaticResource FontFamilyStringConverter}}"
                          ItemsSource="{Binding Path=FontFamilySource}"
                          Visibility="{Binding VisibleButtons, Converter={StaticResource FontVisibleConverter}}"/>
                <ComboBox Margin="12 2 0 2" IsTabStop="False" Width="45" x:Name="fontSizeCombo" SelectedIndex="3"
                          ItemsSource="{Binding Path=FontSizeSource}"
                          SelectedValue="{Binding Path=Selection.CharacterFormat.FontSize ,Mode=TwoWay,ElementName=Editor}"
                          Visibility="{Binding VisibleButtons, Converter={StaticResource FontVisibleConverter}}"/>
                <sf:ColorPickerPalette x:Name="fontColorPicker" Margin="12 2 0 2" IsTabStop="False" Width="60"
                                       Mode="Split" MoreColorOptionVisibility="Collapsed"
                                       StandardPanelVisibility="Collapsed"
                                       Color="{Binding Path=Selection.CharacterFormat.FontColor ,Mode=TwoWay, ElementName=Editor}"
                                       Visibility="{Binding VisibleButtons, Converter={StaticResource ColorVisibleConverter}}"/>
                <sf:ButtonAdv x:Name="Bold" Margin="12 2 0 2" Focusable="False" SizeMode="Small" IsCheckable="True"
                              IsChecked="{Binding ElementName=Editor, Path=Selection.CharacterFormat.Bold, Mode=TwoWay}" 
                              Visibility="{Binding VisibleButtons, Converter={StaticResource BoldVisibleConverter}}"/>
                <sf:ButtonAdv x:Name="Italic" Margin="12 2 0 2" Focusable="False" SizeMode="Small" IsCheckable="True"
                              IsChecked="{Binding ElementName=Editor,Path=Selection.CharacterFormat.Italic,Mode=TwoWay}"
                              Visibility="{Binding VisibleButtons, Converter={StaticResource ItalicVisibleConverter}}"/>
                <sf:ButtonAdv x:Name="Underline" Margin="12 2 0 2" Focusable="False" SizeMode="Small"
                              IsCheckable="True"
                              IsChecked="{Binding ElementName=Editor, Path=Selection.CharacterFormat.Underline, Mode=TwoWay, Converter={StaticResource UnderlineToggleConverter}}"
                              Visibility="{Binding VisibleButtons, Converter={StaticResource UnderlineVisibleConverter}}"/>
                <sf:ToolBarItemSeparator Margin="12 2 0 2"
                                         Visibility="{Binding VisibleButtons, Converter={StaticResource AlignVisibleConverter}}"/>
                <sf:ButtonAdv x:Name="AlignLeft" Margin="12 2 0 2" Focusable="False" SizeMode="Small"
                              IsCheckable="True"
                              IsChecked="{Binding ElementName=Editor, Path=Selection.ParagraphFormat.TextAlignment, Converter={StaticResource LeftAlignmentToggleConverter}, Mode=TwoWay}"
                              Visibility="{Binding VisibleButtons, Converter={StaticResource AlignVisibleConverter}}"/>
                <sf:ButtonAdv x:Name="AlignCentre" Margin="12 2 0 2" Focusable="False" SizeMode="Small"
                              IsCheckable="True"
                              IsChecked="{Binding ElementName=Editor, Path=Selection.ParagraphFormat.TextAlignment, Converter={StaticResource CenterAlignmentToggleConverter}, Mode=TwoWay}"
                              Visibility="{Binding VisibleButtons, Converter={StaticResource AlignVisibleConverter}}"/>
                <sf:ButtonAdv x:Name="AlignRight" Margin="12 2 0 2" Focusable="False" SizeMode="Small"
                              IsCheckable="True"
                              IsChecked="{Binding ElementName=Editor, Path=Selection.ParagraphFormat.TextAlignment, Converter={StaticResource RightAlignmentToggleConverter}, Mode=TwoWay}"
                              Visibility="{Binding VisibleButtons, Converter={StaticResource AlignVisibleConverter}}"/>
                <sf:ButtonAdv x:Name="AlignJustify" Margin="12 2 0 2" Focusable="False" SizeMode="Small"
                              IsCheckable="True"
                              IsChecked="{Binding ElementName=Editor, Path=Selection.ParagraphFormat.TextAlignment, Converter={StaticResource JustifyAlignmentToggleConverter}, Mode=TwoWay}"
                              Visibility="{Binding VisibleButtons, Converter={StaticResource AlignVisibleConverter}}"/>
                <sf:ToolBarItemSeparator Margin="12 2 0 2"
                                         Visibility="{Binding VisibleButtons, Converter={StaticResource AlignVisibleConverter}}"/>
                <sf:ButtonAdv x:Name="Hyperlink" Margin="12 2 0 2" Focusable="False" SizeMode="Small"
                              Command="sf:SfRichTextBoxAdv.ShowHyperlinkDialogCommand"
                              CommandTarget="{Binding ElementName=Editor}"
                              Visibility="{Binding VisibleButtons, Converter={StaticResource HyperlinkVisibleConverter}}"/>
                <sf:ButtonAdv x:Name="Picture" Margin="12 2 0 2" Focusable="False" SizeMode="Small"
                              Command="sf:SfRichTextBoxAdv.InsertPictureCommand"
                              CommandTarget="{Binding ElementName=Editor}"
                              Visibility="{Binding VisibleButtons, Converter={StaticResource PictureVisibleConverter}}"/>
                <sf:ButtonAdv x:Name="Table" Margin="12 2 0 2" Focusable="False" SizeMode="Small"
                              Command="sf:SfRichTextBoxAdv.ShowInsertTableDialogCommand"
                              CommandTarget="{Binding ElementName=Editor}"
                              Visibility="{Binding VisibleButtons, Converter={StaticResource TableVisibleConverter}}"/>
                <sf:ToolBarItemSeparator Margin="12 2 0 2" Visibility="{Binding VisibleButtons, Converter={StaticResource ZoomVisibleConverter}}" />
                <sf:ButtonAdv x:Name="ZoomIn" Margin="12 2 0 2" Focusable="False" SizeMode="Small"
                              SmallIcon="/InABox.Wpf;Component/Resources/zoomin.png" Click="ZoomIn_Click"
                              Visibility="{Binding VisibleButtons, Converter={StaticResource ZoomVisibleConverter}}"/>
                <sf:ButtonAdv x:Name="ZoomOut" Margin="12 2 0 2" Focusable="False" SizeMode="Small"
                              SmallIcon="/InABox.Wpf;Component/Resources/zoomout.png" Click="ZoomOut_Click"
                              Visibility="{Binding VisibleButtons, Converter={StaticResource ZoomVisibleConverter}}"/>
            </sf:ToolBarAdv>

            <sf:SfRichTextBoxAdv x:Name="Editor" DockPanel.Dock="Top" EnableMiniToolBar="False"
                                 ContentChanged="RichTextBoxAdv_ContentChanged" BorderThickness="0"
                                 LostFocus="RichTextBoxAdv_LostFocus" OverridesDocumentBackground="True"
                                 LayoutType="Continuous"
                                 RequestNavigate="Editor_RequestNavigate"
                                 >
                <sf:SfRichTextBoxAdv.HtmlImportExportSettings>
                    <sf:HtmlImportExportSettings ImageNodeVisited="HtmlImportExportSettings_OnImageNodeVisited"></sf:HtmlImportExportSettings>
                </sf:SfRichTextBoxAdv.HtmlImportExportSettings>
            </sf:SfRichTextBoxAdv>

        </DockPanel>
    </Border>
</UserControl>