使用帶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? 
});

來源

2017-12-02 Fred

其中一個方法可以博傳遞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(); });

來源

2017-12-03 08:38:11 Romasz

我試過了你的代碼，但我只是收到一個錯誤，說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>的行動，因爲視圖模型邏輯不停地抱怨這一行動並不需要的參數。

來源

2017-12-03 16:38:42 Fred

使用帶MVVM的ICommand在UWP中顯示ContentDialog

回答

相關問題