Silverlight Elements: Custom HTML editor toolbar style

One of the controls featured in Silverlight Elements is the HTML rich text editor. This control converts rich user input into HTML. Acompaning this control is the StandardRichTextEditorToolBar which provides buttons, combo boxes and other controls which the user can use to edit the rich text. Just like all the other controls available in Silverlight Elements, the StandardRichTextToolBar comes with 5 beautiful styles to get you started.

HTML editor toolbar themes

This blog post will take a brief look at how you can create your own style for the HTML editor toolbar.

By creating a custom toolbar style, you can change the look and feel of each of the toolbar controls, and also customize the arrangement of all the controls. For simplicity, we will simply look at moving all the controls on to a single line.

Since we’re not going to worry about styling any of the toolbar buttons or other controls, all we need to do is modify one of the provided toolbar styles. Silverlight Elements comes with the XAML source code for all the styles. By opening the OfficeBlue.xaml file and looking for the “StandardRichTextEditorToolBar”, we get the following style:

  <Style x:Name="HtmlEditorToolBarStyle" TargetType="local:StandardRichTextEditorToolBar">
    <Setter Property="Background" Value="#DAE8F9" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="local:StandardRichTextEditorToolBar">
          <Border Background="{TemplateBinding Background}" BorderThickness="1,0,1,0" Padding="3">
            <StackPanel>
              <StackPanel Orientation="Horizontal">
                <Grid>
                  <Border BorderThickness="5" CornerRadius="4">
                    <StackPanel Orientation="Horizontal">
                      <ToggleButton Name="PART_BoldButton" Style="{StaticResource ToolBarToggleButtonStyle}" ContentTemplate="{StaticResource BoldButtonTemplate}"
                              ToolTipService.ToolTip="Bold" />
                      <ToggleButton Name="PART_ItalicButton" Style="{StaticResource ToolBarToggleButtonStyle}" ContentTemplate="{StaticResource ItalicButtonTemplate}"
                              ToolTipService.ToolTip="Italic" />
                      <ToggleButton Name="PART_UnderlineButton" Style="{StaticResource ToolBarToggleButtonStyle}" ContentTemplate="{StaticResource UnderlinedButtonTemplate}"
                              ToolTipService.ToolTip="Underline" />
                    </StackPanel>
                  </Border>
                  <Border BorderThickness="5" BorderBrush="{TemplateBinding Background}" IsHitTestVisible="False" CornerRadius="8" />
                  <Border BorderThickness="1" BorderBrush="#7999C2" IsHitTestVisible="False" CornerRadius="4" Margin="5" />
                </Grid>
 
                <Grid>
                  <Border BorderThickness="5" CornerRadius="4">
                    <StackPanel Orientation="Horizontal">
                      <RadioButton Style="{StaticResource ToolBarRadioButtonStyle}" ContentTemplate="{StaticResource LeftAlignmentButtonTemplate}"
                              ToolTipService.ToolTip="Left Alignment" GroupName="AlignmentGroup" Name="PART_LeftAlignmentButton" />
                      <RadioButton Style="{StaticResource ToolBarRadioButtonStyle}" ContentTemplate="{StaticResource centerAlignmentButtonTemplate}"
                              ToolTipService.ToolTip="Center Alignment" GroupName="AlignmentGroup" Name="PART_CenterAlignmentButton" />
                      <RadioButton Style="{StaticResource ToolBarRadioButtonStyle}" ContentTemplate="{StaticResource RightAlignmentButtonTemplate}"
                              ToolTipService.ToolTip="Right Alignment" GroupName="AlignmentGroup" Name="PART_RightAlignmentButton" />
                    </StackPanel>
                  </Border>
                  <Border BorderThickness="5" BorderBrush="{TemplateBinding Background}" IsHitTestVisible="False" CornerRadius="8" />
                  <Border BorderThickness="1" BorderBrush="#7999C2" IsHitTestVisible="False" CornerRadius="4" Margin="5" />
                </Grid>
 
                <Grid>
                  <Border BorderThickness="5" CornerRadius="4">
                    <StackPanel Orientation="Horizontal">
                      <Button Name="PART_CreateHyperlinkButton" Style="{StaticResource ToolBarButtonStyle}"
                              ContentTemplate="{StaticResource CreateEditHyperlinkButtonTemplate}" />
                      <Button Name="PART_RemoveHyperlinkButton" Style="{StaticResource ToolBarButtonStyle}"
                              ContentTemplate="{StaticResource RemoveHyperlinkButtonTemplate}" />
                    </StackPanel>
                  </Border>
                  <Border BorderThickness="5" BorderBrush="{TemplateBinding Background}" IsHitTestVisible="False" CornerRadius="8" />
                  <Border BorderThickness="1" BorderBrush="#7999C2" IsHitTestVisible="False" CornerRadius="4" Margin="5" />
                </Grid>
 
                <Grid>
                  <Border BorderThickness="5" CornerRadius="4">
                    <StackPanel Orientation="Horizontal">
                      <local:ListStyleTypePicker x:Name="PART_OrderedListSelector" Style="{StaticResource ListStyleTypeSelectorStyle}"
                                                 ItemsSource="{Binding OrderedListStyles, RelativeSource={RelativeSource TemplatedParent}}" />
                      <local:ListStyleTypePicker x:Name="PART_UnorderedListSelector" Style="{StaticResource ListStyleTypeSelectorStyle}"
                                                 ItemsSource="{Binding UnorderedListStyles, RelativeSource={RelativeSource TemplatedParent}}" />
                    </StackPanel>
                  </Border>
                  <Border BorderThickness="5" BorderBrush="{TemplateBinding Background}" IsHitTestVisible="False" CornerRadius="8" />
                  <Border BorderThickness="1" BorderBrush="#7999C2" IsHitTestVisible="False" CornerRadius="4" Margin="5" />
                </Grid>
 
              </StackPanel>
 
              <StackPanel Orientation="Horizontal">
                <Grid>
                  <Border BorderThickness="5" CornerRadius="4">
                    <StackPanel Orientation="Horizontal">
                      <local:PaletteColorPicker x:Name="PART_BackgroundPicker" Style="{StaticResource BackgroundColorPickerStyle}" />
                      <local:PaletteColorPicker x:Name="PART_ForegroundPicker" Style="{StaticResource ForegroundColorPickerStyle}" />
                    </StackPanel>
                  </Border>
                  <Border BorderThickness="5" BorderBrush="{TemplateBinding Background}" IsHitTestVisible="False" CornerRadius="8"/>
                  <Border BorderThickness="1" BorderBrush="#7999C2" IsHitTestVisible="False" CornerRadius="4" Margin="5" />
                </Grid>
 
                <ComboBox Name="PART_FontPicker" Width="100" Height="24" Style="{StaticResource ComboBoxStyle}"
                          ItemContainerStyle="{StaticResource ComboBoxItemStyle}" ItemTemplate="{StaticResource FontPickerItemTemplate}" />
                <Border Width="2" />
                <ComboBox Name="PART_FontSizePicker" Width="40" Height="24" Style="{StaticResource FontSizePickerComboBoxStyle}"
                          ItemContainerStyle="{StaticResource ComboBoxItemStyle}" ItemTemplate="{StaticResource FontSizePickerItemTemplate}" />
              </StackPanel>
            </StackPanel>
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

