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

我正在创建一个UWP应用程序,我希望用户能够上传照片。我有ContentDialogButton和两个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(); }); 

回答:

我找到了答案,我的问题。我创建了一个新的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 的全部内容, 来源链接: utcz.com/qa/258624.html

回到顶部