Brad’s Dark Consolas

Garden Of Eden

Humane Studio

Jflam

Slim Code

Vibrant Ink

Zenburn

-Chipalo

Key

Brad’s Dark Consolas – VS08 , VS10

Garden Of Eden – VS08, VS10

Humane Studio – VS08, VS10

Jflam – VS08, VS10

Slim Code – VS10 , VS08

Vibrant Ink – VS10, VS10 trick!

Zenburn – VS10, VS08

Graphics
Layout Rounding
Cached Composition
Pixel Shader 3
New Pixel Shader APIs
Easing Functions
Removal of legacy bitmap effects

Controls
DataGrid
Calendar
DatePicker

Binding
Binding Commands on InputBinding
Bind to Dynamic Objects

Styling and Templating
Visual State Manager

Windows 7
Multi-Touch and Manipulation
Integration with the Shell and Taskbar

General
Client Profile
Managed Extensibility Framework
Parallel Computing
XBAP Script Access

We are really excited to see all of the great apps you create with this release.

-Chipalo

During each milestone of WPF4, we have been working to improve our text rendering. WPF4 Beta2 included new text rendering and formatting modes. The RC contained additional bug fixes to our rendering. We hoped that this work would solve WPF’s text rendering issues. Overall, feedback on our improved text rendering was positive; however it was clear a few issues remained.

During our last milestone, we have identified an issue with our display mode (pixel aligned) rendering. When using light colored text on a dark background, text rendering differed noticeably from GDI. With this fixed, WPF is not technically pixel perfect with GDI text rendering, but the difference is indiscernible to the naked eye.

Below are some comparison screenshots of VS2008 (GDI) and VS10 (WPF) with this fix. All cropped images use Consolas 9. The color schemes used are: default(default VS color scheme), customColors1(submitted via a connect bug as a blurry color scheme. I believe it is the same as Oren Ellenbogen’s DarkScheme), and customColors2(DesertNights color scheme). Check them out and let us know what you think!

Open corresponding images in two different windows of an image editor. Make sure the windows completely align and overlap. Alt-tab between the two windows. You should NOT be able to tell the difference between the two images. To verify that these are actually different images, zoom in and use the color picker to sample the color on the same pixel from both images. Notice that the RGB values change ever so slightly as you sample the color from the different images.

- Chipalo

VS2008, default colors

VS2010 with fix, default colors

VS2008, customColors1

VS2010 with fix, customColors1

VS2008, customColors2

VS2010 with fix, customColors2

Side by side comparison of VS2008 and VS2010 with fix

Enlarged comparison of a line of text from VS2008 and VS2010 with fix

Side by side comparison of VS2008 and VS2010 with fix

Enlarged comparison of a line of text from VS2008 and VS2010 with fix

If Visual Studio 2010 Beta2 (all systems) or RC (Win7) crashes every time at startup, you may have hit a known issue that we are working to resolve. It is uncommon (but possible) to update fonts in a strange enough order to cause the font cache to think a file has gone missing. Once this happens an exception will be thrown causing Visual Studio to crash. We have fixed this for Vista and XP (RC & later builds) and will create a QFE for Win7 in time for the release of Visual Studio 2010. In the mean time, please work around this issue with the following steps.

1.      Stop Windows Presentation Foundation Font Cache 4.0.0.0 service (or kill WPFFontCache_v0400.exe proc)

2.      Delete *.dat from…

a.      XP -  %SystemDrive%\Documents and Settings\LocalService\Local Settings\Application Data.

b.      Vista/Win7 - %windir%\ServiceProfiles\LocalService\AppData\Local\.

3.      Reboot and you should be able to use Visual Studio.

- Chipalo

The heuristic used to choose when to render with ClearType works by disabling ClearType whenever WPF reaches a node that introduces an intermediate texture that could be transparent. Some examples of this are placing text inside Effects, OpacityMask, VisualBrush, DrawingBrush, and layered windows. When used in layered windows, Clips and Opacity both also introduce these potentially-transparent intermediate surfaces and will disable ClearType.

To ensure correctness, this heuristic is overly aggressive, and sometimes ClearType is disabled on parts of visual trees where WPF can actually render ClearType. For example, consider the situation where an intermediate texture is an ancestor of a TextBlock with an opaque background. Since WPF knows the background color of the TextBlock, the ClearType algorithm can run correctly. Regardless of this fact, WPF will fall back to grayscale rendering because ClearType was disabled by the intermediate texture.

