Xamarin可重用的xaml用户控件和自定义命令

时间:2016-08-11 16:08:57

标签: xaml xamarin user-controls icommand

首先抱歉我的英语。 我正在使用Xamarin.Form

开发iOS和Android项目

我想要一个' xaml用户控件'可以以不同的方式重用,我需要使用ICommand

使其可点击

这是StackLayoutButton组件:

<?xml version="1.0" encoding="utf-8" ?>
 <StackLayout xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Installa.Controls.StackLayoutButton">
  <Image x:Name="Icon" Source="{Binding Icon}" />
  <Label x:Name="Text" Text="{Binding Title}" HorizontalOptions="Center" LineBreakMode="NoWrap" Font="Small" TextColor="Red" />
</StackLayout>

这是使用组件的CalendarioPage xaml页面

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:Installa.Controls;assembly=Installa"
             x:Class="Installa.CalendarioPage">

  <StackLayout>
    <Label Text="{Binding ViewName}" Font="42" IsVisible="{Binding IsWindowsPhone}" />
    <ActivityIndicator IsRunning="{Binding IsLoading}" IsVisible="{Binding IsLoading}" Color="Red" />

    <controls:StackLayoutButton BindingContext="{Binding Blog}" TextColor="Blue" /> <!-- Command="{Binding SubmitCommand}" --> 
    <controls:StackLayoutButton BindingContext="{Binding Facebook}" TextColor="Red" /> <!-- Command="{Binding SubmitCommand}" --> 
  </StackLayout>

</ContentPage>

这是CalendarioPage c#页面:

public partial class CalendarioPage : ContentPage
{
    private CalendarioViewModel vm;

    public CalendarioPage()
    {
        InitializeComponent();

        vm = new CalendarioViewModel();

        this.BindingContext = vm;
    }
 }

这是viewmodel类:

namespace Installa
{
    public class CalendarioViewModel: BaseViewModel
    {

        public CalendarioViewModel()
        {
            blog = new Activity();
            blog.Link = "www.google.it";
            blog.Title = "Titolo del blog";
            blog.Icon = "logomenu.png";

            facebook = new Activity();
            facebook.Title = "Tito Fbook";
            facebook.Link = "www.facebook.it";
            facebook.Icon = "icon.png";

            ViewName = "nome della view";
            IsLoading = false;    
        }

        Activity blog = null;
        public Activity Blog
        {
            get {return blog;}
        }

        Activity facebook = null;
        public Activity Facebook
        {
            get { return facebook; }
        }

        string viewName = string.Empty;
        public string ViewName
        {
            get { return viewName; }
            set { SetProperty(ref viewName, value); }
        }

        public bool IsWindowsPhone
        {
            get
            {
                return Device.OS == TargetPlatform.WinPhone;
            }
        }

        bool isLoading = false;
        public bool IsLoading
        {
            get { return isLoading; }
            set { SetProperty(ref isLoading, value); }
        }           
    }
}

使用Activity,一个简单的类:

    public string Title { get; set; }

    public string Link { get; set; }

    public String Icon { get; set; }

到目前为止,一切正常,但现在我需要实现ICommand接口。

在StackLayoutButton c#代码中我尝试添加:

        var tapGestureRecognizer = new TapGestureRecognizer();
        tapGestureRecognizer.SetBinding(TapGestureRecognizer.CommandProperty, "TapCommand");
        Icon.GestureRecognizers.Add(tapGestureRecognizer)
        Text.GestureRecognizers.Add(tapGestureRecognizer)

此外,我尝试添加到CalendarioViewModel INotifyPropertyChanged和&#39; OnTapped&#39;方法

进入Activity.cs我添加&#39; ICommand tapCommand&#39;和相关的......但是没有用。

我尝试了其他..但我无法启用StackLayoutButton组件的点击。

我应该怎样做? 我希望能够拥有一个可编程的&#39;命令...例如,我想浏览到链接属性&#39;活动或能够打开新视图。

感谢您的帮助!

更新

我能够将TapGestureRecognizer添加到xaml用户控件(StackLayoutButton.xaml.cs)中, 但是我想以MVVM的方式实现它,

using Xamarin.Forms;
namespace Installa.Controls
{
    public partial class StackLayoutButton : StackLayout
    {
        public StackLayoutButton()
        {
            InitializeComponent();


            TapGestureRecognizer tapGestureRecognizer = new TapGestureRecognizer
            {
                Command = new Command(OnMyComponentTapped),
                CommandParameter = "ciao"
            };
            this.Icon.GestureRecognizers.Add(tapGestureRecognizer);
            this.Text.GestureRecognizers.Add(tapGestureRecognizer);
        }


        async void OnMyComponentTapped(object parameter)
        {
            // do action
        }


        public Color TextColor
        {
            get { return this.Text.TextColor; }
            set { this.Text.TextColor = value; }
        }
        public Label TextControl
        {
            get { return this.Text; }
            set { this.Text = value; }
        }
    }
}

任何人都可以建议我这样做吗?

由于

1 个答案:

答案 0 :(得分:0)

这就是我在xaml视图中添加手势识别器的方法:

<Label.GestureRecognizers>
    <TapGestureRecognizer Command="{Binding SelectEquipmentCommand}"/>
</Label.GestureRecognizers>

这是我的ViewModel中的ICommand属性:

    public ICommand SelectEquipmentCommand
    {
        get
        {
            return fSelectEquipmentCommand ?? (fSelectEquipmentCommand = new Command(async () => await SelectEquipmentTask()));
        }
    }

    private async Task SelectEquipmentTask()
    {

    }