如何将 Windows.Devices.Enumeration.DevicePicker 与 Prism (MVVM) 一起使用？答案

【问题标题】：How to use Windows.Devices.Enumeration.DevicePicker with Prism (MVVM)?如何将 Windows.Devices.Enumeration.DevicePicker 与 Prism (MVVM) 一起使用？
【发布时间】：2017-06-08 09:05:38
【问题描述】：

我正在开发一个新的 UWP 应用程序，该应用程序通过蓝牙与某些硬件进行交互。使用windows-universal-samples repo 作为指导，我能够成功地得到我想要的工作。

现在我正在尝试使用 Prism 将我在单击事件处理程序中编写的代码重构为视图模型类。但是我不知道如何解决这个问题。在其他需要在 View 和 ViewModel 之间传递数据的情况下，我会在 ViewModel 上创建一个属性并将其绑定到视图的 XAML 中的控件。

问题在于Windows.Devices.Enumaration.DevicePicker 的使用方式似乎与 MVVM 模式不兼容。在单击处理程序中，数据和控件合并在一起，我看不出如何在视图模型上创建某种列表属性，然后将其绑定到视图。这是我正在使用的代码的最简单示例：

async void DiscoverButton_OnClick(object sender, RoutedEventArgs e)
{
    var devicePicker = new DevicePicker();
    devicePicker.Filter.SupportedDeviceSelectors.Add(BluetoothLEDevice.GetDeviceSelectorFromPairingState(true));

    // Calculate the position to show the picker (right below the buttons)
    var ge = DiscoverButton.TransformToVisual(null);
    var point = ge.TransformPoint(new Point());
    var rect = new Rect(point, new Point(100, 100));
    var device = await devicePicker.PickSingleDeviceAsync(rect);

    var bluetoothLEDevice = await BluetoothLEDevice.FromIdAsync(device.Id);
}

见PickSingleDeviceAsync()直接创建控件。

【问题讨论】：

您的问题解决了吗？如果您对此问题有任何其他疑虑，请随时告诉我。

标签： c# mvvm bluetooth uwp prism

【解决方案1】：

现在我正在尝试使用 Prism 将我在单击事件处理程序中编写的代码重构为视图模型类。但是我不知道如何解决这个问题。

您可以为您的按钮绑定命令并使用 CommandParameter 将参数传递给命令。

详情请参考以下代码示例：

<Button x:Name="btn" Content="device" Command="{Binding ClickCommand}" CommandParameter="{Binding ElementName=btn}"></Button>

public class MianViewModel : BindableBase
{
    public ICommand ClickCommand
    {
        get;
        private set;
    }

    public MianViewModel()
    {
        ClickCommand = new DelegateCommand<object>(ClickedMethod);
    }

    private async void ClickedMethod(object obj)
    {
        var devicePicker = new DevicePicker();
        devicePicker.Filter.SupportedDeviceSelectors.Add(BluetoothLEDevice.GetDeviceSelectorFromPairingState(true));

        // Calculate the position to show the picker (right below the buttons)
        Button DiscoverButton = obj as Button;
        if (DiscoverButton != null)
        {
            var ge = DiscoverButton.TransformToVisual(null);
            var point = ge.TransformPoint(new Point());
            var rect = new Rect(point, new Point(100, 100));
            var device = await devicePicker.PickSingleDeviceAsync(rect);

            if (device != null)
            {
                var bluetoothLEDevice = await BluetoothLEDevice.FromIdAsync(device.Id);
            }
        }
    }
}

【讨论】：

【解决方案2】：

我想出的解决方案是放弃 DevicePicker 提供的内置 UI，而是创建自己的 UI 以与 DeviceWatcher 一起使用。例如：

void StartWatcher()
{
    ResultCollection.Clear();

    string selector = BluetoothLEDevice.GetDeviceSelector();

    DeviceWatcher = DeviceInformation.CreateWatcher(selector);

    DeviceWatcher.Added += async (deviceWatcher, deviceInformation) =>
    {
        await OnUiThread(() =>
        {
            ResultCollection.Add(deviceInformation);
        });
    };

    DeviceWatcher.Start();
}

ResultCollection 将从视图模型绑定到视图。

【讨论】：