MatrixTransform innerhalb von MatrixTransform Verhalten ist nicht das, was ich erwartet habe

Question

Ich habe derzeit einen Rahmen, der an eine MatrixTransform gebunden ist. Beim Scrollen mit dem Mausrad wird die MatrixTransform skaliert. Innerhalb der Grenze habe ich ein Rechteck, das horizontal und vertikal zentriert ist. Zu dem Zeitpunkt, zu dem die Border-Transformation skaliert wird, setze ich die Transformation des Rectangle so, dass sie gleich der Inverse des Rands ist. Die Idee ist, das Rechteck gleich groß und in der Mitte zu halten. Meine aktuelle Lösung behält das Rechteck in der gleichen Größe, aber es bewegt sich allmählich von der Mitte weg, während Sie weiter zoomen. Es scheint, als ob die Rectangle-Transformation die Border-Transformation nicht kennt, macht das Sinn?

Hier sind ein paar Bilder, die erste ist initial, die zweite ist nach Zoomen ein paar Mal (beachten Sie, das Rechteck blieb die gleiche Größe, aber es ist nicht mehr zentriert).

Die Grundidee, die ich ist wie ein Google Maps-Anwendung zu lösen bin versucht, wenn Sie die Ansicht vergrößern, der Name der Stadt Größe gleich bleibt.

hier alle meine Code, sollten Sie in der Lage sein, dies in zu ziehen, und es laufen, wenn Sie möchten:

MainPage.xaml

<UserControl x:Class="InvertedZoomTest.MainPage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
xmlns:local="clr-namespace:InvertedZoomTest" 
mc:Ignorable="d"> 

<UserControl.DataContext> 
    <local:MainPage_ViewModel/> 
</UserControl.DataContext> 

<Border BorderBrush="Pink" Background="Gray" VerticalAlignment="Center" HorizontalAlignment="Center" BorderThickness="2" MouseWheel="Border_MouseWheel" Height="100" Width="100" RenderTransform="{Binding MainTransform}"> 
    <Rectangle x:Name="rectangle" Canvas.Top="43" Canvas.Left="43" Fill="Red" Height="10" Width="10" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransform="{Binding TextTransform}"/> 
</Border> 

MainPage.xaml.cs

public partial class MainPage : UserControl 
{ 
    public MainPage() 
    { 
     InitializeComponent(); 
    } 

    private MainPage_ViewModel viewModel 
    { 
     get 
     { 
      return this.DataContext as MainPage_ViewModel; 
     } 
    } 

    private void Border_MouseWheel(object sender, MouseWheelEventArgs e) 
    { 
     if (e.Delta > 0) 
     { 
      this.viewModel.ZoomRatio += .1; 
     } 
     else 
     { 
      this.viewModel.ZoomRatio -= .1; 
     } 

     this.viewModel.UpdateTextScale(); 
    } 
} 

MainPage_ViewModel.cs

public class MainPage_ViewModel : INotifyPropertyChanged 
{ 
    public MatrixTransform TextTransform 
    { 
     get { return _textTransform; } 
     set 
     { 
      if (value != _textTransform) 
      { 
       _textTransform = value; 
       OnPropertyChanged("TextTransform"); 
      } 
     } 
    } 
    private MatrixTransform _textTransform = new MatrixTransform(); 

    public MatrixTransform MainTransform 
    { 
     get 
     { 
      return _mainTransform; 
     } 
     set 
     { 
      if (value != _mainTransform) 
      { 
       _mainTransform = value; 
       OnPropertyChanged("MainTransform"); 
      } 
     } 
    } 
    private MatrixTransform _mainTransform = new MatrixTransform(); 

    public void UpdateTextScale() 
    { 
     var scaleX = (double)(ZoomRatio); 
     var scaleY = (double)(ZoomRatio); 

     Matrix updatedMainTransformMatrix = new Matrix(scaleX, 0, 0, scaleY, 0, 0); 
     this.MainTransform.Matrix = updatedMainTransformMatrix; 
     OnPropertyChanged("MainTransform"); 

     this.TextTransform = MainTransform.Inverse as MatrixTransform; 
     OnPropertyChanged("TextTransform"); 
    } 

    public double ZoomRatio 
    { 
     get 
     { 
      return zoomRatio; 
     } 
     set 
     { 
      zoomRatio = value; 
      OnPropertyChanged("ZoomRatio"); 

      UpdateTextScale(); 
     } 
    } 
    private double zoomRatio = 1; 


    public event PropertyChangedEventHandler PropertyChanged; 

    public void OnPropertyChanged(string propertyName) 
    { 
     if (PropertyChanged != null) 
     { 
      PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 
     } 
    } 
} 

Mache ich etwas falsch, das würde dieses Rechteck von der Mitte bewegen? Jede Hilfe würde sehr geschätzt werden!

UPDATE Aus curiousity, gewickelt I einen Rahmen um das Rechteck und habe von der Breite um ein Element zu Element-Bindungs ​​& Höhe. Sie werden auf dem Bild unten bemerken, dass die Transformation auf dem Rechteck oben links einen Ursprung hat, macht das Sinn?

New XAML:

<Border BorderBrush="Pink" Background="Gray" VerticalAlignment="Center" HorizontalAlignment="Center" BorderThickness="2" MouseWheel="Border_MouseWheel" Height="100" Width="100" RenderTransform="{Binding MainTransform}"> 
    <Border BorderBrush="Green" BorderThickness="1" Height="{Binding ElementName=rectangle, Path=Height}" Width="{Binding ElementName=rectangle, Path=Width}"> 
     <Rectangle x:Name="rectangle" Canvas.Top="43" Canvas.Left="43" Fill="Red" Height="10" Width="10" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransform="{Binding TextTransform}"/> 
    </Border> 
</Border> 

resultierende Bild:

Answer 1

Ich dachte, dies. Ich musste nur die RenderTransformOrigin meines Rechtecks ​​in die Mitte setzen.

<Border BorderBrush="Pink" Background="Gray" VerticalAlignment="Center" HorizontalAlignment="Center" BorderThickness="2" MouseWheel="Border_MouseWheel" Height="100" Width="100" RenderTransform="{Binding MainTransform}"> 
<Border BorderBrush="Green" BorderThickness="1" Height="{Binding ElementName=rectangle, Path=Height}" Width="{Binding ElementName=rectangle, Path=Width}"> 
    <Rectangle x:Name="rectangle" Canvas.Top="43" Canvas.Left="43" Fill="Red" Height="10" Width="10" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransform="{Binding TextTransform}" RenderTransformOrigin=".5,.5"/> 
</Border>