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/

WPF: Radial Panel, custom panel

Here is a cool 'custom panel' I've found that might be very handy...
The Joy Of Programming: A Simple Radial Panel for WPF and SilverLight

Usage examples
Nicer selection menu, Clock digits, dynamic elements in radial presentation rather than list...

Example outputs

source - http://www.codeproject.com/KB/WPF/SpiderControl.aspx

WPF: Bulletdecorator XAML example

BulletDecorator is basically like any editor bullet (like MS word's bullet). You can specify how to draw the bullet itself and decorate what ever you need.

Suppose we want to do the following effect in WPF:

• This is a bullet

Here is the source for it:

Code Snippet

6. <BulletDecorator>
7.     <BulletDecorator.Bullet>
8.         <Polygon Margin=" 2, 0, 0, 0" Points="0, 5 5, 0 10, 5 5, 10" Fill=" Blue" />
9.     </BulletDecorator.Bullet>
10.     <TextBlock Margin="10, 0, 0, 0" Text="This is a bullet" />
11. </BulletDecorator>

And here is the results:

Source - Bulletdecorator in WPF | Controls | w3mentor

TUTORIAL: VS - Creating Code Snippets - CodeProject

I was in the middle of creating my experiance/article about the snippets subject when I got an email from http://www.codeproject.com/ with this wonderful article.

Extending Visual Studio Part 1 - Creating Code Snippets - CodeProject

I've already created some snippets, feel free to use them:

'Decorator-Pattern' snippet (activation: dp_decorator + TAB):

Code Snippet

1. xml version="1.0" encoding="utf-8" ?>
2. <CodeSnippetsxmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
3. <CodeSnippet Format="1.0.0">
4. <Header>
5. <Title>Decorator DPTitle>
6. <Shortcut>dp_decoratorShortcut>
7. <Description>Code snippet for decorator design patternDescription>
8. <Author>S.OAuthor>
9. <SnippetTypes>
10. <SnippetType>ExpansionSnippetType>
11. SnippetTypes>
12. Header>
13. <Snippet>
14. <Declarations>
15. <Literal>
16. <ID>ComponentID>
17. <ToolTip>Component nameToolTip>
18. <Default>ComponentDefault>
19. Literal>
20. <Literal>
21. <ID>DecoratorID>
22. <ToolTip>Decorator nameToolTip>
23. <Default>DecoratorDefault>
24. Literal>
25. Declarations>
26. <Code Language="csharp">
27. // Decorator patern:
28. // http://en.wikipedia.org/wiki/Decorator_pattern#Structure
29. // http://www.dofactory.com/Patterns/PatternDecorator.aspx
30. abstract class $Component$
31. {
32. public abstract void Operation();
33. }
35. abstract class $Decorator$ : $Component$
36. {
37. protected $Component$ _$Component$;
39. public void SetComponent($Component$ component)
40. {
41. this._$Component$ = component;
42. }
44. public override void Operation()
45. {
46. if (_$Component$ != null)
47. {
48. _$Component$.Operation();
49. // + [your operation here]
50. }
51. }
52. }
53. $end$
55. ]]>
56. Code>
57. Snippet>
58. CodeSnippet>
59. CodeSnippets>

The 'Event changed property' snippet (eprop + TAB):

Code Snippet

1. xml version="1.0" encoding="utf-8" ?>
2. <CodeSnippetsxmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
3. <CodeSnippet Format="1.0.0">
4. <Header>
5. <Title>event changed propertyTitle>
6. <Shortcut>epropShortcut>
7. <Description>Code snippet for eprop...Description>
8. <Author>SOAuthor>
9. <SnippetTypes>
10. <SnippetType>ExpansionSnippetType>
11. SnippetTypes>
12. Header>
13. <Snippet>
14. <Declarations>
15. <Literal Editable="true">
16. <ID>prop_nameID>
17. <ToolTip>property nameToolTip>
18. <Function>PropName()Function>
19. <Default>PropNameDefault>
20. Literal>
21. <Literal Editable="true">
22. <ID>prop_typeID>
23. <ToolTip>property typeToolTip>
24. <Function>PropType()Function>
25. <Default>ObjectDefault>
26. Literal>
28. Declarations>
29. <Code Language="csharp">
30. #region $prop_name$
32. ///
33. /// Occurs when $prop_name$ changes.
34. ///
35. public event EventHandler $prop_name$Changed;
37. ///
38. /// Raises the event.
39. ///
40. /// The instance containing the event data.
41. protected virtual void On$prop_name$Changed(EventArgs e)
42. {
43. if ($prop_name$Changed != null)
44. $prop_name$Changed(this, e);
45. }
47. private $prop_type$ _$prop_name$ = null;$end$
48. ///
49. /// Gets or sets the type of the region.
50. ///
51. ///
52. /// The type of the region.
53. ///
54. public $prop_type$ $prop_name$
55. {
56. get { return _$prop_name$; }
57. set
58. {
59. if (_$prop_name$ != value)
60. {
61. _$prop_name$ = value;
63. On$prop_name$Changed(new EventArgs());
64. }
65. }
66. }
67. #endregion
68. ]]>
69. Code>
70. Snippet>
71. CodeSnippet>
72. CodeSnippets>

And the 'TODO' snippet (TD + TAB), need some polish like auto date/time stamp, priority...:

Code Snippet

1. xml version="1.0" encoding="utf-8" ?>
2. <CodeSnippetsxmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
3. <CodeSnippet Format="1.0.0">
4. <Header>
5. <Title>TODOTitle>
6. <Shortcut>TDShortcut>
7. <Description>Code snippet for TODO...Description>
8. <Author>SOAuthor>
9. <SnippetTypes>
10. <SnippetType>ExpansionSnippetType>
11. SnippetTypes>
12. Header>
13. <Snippet>
14. <Declarations>
15. Declarations>
16. <Code Language="csharp">// TODO:P, TimeStamp, S.O: $end$]]>
17. Code>
18. Snippet>
19. CodeSnippet>
20. CodeSnippets>

My advice: if you already created a code pattern twice (meaning - you copied and pasted a code and renamed some variables and function/property names), add it to your snippets, you'll need it and it will save time.

REMARK: Please follow the codeproject artical if you wish to install/use them...

TIP: Creating a file, fast, with incremental values (using FOR /L).

I needed to create a file (called urls.txt) that contains lots of image urls, here is the solution:

1. Create a batch file (I'll call it gget.bat).
2. copy and paste the following to gget.bat file.

REM ~~~~~ gget.bat file content ~~~~~~~~~~~~~~~

@echo off
for /L %%a in (0,1,1984) do (
echo http://domain.com/images/%%a.jpg >>c:\urls.txt
)

ECHO DONE!
pause

REM ~~~~~ gget.bat file content ~~~~~~~~~~~~~~~

1. change the numbers in "(0,1,1984)" to the desired ones (please read more about 'FOR /L' here.).

the result is a file 'c:\urls.txt' that contains this:

http://domain.com/images//0.jpg 

http://domain.com/images//1.jpg 

http://domain.com/images//2.jpg 

http://domain.com/images//3.jpg 

...

http://domain.com/images//1983.jpg 

http://domain.com/images//1984.jpg 

Hope it helps...

TIP - How to check an errorlevel of a program...

First understand a little about error levels... Batch files - Errorlevels:

Next... Write this code the a batch file and run it (change the runme.exe to the program that you wish to check the error-level).
#~~~~~~~~~~~~~~~~~~~~~~~~~
runme.exe

ECHO.%ERRORLEVEL%
PAUSE

#~~~~~~~~~~~~~~~~~~~~~~~~~

Hope it helps...