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">
       <StackPanel.LayoutTransform>
          <ScaleTransform
             ScaleX="{Binding Path=Value, ElementName=ZoomSlider}"
             ScaleY="{Binding Path=Value, ElementName=ZoomSlider}" />
       </StackPanel.LayoutTransform>
    </StackPanel>
</ItemsPanelTemplate>

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"
   Minimum="0.25"
   Value="1"
   Maximum="5"
   SmallChange="0.5"
   LargeChange="1.0" />
<ListBox ItemsPanel="{DynamicResource ZoomedItemsPanel}" />

Wasn't that easy?