Well It's not 100% what I've wanted to achieve but this closes thing I've managed to do (thanks to JNP for tip about margin binding). So basically what I'm doing is to use multiconverter for margin bindings, while passing the starting position of the control as ConverterParameter, margins are depended on window's height and width ratio change (this is the only flow, as it seems the background image is transformed slightely different).
The final result moves and resizes the control quite nice but the more we resize the window the difference starts to be more noticable, it's probably due to mentioned transformation difference.
Code:
ImageLayout.xaml:
Title="Character sheet - Front" Height="768" Width="1366" SizeChanged="Window_SizeChanged">
<Window.Resources>
<local:MarginConverter x:Key="MyConverter"/>
</Window.Resources>
<Window.Background>
<ImageBrush ImageSource="Resources/base_front.png"/>
</Window.Background>
<Grid>
<TextBox x:Name="TextBox" TextWrapping="Wrap" Text="TextBox">
<TextBox.Margin>
<MultiBinding Converter="{StaticResource MyConverter}" ConverterParameter="266,307,962,408">
<Binding RelativeSource="{RelativeSource AncestorType={x:Type Window}}" Path="WindowProperties.CurrentWidthChange" />
<Binding RelativeSource="{RelativeSource AncestorType={x:Type Window}}" Path="WindowProperties.CurrentHeightChange"/>
</MultiBinding>
</TextBox.Margin>
</TextBox>
</Grid>
As said converter takes the base margin in ConverterParameter and is bound to width/height ratio change, (which is kept in additional class, since Window is not DependencyObject).
ImageLayout.xaml.cs:
public partial class ImageLayout : Window
{
public WindowProperties WindowProperties { get; set; }
public ImageLayout()
{
WindowProperties = new WindowProperties();
InitializeComponent();
}
private void Window_SizeChanged(object sender, SizeChangedEventArgs e)
{
WindowProperties.CurrentHeightChange = e.NewSize.Height / 768;
WindowProperties.CurrentWidthChange = e.NewSize.Width / 1366;
}
}
Here we just have the instance of WindowProperties, which is class implementing INotifyPropertyChanged, additionally I've overriden an event which is called on window's size change, in order to update the ratio values of both width and height change.
WindowProperties.cs:
public class WindowProperties : INotifyPropertyChanged
{
public WindowProperties()
{
CurrentHeightChange = 1;
CurrentWidthChange = 1;
}
private double _currentHeightChange;
public double CurrentHeightChange
{
get
{
return _currentHeightChange;
}
set
{
_currentHeightChange = value;
NotifyPropertyChanged("CurrentHeightChange");
}
}
private double _currentWidthChange;
public double CurrentWidthChange
{
get
{
return _currentWidthChange;
}
set
{
_currentWidthChange = value;
NotifyPropertyChanged("CurrentWidthChange");
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void NotifyPropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
}
Additional class implementing INotifyPropertyChanged, needed for converter's bindings purpose.
MarginConverter.cs:
public class MarginConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
string[] positions = parameter.ToString().Split(',');
double leftPos = double.Parse(positions[0]);
double topPos = double.Parse(positions[1]);
double rightPos = double.Parse(positions[2]);
double bottomPos = double.Parse(positions[3]);
var actualMargin = new Thickness(leftPos, topPos, rightPos, bottomPos);
return new Thickness(actualMargin.Left * (double)values[0],
actualMargin.Top * (double)values[1],
actualMargin.Right * (double)values[0],
actualMargin.Bottom * (double)values[1]);
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
return null;
}
}
Converter basically takes the starting position from parameter and then multiplies it by ratio of window's size change.
Results:
Application start:
Resize:
A lot of resizing, causing bad transformations:
Conclusion:
As you can see it works pretty good and could be use if the resize options would be limited, to make it better there should be some improvement done to ratio computation, but unfortunately I do not know what exact transformations are done to the background image when resizing the window. The improvement also seems to be bit an overkill and in general in my opinion it's better to copy the image layout just with controls without having image in the background.
