没什么好说的，还是copycat

不过，有一点，当给attachproperty时候，可以用setproperty.

在学习http://msdn.microsoft.com/en-us/library/ms771766.aspx 这个例子的时候，遇到了这样的问题。想通了以后就很简单，但是还是让我抓耳挠腮了很久时间。呵呵。

问题是这样的，我想用DependencyPropety来描绘这个控件，如果这个Property变化的话，就重新UpateLayout. 实现非常简单：

1. 注册DependecnyProperty

代码如下：

代码

1         public Size PuzzleSize
2         {
3             get { return (Size)this.GetValue(PuzzleSizeProperty); }
4             set { this.SetValue(PuzzleSizeProperty, value); }
5         }
6         public static readonly DependencyProperty PuzzleSizeProperty = DependencyProperty.Register(
7           "PuzzleSize", typeof(Size), typeof(PuzzleControl),
8           new FrameworkPropertyMetadata(new PropertyChangedCallback(OnPuzzleSizeChangedCallback)));

1. 注册事件处理信息

代码

      private static void OnPuzzleSizeChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            RoutedEventArgs newargs = new RoutedEventArgs(SizeChangedEvent);
            (d as FrameworkElement).RaiseEvent(newargs);
        }

        private void OnPuzzelEventChanged(object sender, RoutedEventArgs e)
        {
            ConstructLayout();
        }

问题是，在ConstructLayout的时候，必须要动态的生成一些VisualElments,然后这些VisualElment可以Apply固定的Style,并且把这些Style服之。

这个需求看起来十分的普通。但是却纠缠了我很久...

因为在这样的机制下，VisualElment Tempalte里面的VisualTree,永远是空的。

那么好吧，我换一个地方，例如Loaded事件。发现还是不行。到后来用了法宝ApplyTemplate才把这一关给绕过去。查了一些解释， 例如，http://blogs.msdn.com/silverlight_sdk/archive/2008/10/24/loaded-event-timing-in-silverlight.aspx 和http://blogs.msdn.com/devdave/archive/2008/10/11/control-lifecycle.aspx

里面提到，In the Measure pass of layout. The Template property will be applied if the control has no visual tree. The control starts life with no visual tree, and the visual tree will be cleared when the Template property is set. You can also call ApplyTemplate yourself.

http://msdn.microsoft.com/en-us/magazine/dd188700.aspx

I am learning this article. What I am thinking is to write something similar to Magnify in this sample.

For example, if user want to add a magnify to a control, it will add a mirror control to its root node. This mirror control will take a snapshot of current screen, and then use clip, transform to magnify  the control. It sounds workable, isn’t it?

I have encountered following issues when implementing this:

1.      I am using Canvas to adjust its layout.  But after setting its scale, the position is not correct any more

2.      I am using RenderTargetBitmap. However, it is disable in Silverlight.

I write a similar one in WPF. If any one who has any other idea to zoom the selected area, please let me know.

Write a Zoom control

Code
<UserControl x:Class="WpfApplication1.MagnifyControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="300" Width="300">
    <Grid>
        <Grid x:Name="LayoutRoot" >
           <Canvas x:Name="ZoomCanvas" Visibility="Collapsed" >
                <Canvas.RenderTransform>
                    <ScaleTransform CenterX="0" CenterY="0" ScaleX="4" ScaleY="4"/>
                </Canvas.RenderTransform>
                <Canvas.Clip>
                    <EllipseGeometry x:Name="Lens" Center="0,0" RadiusX="40" RadiusY="40" />
                </Canvas.Clip>
                <Canvas Canvas.Left="0" Canvas.Top="0" >
                    <Image x:Name="MirrorImage"   Canvas.Left="0" Canvas.Top="0"  />
                </Canvas>
                <Path Canvas.Left="0" Canvas.Top="0" Stroke="#808080" StrokeThickness="1">
                    <Path.Data>
                        <EllipseGeometry x:Name="LensBorder" Center="0,0" RadiusX="40" RadiusY="40" />
                    </Path.Data>
                </Path>
            </Canvas>
        </Grid>
    </Grid>
</UserControl>

