使用ICommand和MVVM在UWP中显示ContentDialog

Question

I'm creating a UWP application where I want a user to be able to upload photos. I have a ContentDialog with a Button and two TextBoxes . The ContentDialog should pop up when the user presses the "Upload Photo" Button . How can I do this using MVVM?

The logic for finding the file and posting the files to the database are already done, only the UI is remaining.

Here is my 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>

So far, here is my C# file (MyProfileViewModel):

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

Answer 1

One of the methods may bo to pass the ContentDialog as CommandParameter . For example like this:

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

and invokation:

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

Answer 2

I found the answer to my problem. I created a new Class that implements ICommand called RelayCommand, with input from Romasz .

His ViewModel and binding in the XAML was correct. I just had to adjust my ICommands. Here is my 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);
    }
}

I had to add <object> for the Action, since the ViewModel logic kept complaining that Action did not take a parameter.