缩放子元素的位置，但不缩放其大小? [英] Scale the position of child elements, but not their size?

问题描述

我正在实现应用程序中的行为，该行为将根据屏幕大小来调整主要内容区域的大小.(内容区域由图标和用户可以放置/绘制的其他元素组成)

I am implementing behavior in my application that will resize the main content area depending on the screen size. (The content area is made up of icons and other elements that the user can place/draw)

当前，margin属性用于使用将 Point 转换为 Thickness 的转换器的元素定位.

Currently, the margin property is used to position elements using a converter that converts a Point to Thickness.

示例:

我需要将子元素位置缩放"到容器的大小.元素的位置是所有需要缩放的元素，不是大小.

I need to "scale" the child elements position to the size of the container. The position of the elements is all that needs to be scaled, not the size.

如何将变换( RenderTransform 或 LayoutTransform )应用于网格的所有 child 元素，以便图标位置可以缩放网格大小确定正确的位置?

How can I apply a transform (RenderTransform or LayoutTransform) to all child elements of a grid, so that the icon positions will scale to the correct position depending on the grid size?

还应注意，在应用程序运行时，可能会删除/添加这些图标.

It should also be noted that these icons may be removed/added while the application is running.

推荐答案

我之前已经做过，建议您这样做:

I have already done this before, and I would suggest you to do this:

1. 在元素类(例如， Circle )中，您有某种坐标表示容器的位置，成比例与容器的大小成比例.因此， 0.5 代表中间， 0.33 代表左边的三分之一，依此类推.
2. 创建一个 IMultiValueConverter 根据相对坐标和容器尺寸沿给定尺寸计算像素坐标；
3. 通过以下方式在XAML中声明其对象的边距(对于Grid容器)或Canvas.Top/Left(对于Canvas容器):

1. In your element class (say, Circle), you have some sort of coordinate representing their position, proportionally to the size of the container. So, 0.5 would represent the middle, 0.33 would represent one third to the left, etc.
2. Create an IMultiValueConverter that calculates the pixel coordinate based on the relative coordinate and the container size along a given dimension;
3. Declare your object in XAML with its margins (in case of a Grid container) or Canvas.Top/Left (in case of a Canvas container) in the following way:

Xaml:

<Circle>
    <Circle.Margin>
        <MultiBinding Converter="{StaticResource ThatConverter}">
            <Binding ElementName="container" Path="ActualWidth"/>
            <Binding Path="CircleCoordinateX"/>
            <!-- The same for height and Y coordinate -->
        </MultiBinding>
    </Circle.Margin>
</Circle>

代替这种更为简单的方法，理想情况下，您应该使容器成为 ItemsControl ，为数据类型 Circle 创建 ItemsTemplate ，并例如，将容器 ItemsSource 绑定到某些视图模型上的某些ObservableCollection.

Instead of this more simplistic approach, ideally you should make your container to be an ItemsControl, create an ItemsTemplate for datatype Circle, and bind the container ItemsSource to some ObservableCollection on some viewmodel, for example.

这篇关于缩放子元素的位置，但不缩放其大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！