Question

我制作了一个名为ImageButton的自定义控件，它允许我为Up，Down和Inactive状态设置不同的图像。它也可以在＆＃34; normal＆＃34;模式或在＆＃34;锁定＆＃34;模式。

除了一小块之外它工作得很好......我在XAML中设置的值不会立即应用。它仅使用默认值。

这是ImageButton.cs

public class ImageButton : Image
{
    public enum State
    {
        Inactive,
        Up,
        Down
    };

    public static readonly BindableProperty CommandProperty =
        BindableProperty.Create("Command", typeof(ICommand), typeof(ImageButton), null);

    public static readonly BindableProperty SourceUpProperty =
        BindableProperty.Create("SourceUp", typeof(string), typeof(ImageButton), null);

    public static readonly BindableProperty SourceDownProperty =
        BindableProperty.Create("SourceDown", typeof(string), typeof(ImageButton), null);

    public static readonly BindableProperty SourceInactiveProperty =
        BindableProperty.Create("SourceInactive", typeof(string), typeof(ImageButton), null);

    public static readonly BindableProperty ToggleProperty =
        BindableProperty.Create("Toggle", typeof(bool), typeof(ImageButton), false);

    public static readonly BindableProperty ToggleStateProperty =
        BindableProperty.Create("ToggleState", typeof(State), typeof(ImageButton), State.Up, BindingMode.TwoWay);

    public ImageButton()
    {
        Initialize();
    }

    public void Initialize()
    {
        switch (ToggleState) // <- this is returning "State.Up" (the default) no matter what is set in the xaml.
        {
            case State.Up:
                Source = SourceUp; 
                break;
            case State.Down:
                Source = SourceDown;
                break;
            case State.Inactive:
                Source = SourceInactive;
                break;
            default:
                Source = SourceUp;
                break;
        }
        GestureRecognizers.Add(new TapGestureRecognizer
        {
            Command = TransitionCommand
        });
    }

    public ICommand Command
    {
        get { return (ICommand)GetValue(CommandProperty); }
        set { SetValue(CommandProperty, value); }
    }

    private ICommand TransitionCommand
    {
        get
        {
            return new Command(async () =>
            {
                if (ToggleState != State.Inactive)
                {
                    AnchorX = 0.48;
                    AnchorY = 0.48;
                    await this.ScaleTo(0.8, 50, Easing.Linear);
                    if (Toggle)
                    {
                        if (ToggleState == State.Down)
                            ToggleState = State.Up;
                        else
                            ToggleState = State.Down;
                    }
                    await this.ScaleTo(1, 50, Easing.Linear);
                    if (Command != null)
                    {
                        Command.Execute(null);
                    }
                }
            });
        }
    }

    public string SourceUp
    {
        get { return (string)GetValue(SourceUpProperty); }
        set { SetValue(SourceUpProperty, value); }
    }

    public string SourceDown
    {
        get { return (string)GetValue(SourceDownProperty); }
        set { SetValue(SourceDownProperty, value); }
    }

    public string SourceInactive
    {
        get { return (string)GetValue(SourceInactiveProperty); }
        set { SetValue(SourceInactiveProperty, value); }
    }

    public bool Toggle
    {
        get { return (bool)GetValue(ToggleProperty); }
        set { SetValue(ToggleProperty, value); }
    }

    public State ToggleState
    {
        get { return (State)GetValue(ToggleStateProperty); }
        set
        {
            SetValue(ToggleStateProperty, value);
            switch (value)
            {
                case State.Up:
                    Source = SourceUp;
                    break;
                case State.Down:
                    Source = SourceDown;
                    break;
                case State.Inactive:
                    Source = SourceInactive;
                    break;
                default:
                    Source = SourceUp;
                    break;
            }
        }
    }
}

如果我使用＆＃34; Source＆＃34;设置它，按钮就可以工作。像这样：

<custom:ImageButton 
    Source="i_left.png"
    SourceUp="i_left.png"
    SourceDown="i_right.png"
    SourceInactive="i_close.png"
    Toggle="True"
    ToggleState="Up"
    WidthRequest="{StaticResource IconMedium}"
    HeightRequest="{StaticResource IconMedium}"
    Command="{Binding ImageButton1Command}"/>

我不需要指定＆＃34;来源＆＃34;因为在构造函数中我根据初始状态设置它但似乎＆＃34; ToggleState＆＃34;尚未设置为我的xaml值。

我正试图像这样设置

<custom:ImageButton 
    SourceUp="i_left.png"
    SourceDown="i_right.png"
    SourceInactive="i_close.png"
    Toggle="True"
    ToggleState="Down"
    WidthRequest="{StaticResource IconMedium}"
    HeightRequest="{StaticResource IconMedium}"
    Command="{Binding ImageButton1Command}"/>

