在 UWP 中显示 ContentDialog，使用带有 MVVM 的 ICommand答案

【问题标题】：Display a ContentDialog in UWP, using an ICommand with MVVM在 UWP 中显示 ContentDialog，使用带有 MVVM 的 ICommand
【发布时间】：2018-05-16 17:36:42
【问题描述】：

我正在创建一个 UWP 应用程序，我希望用户能够在其中上传照片。我有一个ContentDialog 和一个Button 和两个TextBoxes。当用户按下“上传照片”Button 时，ContentDialog 应该会弹出。如何使用 MVVM 做到这一点？

查找文件并将文件发布到数据库的逻辑已经完成，只剩下 UI。

这是我的 XAML：

<!-- Content -->
<Button Content="Upload a photo to gallery" Margin="40,0,0,0" x:Name="UploadPhotoButton" Command="{x:Bind MyProfileViewModel.OpenContentDialog}"/>
<!-- More content -->

<!-- This is the ContentDialog I want to display when the user presses the button above -->
<ContentDialog x:Name="UploadPhotoContentDialog"
    PrimaryButtonText="Upload" IsPrimaryButtonEnabled="{Binding IsValid}"
    SecondaryButtonText="Cancel" IsSecondaryButtonEnabled="True">
    <ContentDialog.TitleTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <SymbolIcon Symbol="BrowsePhotos"/>
                <TextBlock Margin="10,0,0,0" Text="Upload photo "/>
            </StackPanel>
        </DataTemplate>
    </ContentDialog.TitleTemplate>

    <Grid Padding="10" Margin="0,10,0,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <TextBlock Text="Photo Title:" VerticalAlignment="Center"/>
        <TextBox Text="{Binding PhotoTitle, Mode=TwoWay}" PlaceholderText="Example: Fun in the sun" Grid.Column="1"/>
        <TextBlock Text="Photo Caption:" Grid.Row="1" VerticalAlignment="Center"/>
        <TextBox Text="{Binding PhotoDesc, Mode=TwoWay}" PlaceholderText="Example: Don't you just love the beach" Grid.Row="1" Grid.Column="1"/>
        <Button Content="Browse files..." Grid.Column="0" Grid.Row="2" Margin="0,20,0,0" Command="{x:Bind MyProfileViewModel.FindFile}"/>
        <TextBox Text="{Binding FileName, Mode=TwoWay}" Grid.Row="2" Grid.Column="1" Margin="10,20,0,0" FontSize="12" Height="32" IsReadOnly="True" />
    </Grid>
</ContentDialog>

到目前为止，这是我的 C# 文件（MyProfileViewModel）：

public ICommand OpenContentDialog => new CommandHandler(async () => {
    //  What to put in here to find the ContentDialog, then display it?
});

【问题讨论】：

标签： c# .net mvvm data-binding uwp

【解决方案1】：

其中一种方法可以将ContentDialog 作为CommandParameter 传递。比如这样：

<Button Content="Upload a photo to gallery" Margin="40,0,0,0" x:Name="UploadPhotoButton" Command="{x:Bind MyProfileViewModel.OpenContentDialog}" CommandParameter="{Binding ElementName=UploadPhotoContentDialog}"/>

和调用：

public RelayCommand OpenContentDialog => new RelayCommand(async (dialog) => { (dialog as ContentDialog).ShowAsync(); });

【讨论】：

我试过你的代码，但我只是收到一个错误，说 Action 不接受 1 个参数。我尝试使用 CommandHandler，并创建一个 RelayCommand 类。都没有工作：/
@Fred 这取决于你的命令类是如何实现的。一般来说，您应该有一个接受参数的实现。我看到你已经找到了一个合适的命令类，所以我不会编辑答案。

【解决方案2】：

我找到了问题的答案。我创建了一个新的Class，它实现了ICommand，称为RelayCommand，输入来自Romasz。

他的 ViewModel 和 XAML 中的绑定是正确的。我只需要调整我的 ICommands。这是我的RelayCommand Class

public class RelayCommand : ICommand {
    private readonly Action<object> _execute;
    private readonly Func<bool> _canExecute;

    public event EventHandler CanExecuteChanged;

    public RelayCommand(Action<object> execute)
        : this(execute, null) {
    }

    public RelayCommand(Action<object> execute, Func<bool> canExecute) {
        _execute = execute ?? throw new ArgumentNullException("execute");
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter) {
        return _canExecute == null ? true : _canExecute();
    }

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

    public void RaiseCanExecuteChanged() {
        CanExecuteChanged?.Invoke(this, EventArgs.Empty);
    }
}

我不得不为 Action 添加<object>，因为 ViewModel 逻辑一直抱怨 Action 没有带参数。

【讨论】：