Question

我希望将元素放在Canvas（在我的情况下是几个图形和文本元素）上，然后将这些元素的位置转换为Transform，但< strong>不转换元素本身。需要动态更改Transform，例如调整大小或更改旋转角度。我不想触及元素，只触及我绑定的变换。

我现在拥有的：

<UserControl x:Class="IDEAUserInterfaces.StationaryUI.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <TranslateTransform x:Key="translate" X="10" Y="10"/>
        <ScaleTransform x:Key="scale" ScaleX="0.8" ScaleY="1.3"/>
        <RotateTransform x:Key="rotate" Angle="30"/>
        <TransformGroup x:Key="group">
            <StaticResource ResourceKey="translate"/>
            <StaticResource ResourceKey="scale"/>
            <StaticResource ResourceKey="rotate"/>
        </TransformGroup>
    </UserControl.Resources>
    <Grid>
        <Canvas Width="100" Height="100">
            <Canvas Name="elementCanvas" Canvas.Top="15" Canvas.Left="20">
                <Path Stroke="Green" StrokeThickness="1">
                    <Path.Data>
                        <EllipseGeometry RadiusX="5" RadiusY="5" Center="0,0" Transform="{Binding StaticResource group}"/>
                    </Path.Data>
                </Path>
                <TextBlock Text="Text" Canvas.Left="10" FontSize="10"/>
            </Canvas>
        </Canvas>
    </Grid>
</UserControl>

显然， elementCanvas 的位置设置了包含的图形和文本的位置。在Transform上设置EllipseGeometry会转换整个几何体。我发现无法在XAML中转换Point，例如EllipseGeomtry的Center - 属性。这仍然不会改变TextBlock的位置。

我认为转换Canvas.Top和Canvas.Left已经足够了，但这怎么可能呢？

Answer 1

如果您不想{@ 1}} UI元素，请不要在其上使用任何类型的Transform个对象。如果数据绑定Transform上元素的位置，那么您只需更新相关元素的相关属性，它们就会相应移动：

Canvas

然后更新他们的位置，你可以这样做：

<Style x:Key="ElementStyle">
    <Setter Property="Canvas.Left" Value="{Binding Left}" />
    <Setter Property="Canvas.Top" Value="{Binding Top}" />
</Style>

<ItemsControl ItemsSource="{Binding YourElements}"
    ItemsContainerStyle="{StaticResource ElementStyle}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

要明确，您必须在数据类中声明代表您的UI元素的element.Left = newPosition.X; element.Top = newPosition.Y;和Left proeprty。您可以阅读MSDN上的Data Binding Overview页面，了解有关数据绑定的更多信息。

Answer 2

我使用了通用解决方案，这让我可以在Canvases上使用Transforms定位元素：

MultiBinding。

我创建了两个Multibinding类，它们采用Transform和坐标（对于平移，缩放和剪切，它只需要一个坐标，但对于旋转，它需要X和Y）并返回由Transform转换的坐标。所以我计算了两个Multibindings中的两个坐标。

对于Points我有第三个Multibinding转换器返回转换后的Points。

在XAML中需要一些代码，但代码隐藏中没有特定的代码，而Canvas的缩放就像魅力一样。

XAML：转换面板上的位置而不转换元素

2 个答案: