Tuesday, September 25, 2007

Implementing Microsoft Office 2007 style zooming in WPF

This is a small code snippet which describes about implementing zooming action which is there in most of the components (MS Word 2007 etc) of Office 2007 package.

Basic idea is to put our content in a container and apply scale transform through LayoutTransform based on a slider value.

<Window x:Class="UntitledProject3.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="UntitledProject3" Height="300" Width="300"
>
<StackPanel>
<ScrollViewer Height="100" x:Name="scrl" HorizontalScrollBarVisibility="Auto" Background="{x:Null}" >
<TextBlock Height="19" Margin="0,0,0,0" x:Name="label1" Text ="This is our content">
<TextBlock.LayoutTransform>
<TransformGroup>
<ScaleTransform ScaleX="{Binding Path=Value, ElementName=Slider, Mode=Default}"
ScaleY="{Binding Path=Value, ElementName=Slider, Mode=Default}"/>
</TransformGroup>
</TextBlock.LayoutTransform>
</TextBlock>
</ScrollViewer>
<Slider Value="1" Minimum="1" Maximum="10" x:Name="Slider" />
</StackPanel>
</Window>

Monday, September 24, 2007

More WPF custom control design time experience in Expression blend

Custom category editors
This is a continuation to my older post which described about custom property editors in blend.This post mainly discuss about creating a custom category editor and putting properties into that.
Here I am using more design specific mechanism with separate design time dlls, which was introduced with WPF technology.It helps us to keep our design time code in a separate dll which is suffixed with <assemblyname>.design.dll.You can get more information about the linking process between Control dll and design dll from here .
.


We are going to create a category named MyCategory like this

Steps

  1. Create metadata file in the design assembly ie in <customasembly>.design.dll
  2. Put the desired property into appropriate category using the category attribute.This is same as of Windows forms
  3. Create category editor and set its datatemplate.
  4. Use the editor attribute to associate this category editor into the custom control
  5. Open the solution in Blend.You can see your category editor

The new category with full customization

Some points to consider

  • Make sure that the design dll and application(which is using our custom control) is refering the same custom control assembly dll.Otherwise this wont get opened in blend.

For more details refer the sample here