gpt4 book ai didi

c# - 保持 Canvas 元素相对于背景图像定位

转载 作者:行者123 更新时间:2023-12-04 07:54:51 34 4
gpt4 key购买 nike

我正在尝试在我的 Canvas 中定位元素相对于我的背景。

窗口被重新调整大小,保持纵横比。
背景随着窗口大小而拉伸(stretch)。

问题是一旦重新调整窗口大小,元素位置就会不正确。如果窗口的大小只调整了一点,元素会稍微调整它们的大小并且仍然在正确的位置,但是如果窗口的大小被重新调整为它的大小的两倍,那么定位就完全关闭了。

到目前为止,我使用了 Grid ,但也无济于事。这是 XAML

<Window x:Class="CanvasTEMP.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" ResizeMode="CanResizeWithGrip" SizeToContent="WidthAndHeight" MinHeight="386" MinWidth="397.5" Name="MainWindow1"
xmlns:c="clr-namespace:CanvasTEMP" Loaded="onLoad" WindowStartupLocation="CenterScreen" Height="386" Width="397.5" WindowStyle="None" AllowsTransparency="True" Topmost="True" Opacity="0.65">

<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas Height="77" Width="218">
<Label Content="{Binding OwnerData.OwnerName}" Height="36" Canvas.Left="8" Canvas.Top="55" Width="198" Padding="0" HorizontalAlignment="Left" HorizontalContentAlignment="Center" VerticalAlignment="Center"/>
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas>
<Canvas.Background>
<ImageBrush ImageSource="Resources\default_mapping.png" Stretch="Uniform"/>
</Canvas.Background>
</Canvas>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding OwnerData.left}" />
<Setter Property="Canvas.Top" Value="{Binding OwnerData.top}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>

用于数据绑定(bind)的类
public class Owner : INotifyPropertyChanged
{
public double _left;
public double _top;

public string OwnerName { get; set; }
public double top { get { return _top; }
set
{
if (value != _top)
{
_top = value;
OnPropertyChanged();
}
}
}

public double left
{
get { return _left; }
set
{
if (value != _left)
{
_left = value;
OnPropertyChanged();
}
}
}

public string icon { get; set; }

public event PropertyChangedEventHandler PropertyChanged;

private void OnPropertyChanged([CallerMemberName] string propertyName = "none passed")
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
handler(this, new PropertyChangedEventArgs(propertyName));
}
}

public class ForDisplay
{
public Owner OwnerData { get; set; }
public int Credit { get; set; }
}

这是每秒运行的代码,以保持元素相对于窗口大小的位置
items[0].OwnerData.left = this.Width * (10 / Defaul_WindowSize_Width); 
items[0].OwnerData.top = this.Height * (55 / Defaul_WindowSize_Height);

10 和 50 是默认值 Canvas.LeftCanvas.Top在第一次初始化窗口时使用。

如果有人能指出我做错了什么,将不胜感激。

最佳答案

虽然这篇文章很旧,但它仍然会有所帮助,所以这是我的答案。

我想出了两种方法来保持 Canvas 中元素的相对位置:

  • 多值转换器
  • 附属性

  • 这个想法是在 [0,1] 范围内提供两个值 (x,y),这将定义元素相对于 Canvas 左上角的相对位置。这些 (x,y) 值将用于计算和设置正确的 Canvas.LeftCanvas.Top值(value)观。

    为了放置 中心 相对位置的元素,我们将需要 ActualWidthActualHeightCanvas 元素。

    这是我对类似问题的完整答案,包括示例和解释:

    How to keep relative position of WPF elements on background image

    听听它的样子: Ellipse那是 Canvas 的 child 相对于 Canvas 保持相对位置(和 Image )。
    enter image description here

    关于c# - 保持 Canvas 元素相对于背景图像定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16949423/

    34 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com