Monday, April 7, 2008

Zooming Objects Inside a WPF ItemsControl

Previously I've shown how to zoom objects in WPF using either an attached property or directly binding a LayoutTransform. If you'd like to zoom objects inside of an ItemsControl, you can use a slight variation on the direct binding strategy.

First you should style the ItemsPanel template for your ItemsControl, in this case a ListBox.
<ItemsPanelTemplate x:Key="ZoomedItemsPanel">
<StackPanel IsItemsHost="True">
ScaleX="{Binding Path=Value, ElementName=ZoomSlider}"
ScaleY="{Binding Path=Value, ElementName=ZoomSlider}" />

Then your ListBox can reference the ZoomedItemsPanel and enjoy zooming on just its contents!
<Label Content="Zoom: "
Target="{Binding ElementName=ZoomSlider}" />
<Slider x:Name="ZoomSlider"
LargeChange="1.0" />
<ListBox ItemsPanel="{DynamicResource ZoomedItemsPanel}" />

Wasn't that easy?

1 comment:

Anand said...

Thank you for the code, used it and achieved the desired effect. However I can't select any of the listbox items and the vertical scroll bar, although it shows seems to be disabled as well.
Please can you help.

Best Regards