Setting ClearTypeHint will temporarily re-enable ClearType at the point in the tree where it’s set.  As we continue to walk the visual tree, it can be disabled again by the next intermediate render texture we encounter in a descendent node for that node’s descendents.  This allows a developer to turn ClearTypeHint on at the root of a layered window with an opaque background to get ClearType text where it was previously disabled, for example, without incorrectly trying to render text inside an Effect in that window with ClearType as well.

WPF needs to disable ClearType because the blending algorithm won’t work with a transparent intermediate texture – it will produce visually incorrect results.  This is the inherent danger in using ClearTypeHint – if you set it on a node being blended into a non-opaque intermediate texture then text will blend incorrectly and look wrong. It’s too expensive to keep track of which areas are opaque or not at run-time, which is why WPF’s errs on the side of caution when disabling ClearType.  ClearTypeHint can only be safely used when the developer ensures their text is being blended directly into an opaque area.

ClearTypeHint API

The property RenderOptions.ClearTypeHint has been introduced in WPF 4.0 to allow a developer to re-enable ClearType rendering on elements which have had ClearType disabled by an ancestor element. ClearTypeHint has two values which are inherited by its children.

·        Auto – This is the default behavior of WPF. If an app specifies that ClearType should be used (TextOptions.TextRenderingMode), the framework will use ClearType on all text in the visual tree until an element which disables ClearType is encountered. Any text that follows such an element will not use ClearType rendering.

·        Enabled – Re-enables ClearType rendering on an element which has had ClearType disabled by an ancestor element. Note that setting ClearTypeHint to “Enabled” makes it possible for that element or any of its children to use ClearType rendering which is controlled by TextOptions.TextRenderingMode.

ClearTypeHint Usage

There are a couple things to keep in mind when using ClearTypeHint.          

1)      Set ClearTypeHint below the intermediate texture in the visual tree.  If an OpacityMask is put on a TextBlock, setting ClearTypeHint on the TextBlock will not work because of the order of operations. RenderOptions are higher in the tree than OpacityMask/Effects/Clip/etc. 

2)      Ensure the text is being drawn into something opaque directly.  That means that the opaque background also needs to be set below the intermediate in the tree, otherwise the text will draw into a transparent surface first and then blend into something opaque which doesn’t work.

Below is the ControlTemplate for a glassy Button. The glassy effect is achieved by placing an OpacityMask on a Border element which is the parent of the ContentPresenter. The OpacityMask introduces an intermediate render texture and this disables ClearType for all children of the Border. ClearTypeHint has been set on the ContentPresenter to re-enable ClearType.

<ControlTemplate x:Key="GlassButton" TargetType="{x:Type Button}">

   <Border BorderBrush="#FFB0B0B0" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">

      <Border BorderBrush="#FF000000" BorderThickness="1,1,1,1"

              CornerRadius="4,4,4,4" Background="#ffE0E8FF">

         <Border.OpacityMask>

            <LinearGradientBrush StartPoint=".5,1" EndPoint=".5, 0">

               <GradientStop Color="Transparent" Offset="0"/>

               <GradientStop Color="Black" Offset=".4"/>

               <GradientStop Color="Black" Offset=".6"/>

               <GradientStop Color="Transparent" Offset="1"/>

            </LinearGradientBrush>

         </Border.OpacityMask>

         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"

                           Width="Auto" RenderOptions.ClearTypeHint="Enabled"/>

      </Border>

   </Border>

</ControlTemplate>

Zoomed screenshot of the button rendered without ClearTypeHint set on the ContentPresenter. Notice the grayscale text antialiasing.

Zoomed screenshot of the button rendered with ClearTypeHint=”Enabled” set on the ContentPresenter. Notice the ClearType text antiailiasing (colored fringing).

<TextBlock FontSize="24">Hello World</TextBlock>

To force WPF to use a different unit of measurement, just append the unit abbreviation to the FontSize.

<TextBlock FontSize="24pt">Hello World</TextBlock>

Device Independent Pixels & Physical Pixels