Within this style are a few nested stack panels which make up the layout of the toolbar. To put all the controls on a single line, we just need to put all the controls into a single horizontal stack panel. After doing so, we could then modify the order of the controls however we need them.

Once we have a custom toolbar style, we need to apply it to the StandardRichTextEditorToolBar in the application. To do this, start by putting the custom toolbar style in the resource dictionary of the page that is hosting the StandardRichTextEditorToolBar. The style contains a lot of static resources to apply styles to the various toolbar buttons. If we don’t provide our own styles for these, we need to use the ones provided in the theme instead. To do this, we can include the theme as a merged dictionary. Here is an example that uses the OfficeBlue theme:

<ResourceDictionary>
  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="/Mindscape.SilverlightElements;component/Themes/OfficeBlue.xaml" />
  </ResourceDictionary.MergedDictionaries>
 
  <!-- custom toolbar style goes here -->
 
</ResourceDictionary>

Now all that’s left to do is apply the custom toolbar style to the StandardRichTextEditorToolBar using a static resource and check out the results:

Custom HTML toolbar style

A sample demonstrating how to create a custom toolbar style for the HTML editor can be downloaded here. To run it, make sure you include a reference to your copy of the SilverlightElements.dll.

If you have any questions about creating custom styles for any of our Silverlight controls, then leave a comment on this blog post, or let us know on the Silverlight Elements forum.

Leave a Reply

Archives

Join our mailer

You should join our newsletter! Sent monthly:

Back to Top