Wpf DataGrid zoom In/Out

Question

I am using wpf data grid which has template columns.

i just want to give facility of zoom in/out to users.

any way to achieve this?

Answer 1

You can apply a scale transform on the element that you want to zoom.

For instance, I have an image inside a Border control, and to zoom in/out, I use something like the following:

<Slider x:Name="MySlider"
        Minimum="0.25"
        Maximum="2.0"
        SmallChange="0.25"
        LargeChange="0.5"
        Value="1.0" />

<Border>
    <Border.LayoutTransform>
        <ScaleTransform ScaleX="{Binding ElementName=MySlider, Path=Value}"
                        ScaleY="{Binding ElementName=MySlider, Path=Value}" />
    </Border.LayoutTransform>
    <Image ... />
</Border>

In my case, I actually bind the values to MVVM properties, but the above example should work. The ScaleTransform is based on the value of the slider, and scales both the X and Y direction equally. The slider allows the scaling to be from one quarter (0.25) of the original size to twice (2.0) the original size, with the original scaling set to the original size (1.0).

Answer 2

Below sample uses a slider to control zooming of a textblock.

<Window x:Class="ZoomTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Slider Grid.Row="0" Name="_zoom" Minimum="1" Maximum="100" />
        <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
            <Grid>
                <TextBlock Text="DataGrid" Background="Red"/>
                <Grid.LayoutTransform>
                    <ScaleTransform ScaleX="{Binding Path=Value, ElementName=_zoom}" ScaleY="{Binding Path=Value, ElementName=_zoom}" />
                </Grid.LayoutTransform>
            </Grid>
        </ScrollViewer>
    </Grid>
</Window>