In accordance with WPF’s resolution independence, the framework measures objects in device independent pixels. These device independent pixels can have different sizes than physical pixels.

1 device independent pixel = 1/96 inch.

1 physical pixel = 1/DPI (dependent on the system DPI)

Default system settings usually choose a DPI of 96 so these two types of pixels come out to be the same size. If this is not the case, it is easy to convert between the two types of pixels.

physical pixels = DPI/96 * device independent pixels

device independent pixels = 96/DPI * physical pixels

Notice that as the DPI increases, so does the number of physical pixels which compose one device independent pixel. Hence, objects that have their sizes specified in device independent pixels get larger as the system DPI increases.

Points

A point (pt) is also a common unit of measurement for fonts.

1pt = 1/72 inches

Converting between points and device independent pixels is also easy.

pt = 72/96 device independent pixels

device independent pixels = 96/72 pt

Remember objects which are measured in device independent pixels get larger as system DPI increases? This is true for text. Since there is a constant ratio between point sizes/device independent pixels, if the point size of text is held constant while the system DPI is increased, the size of the rendered text will grow.

Uses For Font Units

Aside from knowing how to correctly set FontSize, the above knowledge could be helpful in understanding the values that WPF text APIs, such as FormattedText or TextFormatter, use and return for the different text measurements. The metrics returned from these APIs are in device independent pixel (eg. some properties of GlyphTypeface including Baseline, CapsHeight, XHeight). When interacting with these APIs make sure that you convert to device independent pixels from whatever unit your font is measured in, or visa versa.

- Samer and Chipalo

WPF includes a spell checker, but currently it only uses the OS provided dictionary for input validation. It lacks the functionality to allow the default dictionaries to be augmented with custom dictionaries provided by an application. This has been a major issue for apps which target specific industries with specialized lingo. Those apps are plagued by misspelling notifications.

A chat client is a classic example of an application that displays specialized words. In such an application, web slang such as lol, brb, or ttyl is frequently used. While these acronyms are not official words in English, in the context of a chat client these are not misspelled words.

This problem has been fixed in WPF 4.0. The ability to augment spelling support, via an application provided custom dictionary, has been added to the framework.

Custom Dictionaries API

The property CustomDictionaries has been added to the SpellCheck class.

·        CustomDictionaries - This is a read-only dependency property which is an IList of URIs. Each URI points to a custom dictionary to be used for spell checking.  If spell checking is disabled, SpellCheck.IsEnabled == false, no spell checking will occur, even if a custom dictionary is provided.

Custom Dictionary Format

Custom dictionaries are simple text files with single words on each line. Each line represents a legitimate word which should not be marked as misspelled.

The first line of this file can specify a language that the custom dictionary should correspond to (e.g. “#LID 1033” means that this custom dictionary applies to US English). If no language is set, the custom dictionary will apply to all default dictionaries.

·        #LID 1033 – English

·        #LID 3082 - Spanish

·        #LID 1031 - German

·        #LID 1036 - French

Comments are not supported inside the custom dictionary file.

<Window x:Class="CustomSpellerDictionaries.MainWindow"

        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:sys1="clr-namespace:System;assembly=system"

        Title="Custom Dictionaries Example">

    <Grid>

        <TextBox Text="Finallly, my name, Chipalo, is not marked as misspelled."

                 TextOptions.TextFormattingMode="Display">

            <SpellCheck.IsEnabled>true</SpellCheck.IsEnabled>

            <SpellCheck.CustomDictionaries>

                <sys1:Uri>D:\TEMP\dictionary.lex</sys1:Uri>

            </SpellCheck.CustomDictionaries>

        </TextBox>

    </Grid>

</Window>

Contents of D:\TEMP\dictionary.lex

Chipalo

TextBlock created with the above XAML. Notice that spell checking is enabled but “Chipalo” is not marked as misspelled.

Custom Dictionaries Suggested Usage

Custom dictionaries should be used when an application wants a set of words, which are not found in the default dictionary for a language, to not be marked as misspelled. Specifying a langue for a custom dictionary will limit the use of the dictionary to only the denoted language. A custom dictionary which is not marked as language specific will be used for spell checking in all languages which spell checking is supported.

Spelling support in WPF is limited to four languages: English, Spanish, French, and German. Custom dictionaries are designed to augment the default dictionaries for these languages and not to extend spelling support to other languages. Creating a custom dictionary which contains common Russian words, marking the dictionary as a Russian dictionary, and adding it to the SpellCheck object of a TextBox or RichTextbox will not add Russian spelling support. If the first line of a custom dictionary denotes that the dictionary is used for a language which is not supported, that dictionary will be ignored. 

 - Chipalo

Bindable Run API

The property Run.Text has been converted to a dependency property. Now Run.Text enjoys all of the benefits of full dependency properties (binding, styling, templating, etc…).

<Window x:Class="TextBlogDWriteDemo.Window1"

        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"

        Title="Window1">

    <Window.Resources>

        <TextBox x:Key="DataStore1" Text="how text does not

                                          flow correctly"/>

        <TextBox x:Key="DataStore2" Text="This is an example

  of how text flows correctly when only

  using bound Runs"/>

    </Window.Resources>

        <FlowDocument>

            <Paragraph>

                <Run Text="This is an example of"/>

                <TextBlock Text="{Binding Source=

                   {StaticResource DataStore1},

                   Path=Text}"/>

                <Run Text="when using a combination of Runs

                           and TextBlock"/>

            </Paragraph>

            <Paragraph>

                <Run Text="{Binding Source={StaticResource

                           DataStore2}, Path=Text}"/>

            </Paragraph>

        </FlowDocument>

