Tutorial :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?


Solution:1

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>  


Solution:2

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).


Solution:3

This is an old, answered question, but the XAML solutions above lead me to what I needed for my project. Sharing.

For programmatic control outside the DataGrid XAML, the following code works:

dataGrid.LayoutTransform = New Windows.Media.ScaleTransform(ZoomLevelX, ZoomLevelY)  

Where ZoomLevelX and ZoomLevelY are floating point values. For my project, the zoom level is the same in both the X and Y coordinates, so I just used one variable for both parameters. Also, my project was restricted to the following zoom factors: 20%, 50%, 70%, 80%, 100%, 150%, 200%, 300%.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »