将自定义视图绑定到xamarin表单中的页面模型

时间:2017-10-27 11:55:54

标签: c# xaml data-binding binding xamarin.forms

我正在尝试创建一个自定义视图,该视图将用作应用程序中某些页面的标题。自定义视图有一个用于保存信息的按钮,以及一个用于显示信息是否已保存的图像,但如果信息已保存,我还可以从API接收信息。 (这是方案的简化版本)

所以,我有MainPage.xaml(任何将使用自定义视图的页面)

ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:Messages"
         xmlns:controls="clr-namespace:Messages.Controls"
         x:Class="Messages.MainPage">
<StackLayout Spacing="5">

    <controls:HeaderMenu x:Name="menu" HorizontalOptions="FillAndExpand" VerticalOptions="Start" SaveCommand="{Binding MyCommand}" IsControlClosed="{Binding ControlClosedValue, Mode=TwoWay}" />

    .....

</StackLayout>

MainPageViewModel.cs

public class MainPageViewModel : INotifyPropertyChanged
{
    public ICommand MyCommand { get; set; }

    private bool _controlClosedvalue;

    public bool ControlClosedValue
    {
        get => _controlClosedvalue;
        set
        {
            _controlClosedvalue = value;
            OnPropertyChanged(nameof(ControlClosedValue));
        }
    }

    public MainPageViewModel()
    {
        MyCommand = new Command(MyCommandExecute);
        _controlClosedvalue = false;
    }

    private void MyCommandExecute()
    {
        // do stuff

        _controlClosedvalue = true; //change value to change the value of control
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

HeaderMenu.xaml

<Grid>   

<Image Source="save.png" HeightRequest="25" WidthRequest="25">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="SaveImage_OnTapped" />
                    </Image.GestureRecognizers>
                </Image>

 <Image  IsVisible="{Binding IsControlClosed}" Source="check.png" HeightRequest="30" WidthRequest="30" />

HeaderMenu.xaml.cs

public partial class HeaderMenu : ContentView
{
    public HeaderMenu ()
    {
        InitializeComponent();
        imgControlClosed.BindingContext = this;
    }

    public static readonly BindableProperty SaveCommandProperty =
        BindableProperty.Create(nameof(SaveCommand), typeof(ICommand), typeof(HeaderMenu));

    public static readonly BindableProperty IsControlClosedProperty =
        BindableProperty.Create(nameof(IsControlClosed), typeof(bool), typeof(HeaderMenu), false, BindingMode.TwoWay, null, ControlClosed_OnPropertyChanged);

    public ICommand SaveCommand
    {
        get => (ICommand) GetValue(SaveCommandProperty);
        set => SetValue(SaveCommandProperty, value);
    }

    public bool IsControlClosed
    {
        get => (bool) GetValue(IsControlClosedProperty);
        set => SetValue(IsControlClosedProperty, value);
    }

    private static void ControlClosed_OnPropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (bindable is HeaderMenu control)
        {
            control.imgControlClosed.IsVisible = (bool)newValue;
        }
    }

    private void SaveImage_OnTapped(object sender, EventArgs e)
    {
        if (SaveCommand != null && SaveCommand.CanExecute(null))
        {
            SaveCommand.Execute(null);
        }
    }
}

所以,我需要的是当点击save命令执行使用控件的页面中的某些代码时,SaveCommand的绑定按预期工作。但是在执行代码之后,或者在某些不同的情况下,我希望更改页面模型中的属性,这应该更改自定义视图上的属性,但这不起作用。

有谁知道这段代码有什么问题?

如果我在消耗控制时只是将它设置为True或False就可以了。

<controls:HeaderMenu x:Name="menu" HorizontalOptions="FillAndExpand" VerticalOptions="Start" SaveCommand="{Binding MyCommand}" IsControlClosed="True" />

但是将它绑定到属性时它不起作用。

1 个答案:

答案 0 :(得分:0)

我发现了一个问题。一个愚蠢的错误,我设置变量的值而不是属性。

在主页面视图模型中,而不是

Desktop

应该是

_controlClosedvalue = false; // or true