在调整窗口大小时保持画布元素相对于背景图像的位置

Question

我试图在我的画布中相对于我的背景定位元素。

窗口重新保持高宽比。 背景通过窗口大小拉伸。

问题是一旦窗口被重新调整大小的元素位置不正确。如果窗口重新调整大小，元素会调整它们的大小并保持在正确的位置，但是如果窗口重新调整大小加倍它的大小，那么定位完全关闭。

到目前为止，我尝试过使用Grid，但它是无济于事。下面是用于数据绑定

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

而这里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> 

类是运行的每个第二相对于元素的位置保持到窗口大小不同的代码

  items[0].OwnerData.left = this.Width * (10/Defaul_WindowSize_Width); 
      items[0].OwnerData.top = this.Height * (55/Defaul_WindowSize_Height); 

10和50是默认值Canvas.Left和当窗口第一次初始化时使用3210。

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

Answer 1

您需要武官属性：

public static readonly DependencyProperty RelativeProperty = DependencyProperty.RegisterAttached("Relative", typeof(double), typeof(MyControl)); 

    public static double GetRelative(DependencyObject o) 
    { 
     return (double)o.GetValue(RelativeProperty); 
    } 

    public static void SetRelative(DependencyObject o, double value) 
    { 
     o.SetValue(RelativeProperty, value); 
    } 

，并添加转换器：

public class RelativePositionConverter : IMultiValueConverter 
    { 
     public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) 
     { 
      var rel = (double)values[0]; 
      var width = (double)values[1]; 
      return rel * width; 
     } 

     public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) 
     { 
      throw new NotImplementedException(); 
     } 
    } 

，当你添加子以帆布，你需要这样的：

var child = new Child(); 
      SetRelative(child, currentPosition/ActualWidth); 
      var multiBinding = new MultiBinding { Converter = new RelativePositionConverter() }; 
      multiBinding.Bindings.Add(new Binding { Source = child, Path = new PropertyPath(RelativeProperty) }); 
      multiBinding.Bindings.Add(new Binding { Source = canvas, Path = new PropertyPath(ActualWidthProperty) }); 
      BindingOperations.SetBinding(child, LeftProperty, multiBinding); 
      Children.Add(child); 

如果需要，你可以改变帆布的分开的相对值