Re: Zoom on Grid Control

05-20-2009 6:13 AM |

Hi Alessio,

We can add a Slide to your application. When slide it, its Slider_ValueChanged event will be fired.  Now we can change its width and height property.  This is a way for Grid.  Below I will show you a sample, which uses animation and brings better user experience.   We can also add the animation to DataGrid.

<UserControl x:Class="GridZoom.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="800" Height="600">
    <UserControl.Resources>
        <Storyboard x:Name="sbScale">
            <DoubleAnimation x:Name="aniScaleX" Storyboard.TargetName="innerGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" To="0"/>
            <DoubleAnimation x:Name="aniScaleY" Storyboard.TargetName="innerGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" To="0"/>
        </Storyboard>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel Orientation="Vertical">
            <Grid x:Name="innerGrid" Background="Azure" Width="300" Height="300">
                <Grid.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform x:Name="scale"/>
                    </TransformGroup>
                </Grid.RenderTransform>
            </Grid>
            <Slider Maximum="2" Minimum="0.25" Value="1" ValueChanged="Slider_ValueChanged"></Slider>
        </StackPanel>
        
    </Grid>
</UserControl>

  

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace GridZoom
{
    public partial class MainPage : UserControl
    {
        private bool isLoaded = false;
        public MainPage()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            isLoaded = true;
        }

        private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            if (isLoaded)
            {
                this.aniScaleX.To = e.NewValue;
                this.aniScaleY.To = e.NewValue;
                this.sbScale.Begin();
            }
        }
    }
}

Best regards,

Jonathan