1、使用场景
例如,设置按钮的宽度(或长度),绑定为其父元素或者其他命名(x:Name)元素宽度(或长度等)的一半(或者1/3等等)。正常在布局文件中使用数据绑定只能是绑定固定的值,如宽度
Width="{Binding ElementName=源元素名称, Path=Width}
不能使用运算符,如只需要一半宽度
Width="{Binding ElementName=源元素名称, Path=Width / 2}
2、解决方法
创建值转换器(IValueConverter),然后将其作为资源赋给属性Width
创建步骤如下:
- 创建一个实现
IValueConverter
接口的类; - 为该类声明添加
ValueConversion
特性,并制定目标数据类型 - 实现
Convert()
方法,实现值的转换 - 实现
ConvertBack()
方法,反转值
3、实现
新建一个类WidthConverter
,实现Converter()
和ConverterBack()
方法
// 宽度 值转化器
public class WidthConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
// 返回宽度的 1/3
return (double)value / 3;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
然后在布局文件中添加资源,这样可以使用StaticResource
对每个控件元素通用
<Window.Resources>
<local:WidthConverter x:Key="widthconverter"></local:WidthConverter>
</Window.Resources>
再在属性Width
中使用此转化器
<Border Name="border" Margin="50" BorderBrush="Black" BorderThickness="2">
<Button Content="宽是边框的1/3 长=宽"
Width="{Binding ElementName=border, Path=ActualWidth, Converter={StaticResource widthconverter}}"
Height="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Width}"></Button>
</Border>
实现:按钮宽度是border宽度的1/3,高度和宽度一样。
注意这里绑定的是边框的实际宽度ActualWidth
,不是Width
。因为没有硬编码边框的宽度。例如,写死边框宽度Width=500
,那就可以绑定Width
了。