default.aspx
Silverlight .NET Controls and CMS
Home
controls.aspx
Silverlight Controls
Controls
controls/rich_textbox.aspx
Silverlight Rich TextBox
Rich TextBox
Visual Customizations

Customizing the Rich TextBox With Styles

The Rich TextBox control can be skinned using the standard Silverlight 2 method of setting Styles in the App.xaml file of your Silverlight project.

Example of how to Apply a Skin to the Rich TextBox

These styles are placed in your XAML and referred to using the Style property:


     <Style TargetType="local:RichTextBox">
          <Setter Property="Template">
               <Setter.Value>
                    <ControlTemplate TargetType="local:RichTextBox">
                         <Canvas x:Name="RootElement" Background="#ffffff">
                              <Canvas.Resources>
                                   <Storyboard x:Name="ElementCursorBlink" BeginTime="0" RepeatBehavior="forever">
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ElementCursor" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="00:00:01">
                                             <LinearDoubleKeyFrame Value="1" KeyTime="0:0:0" />
                                             <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.5" />
                                             <LinearDoubleKeyFrame Value="1" KeyTime="0:0:1" />
                                        </DoubleAnimationUsingKeyFrames>
                                   </Storyboard>
                              </Canvas.Resources>
                              
                              <ScrollViewer x:Name="ElementContainer" BorderThickness="1">
                                   <local:FlowPanel x:Name="ElementChildren" VerticalAlignment="Top" HorizontalAlignment="Left" />
                              </ScrollViewer>

                        <local:Bubble x:Name="ElementBubble" Width="168" Height="108" Cursor="Arrow">
                            <Canvas>
                                <Canvas>
                                    <local:TextBlockPlus x:Name="ElementTitle" Canvas.Left="8" Canvas.Top="8" Shadow="Slight" />
                                    <ComboBox x:Name="ElementSuggestions" Canvas.Left="8" Canvas.Top="30" Width="150" />
                                    <Grid Canvas.Left="8" Canvas.Top="65" Width="150">
                                        <Button x:Name="ElementAdd" HorizontalAlignment="Left" />
                                        <Button x:Name="ElementReplace" Margin="2 0 0 0" HorizontalAlignment="Right" />
                                    </Grid>
                                </Canvas>
                            </Canvas>
                        </local:Bubble>
                    </Canvas>
                    </ControlTemplate>
               </Setter.Value>
          </Setter>
     </Style>

 

As you can see, styling is a powerful method of customizing the controls to suite the look and feel of your Silverlight application.

 
This page is 28.9KB and was generated by the SilverPages CMS in 0.109 seconds. Total impressions: 324.