如何在 wpf 中绑定用户控件的边距或厚度

本文关键字：控件 用户 wpf 绑定 | 更新日期: 2023-09-27 17:56:17

我搜索了很多次，光头所以找不到完整的简单示例。

我在 WPF 中创建了一个具有四个文本框（右、左、上、下标题）的用户控件。当我在窗口中使用该用户控件时，我只想将这些值绑定到某些元素的厚度或边距，例如矩形的笔触粗细。

请给我简单而完整的例子。多谢！

如何在 wpf 中绑定用户控件的边距或厚度

这将需要几个步骤：1. 在用户控件中创建 4 个依赖项属性（出于示例的目的，我将它们命名为 Text1 到 Text4）：

public partial class MyUserControl : UserControl
{
    public string Text1
    {
        get { return (string)GetValue(Text1Property); }
        set { SetValue(Text1Property, value); }
    }
    public static readonly DependencyProperty Text1Property = DependencyProperty.Register("Text1", typeof(string), typeof(MyUserControl), new PropertyMetadata(string.Empty));
    public string Text2
    {
        get { return (string)GetValue(Text2Property); }
        set { SetValue(Text2Property, value); }
    }
    public static readonly DependencyProperty Text2Property = DependencyProperty.Register("Text2", typeof(string), typeof(MyUserControl), new PropertyMetadata(string.Empty));
    public string Text3
    {
        get { return (string)GetValue(Text3Property); }
        set { SetValue(Text3Property, value); }
    }
    public static readonly DependencyProperty Text3Property = DependencyProperty.Register("Text3", typeof(string), typeof(MyUserControl), new PropertyMetadata(string.Empty));
    public string Text4
    {
        get { return (string)GetValue(Text4Property); }
        set { SetValue(Text4Property, value); }
    }
    public static readonly DependencyProperty Text4Property = DependencyProperty.Register("Text4", typeof(string), typeof(MyUserControl), new PropertyMetadata(string.Empty));
    public MyUserControl()
    {
        InitializeComponent();
    }
}
  1. 接下来，在用户控件的 XAML 中添加 4 个文本框控件，并按以下方式绑定它们：
<TextBox Text="{Binding Text1, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}" />
    <TextBox Text="{Binding Text2, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}" />
    <TextBox Text="{Binding Text3, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}" />
    <TextBox Text="{Binding Text4, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}" />
  1. 将 UserControl 放在要使用的任何窗口中，并将 Text1 到 Text4 属性绑定到窗口中的其他控件和属性（例如，我将属性连接到窗口的 Title 属性）：
<local:MyUserControl Text1="{Binding Title, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}"
    Text2="{Binding Title, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}"
    Text3="{Binding Title, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}"
    Text4="{Binding Title, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}" />

更新：一个简单的粗细到字符串转换器，可用于绑定到属性，如边距：

public class ThicknessToStringConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        Thickness thikness = (Thickness)value;
        return $"{thikness.Left},{thikness.Top},{thikness.Right},{thikness.Bottom}";
    }
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        // Because you are not using a view/view model, validation should go here!
        string[] thicknessValues = ((string)value).Split(',');
        return new Thickness(double.Parse(thicknessValues[0]),
            double.Parse(thicknessValues[1]),
            double.Parse(thicknessValues[2]),
            double.Parse(thicknessValues[3]));
    }
}

希望对您有所帮助！

相关文章：