使用带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(); });
回答:
我找到了答案,我的问题。我创建了一个新的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