将CornerRadius绑定到两个布尔属性

时间:2011-05-16 21:41:00

标签: .net silverlight binding

假设我有一个Border,其DataContext是MyViewModel类型的对象。 MyViewModel具有名为RoundLeft和RoundRight的bool属性。当RoundLeft为true时,我希望边框的CornerRadius为6,0,0,6。当RoundRight为真时,我想要0,6,6,0。如果两者都是真的,我想要6,6,6,6。

我已经在下面描述了我的前两次尝试。我还没有放弃,但我想知道是否有其他人可能有任何想法。

尝试#1

我通过绑定到MyViewModel实例本身(不是特定属性)并使用构建正确的CornerRadius对象的IValueConverter来部分工作。这适用于初始加载。问题是绑定是监视整个对象的变化,而不是改变特定的RoundLeft和RoundRight属性,例如:如果RoundLeft改变,边框的CornerRadius不会。

结合:

<Border CornerRadius="{Binding Converter={StaticResource myShiftCornerRadiusConverter}}" />

转换器:

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var myViewModel = value as MyViewModel;
        if (myViewModel != null)
        {
            return new CornerRadius(
                myViewModel.RoundLeft ? 6 : 0,
                myViewModel.RoundRight ? 6 : 0,
                myViewModel.RoundRight ? 6 : 0,
                myViewModel.RoundLeft ? 6 : 0);
        }
        else
        {
            return new CornerRadius(6);
        }
    }

尝试#2

来自Colin Eberhardt的这个blog post看起来很有希望,但我模糊的XamlParseExceptions和ComExceptions。这是我的XAML:

<Border>
<ce:MultiBindings>
    <ce:MultiBinding TargetProperty="CornerRadius" Converter="{StaticResource myCornerRadiusConverter}">
        <ce:MultiBinding.Bindings>
            <ce:BindingCollection>
                <Binding Path="RoundLeft" />
                <Binding Path="RoundRight" />
            </ce:BindingCollection>
        </ce:MultiBinding.Bindings>
    </ce:MultiBinding>
</ce:MultiBindings>
</Border>

这是我的转换器,虽然执行永远不会这么远,即我的断点永远不会被击中。

public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (values.Length == 2 && values.All(v => v is bool))
        {
            var roundLeft = (bool)values[0];
            var roundRight = (bool)values[1];

            return new CornerRadius(
                roundLeft ? 6 : 0,
                roundRight ? 6 : 0,
                roundRight ? 6 : 0,
                roundLeft ? 6 : 0);
        }
        else
        {
            return new CornerRadius(6);
        }
    }

3 个答案:

答案 0 :(得分:1)

在SL中缺乏内置的MultiBinding支持使得这有点痛苦,但如何更简单(虽然稍微更加耦合)的方法。

由于您的VM中已经具有roundLeft和roundRight属性,这些属性已经在某种程度上与特定的UI范例相关联。那么为什么不只是有一个计算属性返回一个CornerRadius值并绑定到那个?

因此,例如,当您更改roundLeft时,您调用一个方法来更新计算的CornerRadius属性并在该属性上引发更改通知,然后您的视图将绑定到计算出的CornerRadius属性。

答案 1 :(得分:0)

DataTrigger和适当的模型属性如何:

<Border Height="25" Width="45" BorderThickness="5" BorderBrush="Green">
    <Border.Style>
        <Style>
            <Style.Triggers>
                <DataTrigger Binding="{Binding Round}"  Value="Left">
                    <Setter Property="Border.CornerRadius" Value="6,0,0,6"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Round}"  Value="Right">
                    <Setter Property="Border.CornerRadius" Value="0,6,6,0"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Round}"  Value="Both">
                    <Setter Property="Border.CornerRadius" Value="6"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Border.Style>
    <TextBlock Text="{Binding Text}"/>
</Border>

答案 2 :(得分:0)

我实现了@Foovanadil建议的方法,但后来又有了另一个想法:我创建了一个新的ContentControl,它暴露了RoundLeft和RoundRight依赖属性。它肯定涉及更多的代码,但现在CornerRadius的东西都在View层中。

[TemplatePart(Name = _borderPartName, Type = typeof(Border))]
public class CustomRoundedBorder : ContentControl
{
    #region Private Fields

    private const string _borderPartName = "PART_Border";
    private Border _borderPart;

    #endregion

    #region Dependency Properties

    #region DefaultCornerRadius

    //////////////////////////////////////////////////////////////////////////////
    /// <summary>
    /// Gets or sets the default corner radius, in pixels.
    /// </summary>
    //////////////////////////////////////////////////////////////////////////////
    public double DefaultCornerRadius
    {
        get { return (double)GetValue(DefaultCornerRadiusProperty); }
        set { SetValue(DefaultCornerRadiusProperty, value); }
    }

    public static readonly DependencyProperty DefaultCornerRadiusProperty = DependencyProperty.Register(
        "DefaultCornerRadius", typeof(double), typeof(CustomRoundedBorder),
        new PropertyMetadata(new PropertyChangedCallback(RoundingChanged)));

    #endregion

    #region RoundLeft

    //////////////////////////////////////////////////////////////////////////////
    /// <summary>
    /// Gets or sets a value indicating whether to round the corners on the left side of the border.
    /// </summary>
    //////////////////////////////////////////////////////////////////////////////
    public bool RoundLeft
    {
        get { return (bool)GetValue(RoundLeftProperty); }
        set { SetValue(RoundLeftProperty, value); }
    }

    public static readonly DependencyProperty RoundLeftProperty = DependencyProperty.Register(
        "RoundLeft", typeof(bool), typeof(CustomRoundedBorder),
        new PropertyMetadata(new PropertyChangedCallback(RoundingChanged)));

    #endregion

    #region RoundRight

    //////////////////////////////////////////////////////////////////////////////
    /// <summary>
    /// Gets or sets a value indicating whether to round the corners on the left side of the border.
    /// </summary>
    //////////////////////////////////////////////////////////////////////////////
    public bool RoundRight
    {
        get { return (bool)GetValue(RoundRightProperty); }
        set { SetValue(RoundRightProperty, value); }
    }

    public static readonly DependencyProperty RoundRightProperty = DependencyProperty.Register(
        "RoundRight", typeof(bool), typeof(CustomRoundedBorder),
        new PropertyMetadata(new PropertyChangedCallback(RoundingChanged)));

    #endregion

    #region EffectiveCornerRadius

    //////////////////////////////////////////////////////////////////////////////
    /// <summary>
    /// Gets the effective corner radius, based on DefaultCornerRadius and 
    /// RoundLeft and RoundRight.
    /// </summary>
    //////////////////////////////////////////////////////////////////////////////
    public double EffectiveCornerRadius
    {
        get { return (double)GetValue(EffectiveCornerRadiusProperty); }
        private set { SetValue(EffectiveCornerRadiusProperty, value); }
    }

    public static readonly DependencyProperty EffectiveCornerRadiusProperty = DependencyProperty.Register(
        "EffectiveCornerRadius", typeof(double), typeof(CustomRoundedBorder),
        new PropertyMetadata(new PropertyChangedCallback(RoundingChanged)));

    #endregion

    #endregion

    #region Overrides

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();

        this._borderPart = this.GetTemplateChild(_borderPartName) as Border;
        this.UpdateCornerRadius();
    }

    #endregion

    #region Private Methods

    private static void RoundingChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var control = d as CustomRoundedBorder;
        if (control != null)
        {
            control.UpdateCornerRadius();
        }
    }

    private void UpdateCornerRadius()
    {
        if (this._borderPart != null)
        {
            this._borderPart.CornerRadius = new CornerRadius(
                this.RoundLeft ? this.DefaultCornerRadius : 0,
                this.RoundRight ? this.DefaultCornerRadius : 0,
                this.RoundRight ? this.DefaultCornerRadius : 0,
                this.RoundLeft ? this.DefaultCornerRadius : 0);
        }
    }

    #endregion
}

然后我为它创建了一个ControlTemplate(为简洁起见省略了一些属性):

<ControlTemplate x:Key="MyBorderTemplate" TargetType="ce:CustomRoundedBorder">
    <Border
        x:Name="PART_Border"
        CornerRadius="{TemplateBinding EffectiveCornerRadius}"
        >
        <ContentPresenter />
    </Border>
</ControlTemplate>

然后我将它绑定到视图模型属性:

<ce:CustomRoundedBorder
    DefaultCornerRadius="6"
    RoundLeft="{Binding RoundLeft}"
    RoundRight="{Binding RoundRight}"
    Template="{StaticResource MyBorderTemplate}"
    >
    <!-- Content -->
</ce:CustomRoundedBorder>