如何更改位于项控件上的用户控件位置?

huangapple go评论67阅读模式
英文:

How can I transform the location of a UserControl set on an Items Control?

问题

以下是代码部分的翻译:

UserControl 代码部分:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;

namespace CADViewer.User_Controls
{
    /// <summary>
    /// 与 SignificantPointControl.xaml 交互逻辑
    /// </summary>

    [Serializable]
    public partial class SignificantPointControl : System.Windows.Controls.UserControl, INotifyPropertyChanged
    {
        private Point dxfCenter;
        private Point mapPageCanvasCenter;
        private string color = "Red";

        public Double Size { get; set; } = 2;
        public Double Left { get; set; }
        public Double Top { get; set; }
        public Thickness Margin { get; set; }
        public String Color
        {
            get { return color; }
            set
            {
                color = value;
                OnPropertyChanged();
            }
        }
        public Point DxfCenter
        {
            get { return dxfCenter; }
            set
            {
                dxfCenter = value;
                OnPropertyChanged();
            }
        }
        public Point MapPageCanvasCenter
        {
            get { return mapPageCanvasCenter; }
            set
            {
                mapPageCanvasCenter = value;
                OnPropertyChanged();
            }
        }

        public SignificantPointControl()
        {
            DataContext = this;
            InitializeComponent();
            //DxfCenter = dxfCenter;
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string name = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }

        public void GetDxfCenter(Point dxfCenter)
        {
            DxfCenter = dxfCenter;
        }

        public void GetMapPageCanvasCenter(List<double> extents, double canvasWidth, double canvasHeight)
        {
            MapPageCanvasCenter = DXFToCanvas.DXFCoordToCanvas(DxfCenter, extents, canvasWidth, canvasHeight);
            Left = mapPageCanvasCenter.X - (Size / 2);
            Top = mapPageCanvasCenter.Y - (Size / 2);
            Margin = new Thickness(Left, Top, 0, 0);
        }
    }
}

UserControl XAML 部分:

<UserControl x:Class="CADViewer.User_Controls.SignificantPointControl"
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" 
xmlns:local="clr-namespace:CADViewer.User_Controls"
mc:Ignorable="d" 
d:DesignHeight="450" d:DesignWidth="800">
<Canvas x:Name="PointCanvas" Height="6" Width="6" Background="Transparent" Canvas.Left="{Binding MapPageCanvasCenter.X}" Canvas.Top="{Binding MapPageCanvasCenter.Y}">
<Ellipse Width="{Binding Size}" Height="{Binding Size}" Stroke="{Binding Color}" Canvas.Left="0" Canvas.Top="0"/>
</Canvas>
</UserControl>

ItemsControl 部分:

<ItemsControl x:Name="MapPageItemsControl"
Width="900" Height="500" MouseLeftButtonDown="MapPageItemsControl_MouseLeftButtonDown">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="Transparent" Width="900" Height="500"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type uc:SignificantPointControl}">
<uc:SignificantPointControl.RenderTransform>
<TranslateTransform X="{Binding Left}" Y="{Binding Top}"/>
</uc:SignificantPointControl.RenderTransform>
</uc:SignificantPointControl>
</DataTemplate>
</ItemsControl.Resources>
<ItemsControl.RenderTransform>
<MatrixTransform x:Name="transform"/>
</ItemsControl.RenderTransform>
</ItemsControl>

以上为您提供的代码的翻译。如果您有任何其他问题或需要进一步的帮助,请随时提出。

英文:

I've got an ItemsControl and I'm attempting to set a UserControl in a specific location on this particular ItemsControl. It is binding fine and is clearly on the ItemsControl but it is stuck at 0, 0. What am I missing here?

Here is the UserControl code behind:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;
namespace CADViewer.User_Controls
{
/// &lt;summary&gt;
/// Interaction logic for SignificantPointControl.xaml
/// &lt;/summary&gt;
[Serializable]
public partial class SignificantPointControl : System.Windows.Controls.UserControl, INotifyPropertyChanged
{
private Point dxfCenter;
private Point mapPageCanvasCenter;
private string color = &quot;Red&quot;;
public Double Size { get; set; } = 2;
public Double Left { get; set; }
public Double Top { get; set; }
public Thickness Margin { get; set; }
public String Color
{
get { return color; }
set
{
color = value;
OnPropertyChanged();
}
}
public Point DxfCenter
{
get { return dxfCenter; }
set
{
dxfCenter = value;
OnPropertyChanged();
}
}
public Point MapPageCanvasCenter
{
get { return mapPageCanvasCenter; }
set
{
mapPageCanvasCenter = value;
OnPropertyChanged();
}
}
public SignificantPointControl()
{
DataContext = this;
InitializeComponent();
//DxfCenter = dxfCenter;
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string name = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
public void GetDxfCenter(Point dxfCenter)
{
DxfCenter = dxfCenter;
}
public void GetMapPageCanvasCenter(List&lt;double&gt; extents, double canvasWidth, double canvasHeight)
{
MapPageCanvasCenter = DXFToCanvas.DXFCoordToCanvas(DxfCenter, extents, canvasWidth, canvasHeight);
Left = mapPageCanvasCenter.X - (Size / 2);
Top = mapPageCanvasCenter.Y - (Size / 2);
Margin = new Thickness(Left, Top, 0, 0);
}
}
}

Here is the UserControl XAML:

&lt;UserControl x:Class=&quot;CADViewer.User_Controls.SignificantPointControl&quot;
xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;
xmlns:mc=&quot;http://schemas.openxmlformats.org/markup-compatibility/2006&quot; 
xmlns:d=&quot;http://schemas.microsoft.com/expression/blend/2008&quot; 
xmlns:local=&quot;clr-namespace:CADViewer.User_Controls&quot;
mc:Ignorable=&quot;d&quot; 
d:DesignHeight=&quot;450&quot; d:DesignWidth=&quot;800&quot;&gt;
&lt;Canvas x:Name=&quot;PointCanvas&quot; Height=&quot;6&quot; Width=&quot;6&quot; Background=&quot;Transparent&quot; Canvas.Left=&quot;{Binding MapPageCanvasCenter.X}&quot; Canvas.Top=&quot;{Binding MapPageCanvasCenter.Y}&quot;&gt;
&lt;Ellipse Width=&quot;{Binding Size}&quot; Height=&quot;{Binding Size}&quot; Stroke=&quot;{Binding Color}&quot; Canvas.Left=&quot;0&quot; Canvas.Top=&quot;0&quot;/&gt;
&lt;/Canvas&gt;
&lt;/UserControl&gt;

And here is the ItemsControl:

&lt;ItemsControl x:Name=&quot;MapPageItemsControl&quot;
Width=&quot;900&quot; Height=&quot;500&quot; MouseLeftButtonDown=&quot;MapPageItemsControl_MouseLeftButtonDown&quot; &gt;
&lt;ItemsControl.ItemsPanel&gt;
&lt;ItemsPanelTemplate&gt;
&lt;Canvas Background=&quot;Transparent&quot; Width=&quot;900&quot; Height=&quot;500&quot;/&gt;
&lt;/ItemsPanelTemplate&gt;
&lt;/ItemsControl.ItemsPanel&gt;
&lt;ItemsControl.Resources&gt;
&lt;DataTemplate DataType=&quot;{x:Type uc:SignificantPointControl}&quot;&gt;
&lt;uc:SignificantPointControl.RenderTransform&gt;
&lt;TranslateTransform X=&quot;{Binding Left}&quot; Y=&quot;{Binding Top}&quot;/&gt;
&lt;/uc:SignificantPointControl.RenderTransform&gt;
&lt;/uc:SignificantPointControl&gt;
&lt;/DataTemplate&gt;
&lt;/ItemsControl.Resources&gt;
&lt;ItemsControl.RenderTransform&gt;
&lt;MatrixTransform x:Name=&quot;transform&quot;/&gt;
&lt;/ItemsControl.RenderTransform&gt;
&lt;/ItemsControl&gt;

I attempted to TranslateTransform to the correct location. I tried setting the margin. I also checked my bindings in the transform and it is correct but the UserControl does not move nonetheless.

答案1

得分: 0

你应该使用itemcontainerstyle来定位你的椭圆:

<ItemsControl.ItemContainerStyle>
    <Style>
        <Setter Property="Canvas.Top" Value="{Binding Y}"/>
        <Setter Property="Canvas.Left" Value="{Binding X}"/>
    </Style>
</ItemsControl.ItemContainerStyle>

假设"significant point"表示你希望椭圆位于给定点的中心,那么你可以使用路径和ellipsegeometry

<Path
    Height="7"
    Width="7"
    Fill="White"
    Stroke="Black"
    StrokeThickness="1">
    <Path.Data>
        <EllipseGeometry
            RadiusX="2.5"
            RadiusY="2.5" />
    </Path.Data>
</Path>

这将位于其canvas.topcanvas.left点的中心。

我在开发游戏时使用上述方法来检查和可视化计算出的点。

该路径是我代码库中SpotView用户控件的内容。

在设计器中它看起来像这样:

如何更改位于项控件上的用户控件位置?

你看到的蓝线是用户控件的边缘。

演示中的点本身位于用户控件的左上角,并延伸出通常被认为是用户控件边界框的部分。

<UserControl x:Class="UILib.SpotView"
             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"
             xmlns:local="clr-namespace:UILib"
             mc:Ignorable="d" >
    <Path
        Height="7"
        Width="7"
        Fill="White"
        Stroke="Black"
        StrokeThickness="1">
        <Path.Data>
            <EllipseGeometry
                RadiusX="2.5"
                RadiusY="2.5" />
        </Path.Data>
    </Path>
</UserControl>
英文:

You should use itemcontainerstyle to position your ellipses:

   &lt;ItemsControl.ItemContainerStyle&gt;
&lt;Style&gt;
&lt;Setter Property=&quot;Canvas.Top&quot; Value=&quot;{Binding Y}&quot;/&gt;
&lt;Setter Property=&quot;Canvas.Left&quot;Value=&quot;{Binding X}&quot;/&gt;
&lt;/Style&gt;
&lt;/ItemsControl.ItemContainerStyle&gt;

Assuming significant point means you want your ellipse centred about a given point then you can use a path and ellipsegeometry.

This:

  &lt;Path  
Height=&quot;7&quot;
Width=&quot;7&quot;
Fill=&quot;White&quot;
Stroke=&quot;Black&quot;
StrokeThickness=&quot;1&quot;&gt;
&lt;Path.Data&gt;
&lt;EllipseGeometry 
RadiusX=&quot;2.5&quot; 
RadiusY=&quot;2.5&quot;
/&gt;
&lt;/Path.Data&gt;
&lt;/Path&gt;

Will be centred on it's canvas.top and canvas.left point.

I use the above to check when I'm developing our game and I need to visualise calculated points.

That path is the content of a SpotView usercontrol in my code base.

In the designer it looks like:

如何更改位于项控件上的用户控件位置?

The blue lines you see are the usercontrol edges.

Demonstrating the spot itself is centred around the usercontrol top left corner and extending "out" what you might usually consider to be the usercontrol bounding box.

&lt;UserControl x:Class=&quot;UILib.SpotView&quot;
xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;
xmlns:mc=&quot;http://schemas.openxmlformats.org/markup-compatibility/2006&quot; 
xmlns:d=&quot;http://schemas.microsoft.com/expression/blend/2008&quot; 
xmlns:local=&quot;clr-namespace:UILib&quot;
mc:Ignorable=&quot;d&quot; 
&gt;
&lt;Path  
Height=&quot;7&quot;
Width=&quot;7&quot;
Fill=&quot;White&quot;
Stroke=&quot;Black&quot;
StrokeThickness=&quot;1&quot;&gt;
&lt;Path.Data&gt;
&lt;EllipseGeometry 
RadiusX=&quot;2.5&quot; 
RadiusY=&quot;2.5&quot;
/&gt;
&lt;/Path.Data&gt;
&lt;/Path&gt;
&lt;/UserControl&gt;

huangapple
  • 本文由 发表于 2023年2月27日 06:08:42
  • 转载请务必保留本文链接:https://go.coder-hub.com/75575296.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定