加载后应该在＆＃34; i_right.png＆＃34;图像，但它不是。

每个答案编辑：以下课程按预期工作！

public class ImageButton : Image
{
    public enum State
    {
        Inactive,
        Up,
        Down
    };

    public static readonly BindableProperty CommandProperty =
        BindableProperty.Create("Command", typeof(ICommand), typeof(ImageButton), null, propertyChanged: OnStateChanged);

    public static readonly BindableProperty SourceUpProperty =
        BindableProperty.Create("SourceUp", typeof(ImageSource), typeof(ImageButton), null, propertyChanged: OnStateChanged);

    public static readonly BindableProperty SourceDownProperty =
        BindableProperty.Create("SourceDown", typeof(ImageSource), typeof(ImageButton), null, propertyChanged: OnStateChanged);

    public static readonly BindableProperty SourceInactiveProperty =
        BindableProperty.Create("SourceInactive", typeof(ImageSource), typeof(ImageButton), null, propertyChanged: OnStateChanged);

    public static readonly BindableProperty ToggleProperty =
        BindableProperty.Create("Toggle", typeof(bool), typeof(ImageButton), false);

    public static readonly BindableProperty ToggleStateProperty =
        BindableProperty.Create("ToggleState", typeof(State), typeof(ImageButton), State.Up, BindingMode.TwoWay, propertyChanged: OnStateChanged);

    public ImageButton()
    {
        Initialize();
    }

    public void Initialize()
    {
        GestureRecognizers.Add(new TapGestureRecognizer
        {
            Command = TransitionCommand
        });
    }

    static void OnStateChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var imageButton = bindable as ImageButton;
        imageButton.SetState();
    }

    public void SetState()
    {
        switch (ToggleState)
        {
            case State.Up:
                Source = SourceUp;
                break;
            case State.Down:
                Source = SourceDown;
                break;
            case State.Inactive:
                Source = SourceInactive;
                break;
            default:
                Source = SourceUp;
                break;
        }
    }

    public ICommand Command
    {
        get { return (ICommand)GetValue(CommandProperty); }
        set { SetValue(CommandProperty, value); }
    }

    private ICommand TransitionCommand
    {
        get
        {
            return new Command(async () =>
            {
                if (ToggleState != State.Inactive)
                {
                    AnchorX = 0.48;
                    AnchorY = 0.48;
                    await this.ScaleTo(0.8, 50, Easing.Linear);
                    if (Toggle)
                    {
                        if (ToggleState == State.Down)
                            ToggleState = State.Up;
                        else
                            ToggleState = State.Down;
                    }
                    await this.ScaleTo(1, 50, Easing.Linear);
                    if (Command != null)
                    {
                        Command.Execute(null);
                    }
                }
            });
        }
    }

    public ImageSource SourceUp
    {
        get { return (ImageSource)GetValue(SourceUpProperty); }
        set { SetValue(SourceUpProperty, value); }
    }

    public ImageSource SourceDown
    {
        get { return (ImageSource)GetValue(SourceDownProperty); }
        set { SetValue(SourceDownProperty, value); }
    }

    public ImageSource SourceInactive
    {
        get { return (ImageSource)GetValue(SourceInactiveProperty); }
        set { SetValue(SourceInactiveProperty, value); }
    }

    public bool Toggle
    {
        get { return (bool)GetValue(ToggleProperty); }
        set { SetValue(ToggleProperty, value); }
    }

    public State ToggleState
    {
        get { return (State)GetValue(ToggleStateProperty); }
        set { SetValue(ToggleStateProperty, value); }
    }
}

Answer 1

在调用构造函数时 - 尚未设置XAML的可绑定属性。因此，您将获得默认值。检测属性＆＃39;更新，并正确设置控件的状态 - 您可以使用property-changed callback methods。

我的建议是对每个可绑定属性使用属性更改的回调，其值可能会影响控件的当前状态（因为你永远不能确定属性值的顺序/顺序）在加载期间从XAML设置）。

例如：

 public static readonly BindableProperty ToggleStateProperty =
    BindableProperty.Create("ToggleState", typeof(State), typeof(ImageButton), State.Up, BindingMode.TwoWay, propertyChanged: OnToggleStateChanged);


 static void OnToggleStateChanged (BindableObject bindable, object oldValue, object newValue)
 {
      // Property changed implementation goes here
      Initialize();
 }

Xamarin表单自定义控件和可绑定属性无法按预期工作

1 个答案: