0
私は現在、MatrixTransformにバインドされているボーダーを持っています。マウスホイールをスクロールすると、MatrixTransformを基本的に拡大/縮小します。境界線の内側には、水平方向と垂直方向の中央にある長方形があります。ボーダー変換がスケーリングされるとき、私はRectangleの変換をボーダーの逆変換と等しく設定します。矩形は同じサイズと中心に維持されます。現在のソリューションでは、長方形のサイズは同じに保たれますが、ズームを続けると徐々に中心から遠ざかります。これは、Rectangle変換がBorder変換を認識していないかのようですが、それは意味がありますか？MatrixTransformの動作内のMatrixTransformは、私が期待していたものではありません
ここにいくつかの画像があります。最初の画像は最初の画像で、2番目の画像は数回ズームした後です（矩形は同じサイズのままですが、もはや中央にはなりません）。
私が解決しようとしている基本的な考え方は、都市名のサイズは同じまま、あなたが拡大すると、Googleマップアプリケーションのようなものです。
ここであなたが欲しい場合には、これを引き出し、それを実行することができるはず私のコードのすべて、です：
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));
}
}
}
この四角形が中央から移動するように間違っていますか？どんな助けでも大歓迎です！好奇心のうち
UPDATE 、私は長方形の周囲に境界線を包み、幅&高さに結合要素に要素をしました。下の画像では、四角形の変形が左上に原点があるように見えますが、これは意味がありますか？
新しい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>
得られる画像は：