</Window>

This is a screenshot of the text produced by the above XAML. Notice the spacing issues which are fixed by binding to a Run as opposed to a TextBlock.

Bindable Run Usage

One way data binding is fully supported. A Run can be bound to a data source and the content of the Run will reflect the value of what it is bound to. The bound Run will receive and display any changes that occur in the data source.

Two way data binding is partially supported. If a bound Run is updated via calls to the WPF property system, the data source which the Run is bound to will reflect the changes to the Run. On the other hand, if a bound Run is updated via a RichTextBox or the text object model, the Run will lose its binding.

- Chipalo

Caret Brush API

The property CaretBrush is now available for use on TextBox, RichTextBox, and PasswordBox.

·         CaretBrush - The brush assigned to this property will be used to draw the caret.

<TextBox CaretBrush="Yellow" FontSize="12pt"/>

 - Chipalo

Selection Brush API

The properties SelectionBrush and SelectionOpacity are now available for use on TextBox, RichTextBox, FlowDocumentPageViewer, FlowDocumentScrollViewer, FlowDocumentReader and PasswordBox.

·         SelectionBrush - The brush assigned to this property will be used to draw the selection overlay for text.

·         SelectionOpacity -  The opacity for the selection overlay. Note that if this value is set to 1 and the brush being used does not have some transparency specified in the alpha channel, selected text will be obscured by the selection overlay. In general, you don’t worry about setting the SelectionOpacity. It defaults to a value of .6.

<TextBox SelectionBrush="Red" FontSize="12pt"/>

TextBox created with the above XAML. Notice that the red selection gets rendered as a pink due to the default value of SelectionOpacity. 

<TextBox SelectionBrush="Red" SelectionOpacity="1"  FontSize="12pt"/>

SelectionBrush FAIL. The text is obscured by the selection overlay because the SelectionBrush is not transparent and the SelectionOpacity has been set to 1.

Selection Brush Usage

We have added this feature to complement your creativity. SelectionBrush can be used whether you want to completely customize your application or just add a little flair to text selection. When using this feature, remember that SelectionOpacity effects the color of the selection drawn to the screen. If the rendered color of your selection is not the exact color of the SelectionBrush, it is probably due to the interaction of SelectionOpacity and SelectionBrush. If the selection is obscuring you text, remember to tweak SelectionOpacity or give SelectionBrush some transparency.

Below is a slightly more interesting application of SelectionBrush using a GradientBrush.

<TextBox FontSize="12pt">

    <TextBox.SelectionBrush>

        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

            <GradientStop Color="Transparent" Offset="-.2" />

            <GradientStop Color="Blue" Offset="0.25" />

            <GradientStop Color="Blue" Offset="0.75" />

            <GradientStop Color="Transparent" Offset="1.2" />

        </LinearGradientBrush>

    </TextBox.SelectionBrush>

</TextBox>

- Chipalo