Second, adding event handler

Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for MagnifyControl.xaml
    /// </summary>
    public partial class MagnifyControl : UserControl
    {
        private bool _dragging = false;
        private const double _scale = 4.0;

        Canvas _parentCanvas = null;
        Canvas _mirrorCanvas = null;
        Grid      _topGrid = null;

        public MagnifyControl()
        {
            InitializeComponent();
        }

        public void WireUp(Canvas parent, Canvas mirror, Grid topGrid)
        {
            _parentCanvas = parent;
            _mirrorCanvas = mirror;
            _topGrid = topGrid;

            parent.Children.Add(this);
            _mirrorCanvas.MouseLeftButtonDown += OnMouseLeftButtonDown;
            _mirrorCanvas.MouseLeftButtonUp += OnMouseLeftButtonUp;
            _mirrorCanvas.MouseMove += OnMouseMove;
 
        }

        private void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {

            //get the size of the printer page
            RenderTargetBitmap bmp = new RenderTargetBitmap(Convert.ToInt16(_parentCanvas.ActualWidth), Convert.ToInt16(_parentCanvas.ActualHeight),
                                                         120, 96, PixelFormats.Pbgra32);
            bmp.Render(_mirrorCanvas);
            MirrorImage.Source = bmp;
            double x = e.GetPosition(_parentCanvas).X;
            double y = e.GetPosition(_parentCanvas).Y;
            PositionLens(x, y);

            ZoomCanvas.Visibility = Visibility.Visible;
            ((FrameworkElement)sender).CaptureMouse();
            _dragging = true;
        }

        private void OnMouseMove(object sender, MouseEventArgs e)
        {
            if (_dragging)
            {
                double x = e.GetPosition(_mirrorCanvas).X;
                double y = e.GetPosition(_mirrorCanvas).Y;
                PositionLens(x, y);
            }
        }

        private void OnMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (_dragging)
            {
                ZoomCanvas.Visibility = Visibility.Collapsed;
                ((FrameworkElement)sender).ReleaseMouseCapture();
                _dragging = false;
            }
        }

        private void PositionLens(double x, double y)
        {
            Lens.Center = LensBorder.Center = new Point(x, y);
            this.SetValue(Canvas.LeftProperty, (1 - _scale) * x);
            this.SetValue(Canvas.TopProperty, (1 - _scale) * y);

        }
    }
}

Sample to use this control:

Efficient way to use Data Templates: http://msdn.microsoft.com/en-us/magazine/dd483292.aspx

Background introduction:

Let’s have a look at what WPF have done in and after  this sample code: <control>.SetDataContext(<DataSource>)

First, this control will receive a PropretyChanged event, and then for each element in <datasource>, it will create a content present, and the ContentTemplate property is set. After all, this contentpresent is added to the control That’s all it has done in set data context.

The panel’s MeasureOverride method calls the measure method of each of its ContentPresenter children. If the ContentPresenter child has not yet created a visual tree to display its content, it must now do so. The content Presenter create this visual tree based on the template stored in its ContentTemplate property. The ContentPresenter must also set up the data binding between the properties of the element in the visual tree and the properties stored in its Contents property. The contentPresenter then calls the Measure method of the root element of the visual tree.

1.      Watch out Freezable Objects:

A children change will cause the entire object changes.

note that you should freeze any freezable object that will no longer be altered.

2.      Use ValueConverter

Data bindings can optionally reference little classes called value converters, which implement either the IValueConverter or IMultiValueConverter interface. Methods in the value converters named Convert and ConvertBack perform data conversion between the binding source and destination.

Normally, I would expect the converters to improve performance. I'm not sure why that's not the case here, but I wouldn't be surprised if it were a boxing and unboxing issue. In the DoublesToPointConverter, for example, the incoming double values have to be boxed and unboxed, and the outgoing Point has to be boxed and unboxed

3.      An intermediate presenter(To reduce the binding counts?

4.       Reduce elements:

Fast rendering slow response to change.

5.      Visual drawing

DrawingVisual is a lightweight drawing class that is used to render shapes, images, or text. This class is considered lightweight because it does not provide layout, input, focus, or event handling, which improves its performance. For this reason, drawings are ideal for backgrounds and clip art.

In order to use DrawingVisual objects, you need to create a host container for the objects. The host container object must be derived from the FrameworkElement class, which provides the layout and event handling support that the DrawingVisual class does not support. The host container object does not display any visual properties, since its main purpose is to contain child objects. For more information, see Using DrawingVisual Objects.