Win10 uwp use ScaleTransform magnify an element

本文告诉大家如何通过 ScaleTransform 放大元素 Zoom in an element method has many a,通过 ScaleTransform Amplification is halal

在 UWP 中 ScaleTransform 是属于 RenderTransform 的内容,所有的 UIElement 都有 RenderTransform 属性,By setting this attribute can be done at run time to modify the rendering elements

As a new simple UWP 程序,Put a button inside

        <Button VerticalAlignment="Center" HorizontalAlignment="Center" Content="Click" Click="Button_OnClick">
        </Button>

复制

If you want to amplify the button shows two times,简单的方法是使用 ScaleTransform Set two directions amplification

修改一下代码

            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
                <Button Margin="10,10,10,10" Content="Enlarge button before">

                </Button>
                <Button VerticalAlignment="Center" HorizontalAlignment="Center" Content="放大的按钮">
                    <Button.RenderTransform>
                        <ScaleTransform x:Name="ScaleTransform" ScaleX="2" ScaleY="2"></ScaleTransform>
                    </Button.RenderTransform>
                </Button>
            </StackPanel>

复制

代码请看 github

从上面看到 ScaleTransform Support the two directions of larger,Can set two directions to different values

其实 ScaleTransform Can also set the zoom center,From that point as the center amplification

The default is not set from (0,0) The point is the upper left corner of the PM amplification,After amplification will keep unchanged the coordinates of the upper left corner

Most of the time will be used to enlarge from center,Enlarge the center of the need to set the zoom element from the center,请看代码,When click on the button to zoom in,Center is the center button

<Button VerticalAlignment="Center" HorizontalAlignment="Center" Content="放大的按钮" Click="Button_OnClick">
    <Button.RenderTransform>
        <ScaleTransform x:Name="ScaleTransform" ScaleX="1" ScaleY="1"></ScaleTransform>
    </Button.RenderTransform>
</Button>

复制

        private void Button_OnClick(object sender, RoutedEventArgs e)
        {
            var button = (Button) sender;
            ScaleTransform.CenterX = button.ActualWidth / 2;
            ScaleTransform.CenterY = button.ActualHeight / 2;

            ScaleTransform.ScaleX = 1.5;
            ScaleTransform.ScaleY = 1.5;
        }

复制

Don't set to contrast the enlarge from the top left corner

        private void Button_OnClick(object sender, RoutedEventArgs e)
        {
            ScaleTransform.ScaleX = 1.5;
            ScaleTransform.ScaleY = 1.5;
        }

复制

Then how to do scaling,

I use a little advantage under the method to do animation,Friend, please don't learn the writing

        private void Button_OnClick(object sender, RoutedEventArgs e)
        {
            Task.Run(async () =>
            {
                while (true)
                {
                    await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
                    {
                        ScaleTransform.ScaleX++;
                        ScaleTransform.ScaleY++;
                    });

                    await Task.Delay(100);
                }
            });
        }

复制

I open a thread,Use an infinite loop,在里面使用 Task.Delay 做延迟

因为在 UWP Is not the main thread is unable to access the main thread element,所以就需要通过 Dispatcher.RunAsync Make the code in the main thread running

So a little halal method is how to do it？通过 xaml Write animation is a good method

                <Button VerticalAlignment="Center" HorizontalAlignment="Center" Content="放大的按钮" Click="Button_OnClick">
                    <Button.Resources>
                        <Storyboard x:Key="Storyboard">
                            <DoubleAnimation Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleX" To="1.5" Duration="0:0:1"></DoubleAnimation>
                            <DoubleAnimation Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleY" To="1.5" Duration="0:0:1"></DoubleAnimation>
                        </Storyboard>
                    </Button.Resources>
                    <Button.RenderTransform>
                        <ScaleTransform x:Name="ScaleTransform" ScaleX="1" ScaleY="1"></ScaleTransform>
                    </Button.RenderTransform>
                </Button>

复制

At this time by clicking on the button to get the resources,运行动画

        private void Button_OnClick(object sender, RoutedEventArgs e)
        {
            var button = (Button) sender;

            var storyboard = (Storyboard) button.Resources["Storyboard"];

            storyboard.Begin();
        }

复制