Tag Archives: Rich Text box

Silverlight 5 Multi Column and Linked Text

If you are designer of text and love to play around text formatting’s, then you would love to use Multi Columns and Link text in Rich Text Box. This feature gives your ability to display overflowed content in next box or column rather than using scroll bar to read through all the content.

While working with RichText Box you had option that If paragraphs and text is more than height and width of RichText Box you show then using scroll bars. Now in Silverlight 5, you can link overflowed content to next column or box.

If you link text in multi columns, you will get expected output as below,

image

All columns [You may say box as well] all linked to each other. You can put boxes as you want. In above case three boxes are in three different columns, if you want you can put Column2 and Column 3 in same columns.

If you have a RichTextBox like below and this may be having many contents.

image

Now you want to link this RichText Box with RichTextOverFlow such that overflow content will be displayed in next box.

image

It can be done as below,

image

This is very nice feature you can use to create multicolumn content. For your reference source code of output, I shown earlier is given blow,


<UserControl x:Class="SilverlightApplication9.MainPage"
xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation"></a>"
xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml">http://schemas.microsoft.com/winfx/2006/xaml</a>"
xmlns:d="<a href="http://schemas.microsoft.com/expression/blend/2008"></a>"
xmlns:mc="<a href="http://schemas.openxmlformats.org/markup-compatibility/2006"></a>"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="White">
<RichTextBlock x:Name="FirstBox"
HorizontalAlignment="Left"
Width="100"

OverflowContentTarget="{Binding ElementName=SecondBox}"
Margin="33,0,0,0">
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
</RichTextBlock>
<RichTextBlockOverflow  x:Name="SecondBox" HorizontalAlignment="Right"
Width="100"
OverflowContentTarget="{Binding ElementName=ThirdBox}"
Margin="0,0,45,250">

</RichTextBlockOverflow>
<RichTextBlockOverflow x:Name="ThirdBox"
HorizontalAlignment="Right"
Width="100"
Margin="0,0,194,195">
</RichTextBlockOverflow>
</Grid>
</UserControl>

I hope this post was useful. Thanks for reading Smile

If you find my blogs useful you may like to follow me on twitter
http://twitter.com/debug_mode
 or may like Facebook page of this blog
http://www.facebook.com/DebugMode.Net

If you want to see post on a particular topic please do write on FB page or tweet me about that, I would love to help you.

RichTextBox in Windows Phone 7.1 or Mango

RichTextBox control is one of the most welcome controls in Beta release of Windows Phone 7.1 or Mango phone.

Beta version of RichTextBox control has come with many limitations  Sad smile

  • It is Read Only
  • Control does not appear in tool box
  • There is no default style.

There are two usual ways to add RichTextBox, one directly add on XAML as below,

 

image

Another in code as below,

clip_image004

If you just add RichTextBox in XAML and run application, surprisingly you will not get rendered RichTextBox on page Sad smile . This is due to absence of default style for RichTextBox.

So to work with RichTextBox we need to add Default Style for RichTextBox.  In below App.Xaml , I have added default style for RichTextBox.

App.Xaml


<Application
    x:Class="RichTextBox.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone">

    <!--Application Resources-->
    <Application.Resources>

        <Style TargetType="RichTextBox">
            <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}" />
            <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RichTextBox">
                        <Grid Background="Transparent">
                            <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Margin="{StaticResource PhoneHorizontalMargin}">
                                <ContentControl x:Name="ContentElement" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>

    <Application.ApplicationLifetimeObjects>
        <!--Required object that handles lifetime events for the application-->
        <shell:PhoneApplicationService
            Launching="Application_Launching" Closing="Application_Closing"
            Activated="Application_Activated" Deactivated="Application_Deactivated"/>
    </Application.ApplicationLifetimeObjects>

</Application>

 

 

After adding style for RichTextBox, on running you will get RichTextBox on phone as below,

image

To add button in RichTextBox , we need to put Button control inside InlineUIContainer like below .

image

To add an Undeline text we need to put text in Underline  tag

 

image

To add Image in RichTextBox we need to put Image in InlineUIContainer

 

image

After adding RichTextBox with different paragraphs containing Button , Image , Bold Text and Underlined text XAML would be as below ,

MainPage.xaml 


<phone:PhoneApplicationPage
    x:Class="RichTextBox.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <RichTextBox x:Name="rtxtbox" Margin="0,-84,0,0">
                <Paragraph>
                    <Bold Foreground="BLUE">Hey I am Blue and Bold !</Bold>
                </Paragraph>
                <Paragraph>
                    <InlineUIContainer>
                        <Image Source="Penguins.jpg" />
                    </InlineUIContainer>
                </Paragraph>
                <Paragraph >
                    Dhananjay Kumar is here on DebugMode
                </Paragraph>
                <Paragraph >
                    <InlineUIContainer>
                        <Button
                            x:Name="btnRch"
                            Content="RichTextBox Button "
                             Click="btnRch_Click" />
                    </InlineUIContainer>
                </Paragraph>
                <Paragraph>
                    <InlineUIContainer>
                        <Image Source="Penguins.jpg" Height="20" Width="30"/>
                    </InlineUIContainer>
                </Paragraph>
                <Paragraph>
                    <Underline>I am UnderLined</Underline>
                </Paragraph>

            </RichTextBox>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

 

 

 

When you run phone application, you should get output as below,

image

 

Note:

In XAML if you will notice there are two paragraphs one for Button and one for Image. But in output those Image and Button is not getting displayed. In next post I would discuss on the same. And I if you get solution of this problem before me please write to me about your investigation  Smile

Thanks  for reading .