UWP x：绑定命令

Question

Whether it is possible so to adhere a command.

Context

<Page.DataContext>
         <local: MainPage />
     </Page.DataContext>

Command

static public Command Pause (MediaElement element)
         {
             element.Pause ();
             return new Command ();
         }

The binding itself

<Button VerticalAlignment = "Bottom"
                 Margin = "10,0,0,10" Command = "{x: Bind local: MainPage.Pause (mp)}"
                 HorizontalAlignment = "Left" Height = "30" Width = "100"> Pause </ Button>

start but after a couple of seconds error System.StackOverflowException Why overflow error and how to overcome

Answer 1

When you use {x:bind} to bind the ButtonBase.Command Property, you should bind a command which will be invoked when this button is pressed. In your code, you bind a static method which return a command, but this static method belongs to the type itself rather than to a specific object.

To solve this error, you should delete the codes which set the page's data context object instance in the xaml. That is to delete the following code,

<Page.DataContext>
    <local:MainPage />
</Page.DataContext>

If you want to bind a command to operate the MediaElement , you should put the operation code in the command, here is a sample,

MainPage.xaml,

<StackPanel>
    <MediaElement Name="mp" Width="800" Height="400" Source="ms-appx:///Assets/video.mp4"/>

    <Button VerticalAlignment = "Bottom" Margin = "10,0,0,10" Command = "{x:Bind local:MainPage.Pause(mp)}"
             HorizontalAlignment = "Left" Height = "30" Width = "100">Pause</Button>
</StackPanel>

MainPage.xaml.cs and the Command,

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    public static Command Pause(MediaElement element)
    {
        //element.Pause();
        return new Command(s => { element.Pause(); },true);
    }
}

public class Command : ICommand
{
    private Action<object> action;
    private bool canExecute;
    public event EventHandler CanExecuteChanged;

    public Command(Action<object> action,bool canExecute)
    {
        this.action = action;
        this.canExecute = canExecute;
    }

    public bool CanExecute(object parameter)
    {
        return canExecute;
    }

    public void Execute(object parameter)
    {
        action(parameter);
    }
}