WPF 4 Beta 2 Feature Walkthroughs ( Text and LayoutRounding )

Posted on by

I’ve been really enjoying Lester’s feature walkthrough posts over here about various features of WPF V4 Beta 2;

Concluding “New WPF Features” Series

There’s some really good stuff in there. It made me author a couple of XAML files.

Text display is arguably more important than ever as more and more reading moves to screens and in the past WPF has taken some flak over not always putting enough options into the hands of developers around tuning options around text such as where/when ClearType is used. You can read more about the details over here on the WPF Text Blog.

This caused me to put together a little XAML file of my own to try and play with these options as below;


<Page
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:ctl="clr-namespace:System.Windows.Media;assembly=PresentationCore"
   xmlns:sys="clr-namespace:System;assembly=mscorlib"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Page.Resources>
      <ObjectDataProvider x:Key="formattingMode" MethodName="GetValues" ObjectType="{x:Type sys:Enum}">
         <ObjectDataProvider.MethodParameters>
            <x:Type TypeName="ctl:TextFormattingMode"/>
         </ObjectDataProvider.MethodParameters>
      </ObjectDataProvider>
      <ObjectDataProvider x:Key="aliasingMode" MethodName="GetValues" ObjectType="{x:Type sys:Enum}">
         <ObjectDataProvider.MethodParameters>
            <x:Type TypeName="ctl:TextRenderingMode"/>
         </ObjectDataProvider.MethodParameters>
      </ObjectDataProvider>
   </Page.Resources>
   <StackPanel>
   <StackPanel Orientation="Horizontal" Margin="5">
   <TextBlock Text="Text Formatting Mode" VerticalAlignment="Center" Margin="5"/>
      <ComboBox
         x:Name="cmbFormattingMode"
         DataContext="{StaticResource formattingMode}"
         ItemsSource="{Binding}"
         SelectedIndex="0"/>
         </StackPanel>
         <StackPanel Orientation="Horizontal" Margin="5">
         <TextBlock Text="Text Rendering Mode" VerticalAlignment="Center" Margin="5"/>
      <ComboBox
         x:Name="cmbRenderingMode"
         DataContext="{StaticResource aliasingMode}"
         ItemsSource="{Binding}"
         SelectedIndex="0"/>
         </StackPanel>
      <TextBlock TextOptions.TextFormattingMode="{Binding ElementName=cmbFormattingMode,Path=SelectedItem}" TextOptions.TextRenderingMode="{Binding ElementName=cmbRenderingMode,Path=SelectedItem}" TextWrapping="Wrap">

        The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
        The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
        The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
        The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
        The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
      </TextBlock>
   </StackPanel>
</Page>

I’ve been displaying those in XamlPadX which I downloaded and tried to move to run on .NET 4.0 by hacking the config file for it to specify a 4.0 beta 2 runtime as in; 

   <startup>
      <supportedRuntime version="v4.0.21006"/>
   </startup>

which seemed to work out fine and then the example above displays in XamlPadX as;

image

and lets you experiment with the various options.

Another new option for developers in WPF 4 is the option to use layout rounding which is closer to the Silverlight layout system ( pixels represented in whole numbers ) rather than the WPF system ( sub-pixel rendering ). Again, you can read more of the detail around this but I’d put together this eye-test like XAML file which lets me see a difference in the layout ( you might want to tweak the numbers to see if you can get a more pathological example );

<Page
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
   <Grid>
   	<Grid.RowDefinitions>
   		<RowDefinition Height="Auto"/>
   		<RowDefinition/>   		
   	</Grid.RowDefinitions>
   	<Grid.ColumnDefinitions>
   		<ColumnDefinition/>
   		<ColumnDefinition/>
   	</Grid.ColumnDefinitions>
   	<StackPanel Margin="5" Orientation="Horizontal" Grid.ColumnSpan="2">
   		<TextBlock Text="Use Layout Rounding" VerticalAlignment="Center" Margin="5"/>
   		<ComboBox Margin="5" SelectedIndex="1" x:Name="cmbUseRounding">
   			<ComboBox.Items>
   				<x:Boolean>True</x:Boolean>
   				<x:Boolean>False</x:Boolean>
   			</ComboBox.Items>
   		</ComboBox>   		
   	</StackPanel>
   	<Grid Grid.Row="1" Background="Lime" UseLayoutRounding="{Binding ElementName=cmbUseRounding,Path=SelectedValue}">
   	<Viewbox>
   	<Grid>
   	<Ellipse Stroke="Black" StrokeThickness="7.98" Width="50.111" Height="50.333"/>
   		<Ellipse Stroke="Black" StrokeThickness="7.98" Width="100.111" Height="100.333"/>
   		<Ellipse Stroke="Black" StrokeThickness="7.98" Width="150.111" Height="150.333"/>
   		</Grid>
   		</Viewbox>
   	</Grid>
   	<Grid Grid.Row="1" Grid.Column="1" Background="Red" UseLayoutRounding="{Binding ElementName=cmbUseRounding,Path=SelectedValue}">
   	<Viewbox>
   	<Grid>
   	   	<Ellipse Stroke="Black" StrokeThickness="7" Width="50.111" Height="50.111"/>
   		<Ellipse Stroke="Black" StrokeThickness="7" Width="100.111" Height="100.111"/>
   		<Ellipse Stroke="Black" StrokeThickness="7" Width="150.111" Height="150.111"/>
   		</Grid>
</Viewbox>
   	</Grid>
   </Grid>
</Page>

and, that looks like an eye-test;

image

I’ll leave you to decide whether the circles look “clearer and more defined” on the green background or the red background but WPF 4 looks to put all kinds of new switches into the hands of the developer for ultimate tweaking 🙂