0

現在、MatrixTransform にバインドされている Border があります。マウス ホイールをスクロールすると、基本的に MatrixTransform がスケーリングされます。境界線の内側には、水平方向と垂直方向の中央に配置された Rectangle があります。Border 変換がスケーリングされるときに、Rectangle の変換が Border の Inverse と等しくなるように設定します。アイデアは、長方形を同じサイズで中央に保つことです。私の現在の解決策では、長方形を同じサイズに保ちますが、ズームを続けると徐々に中心から離れていきます。Rectangle 変換が Border 変換を認識していないように見えますが、それは理にかなっていますか?

ここにいくつかの画像があります。1 つ目は最初の画像、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));
        }
    }
}

この長方形を中心から移動させる何か間違ったことをしていますか? どんな助けでも大歓迎です！

更新 好奇心から、四角形の周りに境界線をラップし、幅と高さで要素から要素へのバインディングを行いました。下の画像を見ると、長方形の変換の原点が左上にあるように見えますが、これは意味がありますか?

新しい 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>

結果の画像: 代替テキスト

4

1 に答える 1

0

私はこれを理解しました。長方形の RenderTransformOrigin を中央に設定する必要がありました。

<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>

于 2010-12-14T17:50:25.513 に答える