This topic has not yet been rated - Rate this topic

RichTextBox Styles and Templates

Silverlight

This topic describes the styles and templates for the RichTextBox control. You can modify the default ControlTemplate to give the control a unique appearance. For more information, see Customizing the Appearance of an Existing Control by Using a ControlTemplate.

RichTextBox Parts

The following table lists the named parts for the RichTextBox control.

Part	Type	Description
ContentElement	FrameworkElement	A visual element that can contain a FrameworkElement. The text of the RichTextBox is displayed in this element

RichTextBox States

The following table lists the visual states for the RichTextBox control.

VisualState Name	VisualStateGroup Name	Description
Normal	CommonStates	The default state.
MouseOver	CommonStates	The mouse pointer is positioned over the RichTextBox control.
ReadOnly	CommonStates	The IsReadOnly property of the RichTextBox true.
Disabled	CommonStates	The RichTextBox control is disabled.
Focused	FocusStates	The RichTextBox control has focus.
Unfocused	FocusStates	The RichTextBox control does not have focus.
Valid	ValidationStates	The RichTextBox control is valid.
InvalidFocused	ValidationStates	The RichTextBox control is not valid and has focus.
InvalidUnfocused	ValidationStates	The RichTextBox control is not valid and does not have focus.

Default Style and Template

The following shows the XML namespace mapping that you have to specify when you work with styles and templates.

Copy

<!-- XML Namespace mapping. -->
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

Note:
The default templates still specify the vsm: XML namespace mapping for the VisualStateManager element for legacy reasons. You can however, use the VisualStateManager element without specifying the vsm: mapping.

The following XAML shows the default style and template for the RichTextBox control.

XAML

Copy


<!-- Default style for System.Windows.Controls.RichTextBox -->
    <Style TargetType="RichTextBox">
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Background" Value="#FFFFFFFF" />
        <Setter Property="Foreground" Value="#FF000000" />
        <Setter Property="Padding" Value="2" />
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA3AEB9" Offset="0"/>
                    <GradientStop Color="#FF8399A9" Offset="0.375"/>
                    <GradientStop Color="#FF718597" Offset="0.375"/>
                    <GradientStop Color="#FF617584" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RichTextBox">
                    <Grid x:Name="RootElement">
                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualState x:Name="Normal" />
                                <vsm:VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="MouseOverBorder" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="#FF99C1E2" Duration="0"/>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="ReadOnly" />
                            </vsm:VisualStateGroup>
                            <vsm:VisualStateGroup x:Name="FocusStates">
                                <vsm:VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Unfocused">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>

                        <Border x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Opacity="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
                            <Border x:Name="MouseOverBorder" BorderThickness="1" BorderBrush="Transparent">
                                <ScrollViewer x:Name="ContentElement" Padding="{TemplateBinding Padding}" BorderThickness="0" IsTabStop="False" />
                            </Border>
                        </Border>
                        <Border x:Name="DisabledVisualElement" Background="#A5F7F7F7" BorderBrush="#A5F7F7F7" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0" IsHitTestVisible="False"/>
                        <Border x:Name="FocusVisualElement" BorderBrush="#FF6DBDD1" BorderThickness="{TemplateBinding BorderThickness}" Margin="1" Opacity="0" IsHitTestVisible="False"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Reference

RichTextBox

Concepts

Control Customization

Customizing the Appearance of an Existing Control by Using a ControlTemplate

TextBox Styles and Templates

Other Resources

Control Styles and Templates

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)

Community Content Add

FAQ

You have an ERROR/TYPO

In the style template, the ScrollViewer name should be PART_ContentHost, not ContentElement.
[edit: Wolf Schmidt[MSFT]] - I'm not sure about that. In the class attribution, it also specifies the name "ContentElement". Are you sure you are looking at Silverlight, and at something that is definitely the default template?

History

2/15/2011
KansasRazor

2/24/2011
Wolf Schmidt - MSFT