使用带MVVM的ICommand在UWP中显示ContentDialog

问题描述：

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

查找文件并将文件发布到数据库的逻辑已经完成，只剩下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? 
});

答

其中一个方法可以博传递ContentDialog as 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}"/>

和invokation：

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

我试过了你的代码，但我只是收到一个错误，说Action没有带1个参数。我尝试使用CommandHandler，并创建一个RelayCommand类。两者都没有工作：/ – Fred

@Fred它取决于你的命令类是如何实现的。一般来说，您应该有一个接受参数的实现。我发现你已经找到了合适的命令类，因此我不会编辑答案。 – Romasz

答

我找到了答案，我的问题。我创建了一个新的Class，它实现了名为RelayCommand的ICommand，输入来自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); 
    } 
}

我不得不添加<object>的行动，因为视图模型逻辑不停地抱怨这一行动并不需要的参数。

使用带MVVM的ICommand在UWP中显示ContentDialog

相关推荐