WPF: FlowDocument control

Please be aware FlowDocument control in WPF, this can easy your life when needed.

Pictures that say it all

 

The diagram shows the objects most typically used with flow content.






Sources

• WPF Flow Document For Beginners - CodeProject
• http://msdn.microsoft.com/en-us/library/aa970909.aspx

WPF XAML example: Binding FontSize to a Slider

Code snippet

Code Snippet

9. <TextBlock Text="Hi there." FontSize="{Binding ElementName=mySlider, Path=Value}" />
10. <Slider Minimum="8" Maximum="32" x:Name="mySlider" Value="12" />

Result

WPF XAML example: Rich texted ToolTip with italic, color and more...

Example
In this example I'll demonstrate how to add a ToolTip to a TextBox.
The ToolTip should be colored and italic.

Code snippet

Code Snippet

9. <TextBox x:Name="SampleText"
10.     TextWrapping="Wrap">
11.     
12.     <TextBox.ToolTip>
13.         <TextBlock>
14.             <Italic Foreground="Red">Instructions: </Italic> Type here to change the preview text.
15.         </TextBlock>
16.     </TextBox.ToolTip>
17.     
18.     The quick brown fox jumps over the lazy dog.
19. </TextBox>

Result

Sources

• http://www.amazon.com/Sams-Teach-Yourself-WPF-Hours/dp/0672329859

WPF XAML TIP: Label with Target + Control composition == Hotkey control

Code snippet

Code Snippet

6. <Border DockPanel.Dock="Top">
7.     <StackPanel>
8.         <Label
9.             Content="_Last Name:"
10.             Target="{Binding ElementName=lastName}" />
11.         <TextBox x:Name="lastName" Width="100" HorizontalAlignment="Left"/>
12.     </StackPanel>
13. </Border>

Usage 
Press ALT+L to focus the TextBox control 'lastName'.

Result

WPF: TextBox with SpellCheck and ToolTip XAML example

Code snippet

Code Snippet

6. <TextBox
7.     Width="200"
8.     SpellCheck.IsEnabled="True"
9.     ToolTip="Tips for this input-box here..." />

Results

  

WPF: Rich TextBlock XAML example

"The TextBlock was designed specifically for the purpose of showing small amounts of flowing rich text to the user.
It is the perfect element for displaying instructions or summary information."

• Quoted from ''Sams Teach Yourself WPF in 24 Hours"

Usage example

I have a program that users can communicate with each other. I wish to add the feature of bold, colored, line-breaking and icons to that chat.

Here is an example I've found to illustrate it:

Source - http://www.webresourcesdepot.com/wp-content/uploads/image/free-ajax-chat-software.jpg

Example

Code Snippet

7. <TextBlock FontSize="10" TextWrapping="Wrap" >
8.     <Image Stretch="UniformToFill" Width="32" Height="32" Source="http://upload.wikimedia.org/wikipedia/en/b/b0/Avatar-Teaser-Poster.jpg" Margin="2 2 2 2" />
9.                     <Bold><Italic FontSize="12" Foreground="DarkGreen">ShloEmi:</Italic></Bold><LineBreak />
10.     <Bold><Italic FontSize="14" Foreground="BlueViolet">H</Italic></Bold>ave  fun with <Bold>TextBlock's</Bold>.<LineBreak />
11.     <AccessText Foreground="Blue">It's easy when you have an example </AccessText> <Image Source="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/50px-Smiley.svg.png" Width="16" Height="16"></Image>
12. </TextBlock>

Result

Have fun...

About WPF

Here is my experiance with learning and programming WPF in the last year:

First let me tell you that - WPF IS GREAT!
Simple put - WPF let you do layers of controls and decorators.
This means you can composite anything in easy.
The things I did with WPF were not easy at all in Win32-API and not even in .Net using GDI+.

Let's start with a complext WPF sample I've found:

http://10rem.net/blog/2010/10/28/the-present-and-future-of-wpf

Usage example

I wish to have a character drawn, later on I wish to add that character a life status, later on - an icon on the top-right to reperesent which guild is he in... and more...

Of course It's solvable using the Decorator-Pattern using the draw to add more pictures, but - you need to BitBlt ... and more complex stuff.

With WPF, however, you layer it all with opacity, or transparency, which is the same solution as before with one exception - you write it declarativly and in 10 min :-).

The learning curve

I already had a very rich epreriance with WinForms/MFC/Win32 GUI + I know Design-Patterns pretty good, so I had a good head-start ==> It was easier to learn, the elements were already in my mind.

First I started with tutorials to feel WPF, and books.
The most used were (recomendation ordered):

1. Tutorials:
1. WPF Tutorial
2. 'Hello WPF' ... http://www.wpftutorial.net/HelloWPF.html
2. Books:
1. http://www.amazon.com/Sams-Teach-Yourself-WPF-Hours/dp/0672329859
2. http://www.amazon.com/2010-NET-Platform-Andrew-Troelsen/dp/1430225491
1. The chapters about WPF (Chapter 27).

In between, I started using it in my solutions, strted with simple solutions (traditional GUI programming), used the known and common parts (buttons, labels, textboxes...), practiced and learned the basics.

Bottom line 
After touching WPF there is no going back, I'll always prefer WPF over other solutions, unless I have no choice, like - "the OS doesn't support DirectX 9" :-(.

Have a good and productive learning - WPF worth it!

Resources

• http://www.wpftutorial.net/Home.html
• Amazon
• http://msdn.microsoft.com/en-us/library/ms754130.aspx
• http://windowsclient.net/