WPF OpenFileDialog 与 MVVM 模式?
-
06-07-2019 - |
题
我刚刚开始学习 WPF 的 MVVM 模式。我撞墙了: 当您需要显示 OpenFileDialog 时该怎么办?
这是我尝试使用它的示例用户界面:
单击浏览按钮时,应显示一个 OpenFileDialog。当用户从 OpenFileDialog 中选择文件时,文件路径应显示在文本框中。
我如何使用 MVVM 做到这一点?
更新: :我如何使用 MVVM 做到这一点并使其可进行单元测试?下面的解决方案不适用于单元测试。
解决方案
我通常做的是为执行此功能的应用程序服务创建一个接口。在我的例子中,我假设你正在使用像MVVM Toolkit或类似的东西(所以我可以得到一个基本的ViewModel和一个RelayCommand)。
这是一个用于执行OpenFileDialog和OpenFile等基本IO操作的极其简单的接口示例。我在这里展示它们,所以你不认为我建议你用一种方法创建一个接口来解决这个问题。
public interface IOService
{
string OpenFileDialog(string defaultPath);
//Other similar untestable IO operations
Stream OpenFile(string path);
}
在您的应用程序中,您将提供此服务的默认实现。这是你如何消费它。
public MyViewModel : ViewModel
{
private string _selectedPath;
public string SelectedPath
{
get { return _selectedPath; }
set { _selectedPath = value; OnPropertyChanged("SelectedPath"); }
}
private RelayCommand _openCommand;
public RelayCommand OpenCommand
{
//You know the drill.
...
}
private IOService _ioService;
public MyViewModel(IOService ioService)
{
_ioService = ioService;
OpenCommand = new RelayCommand(OpenFile);
}
private void OpenFile()
{
SelectedPath = _ioService.OpenFileDialog(@"c:\Where\My\File\Usually\Is.txt");
if(SelectedPath == null)
{
SelectedPath = string.Empty;
}
}
}
所以这很简单。现在最后一部分:可测试性。这个应该是显而易见的,但我会告诉你如何为此做一个简单的测试。我使用Moq进行存根,但你可以使用你想要的任何东西。
[Test]
public void OpenFileCommand_UserSelectsInvalidPath_SelectedPathSetToEmpty()
{
Mock<IOService> ioServiceStub = new Mock<IOService>();
//We use null to indicate invalid path in our implementation
ioServiceStub.Setup(ioServ => ioServ.OpenFileDialog(It.IsAny<string>()))
.Returns(null);
//Setup target and test
MyViewModel target = new MyViewModel(ioServiceStub.Object);
target.OpenCommand.Execute();
Assert.IsEqual(string.Empty, target.SelectedPath);
}
这可能适合你。
CodePlex上有一个名为“SystemWrapper”的库。 ( http://systemwrapper.codeplex.com )可能使您无需执行批次这种事情。看起来不支持FileDialog,所以你肯定要为那个编写一个接口。
希望这有帮助。
修改强>:
我似乎记得你喜欢用于伪装框架的TypeMock Isolator。这是使用Isolator的相同测试:
[Test]
[Isolated]
public void OpenFileCommand_UserSelectsInvalidPath_SelectedPathSetToEmpty()
{
IOService ioServiceStub = Isolate.Fake.Instance<IOService>();
//Setup stub arrangements
Isolate.WhenCalled(() => ioServiceStub.OpenFileDialog("blah"))
.WasCalledWithAnyArguments()
.WillReturn(null);
//Setup target and test
MyViewModel target = new MyViewModel(ioServiceStub);
target.OpenCommand.Execute();
Assert.IsEqual(string.Empty, target.SelectedPath);
}
希望这也有帮助。
其他提示
WPF应用程序框架(WAF) 提供了Open和SaveFileDialog。
Writer示例应用程序显示了如何使用它们以及如何对代码进行单元测试。
首先,我建议你先从 WPF MVVM工具包。这为您提供了很多用于项目的命令。自MVVM模式引入以来已经成名的一个特殊功能是RelayCommand(当然还有manny其他版本,但我只是坚持最常用的)。它是ICommand接口的一个实现,允许您在ViewModel中创建一个新命令。
回到你的问题,这是一个你的ViewModel可能是什么样子的例子。
public class OpenFileDialogVM : ViewModelBase
{
public static RelayCommand OpenCommand { get; set; }
private string _selectedPath;
public string SelectedPath
{
get { return _selectedPath; }
set
{
_selectedPath = value;
RaisePropertyChanged("SelectedPath");
}
}
private string _defaultPath;
public OpenFileDialogVM()
{
RegisterCommands();
}
public OpenFileDialogVM(string defaultPath)
{
_defaultPath = defaultPath;
RegisterCommands();
}
private void RegisterCommands()
{
OpenCommand = new RelayCommand(ExecuteOpenFileDialog);
}
private void ExecuteOpenFileDialog()
{
var dialog = new OpenFileDialog { InitialDirectory = _defaultPath };
dialog.ShowDialog();
SelectedPath = dialog.FileName;
}
}
来自 MVVM Toolkit 。这就是XAML的样子。
<TextBox Text="{Binding SelectedPath}" />
<Button Command="vm:OpenFileDialogVM.OpenCommand" >Browse</Button>
和你的XAML.CS代码。
DataContext = new OpenFileDialogVM();
InitializeComponent();
多数民众赞成。
随着您对命令的熟悉程度越来越高,您还可以设置关于何时禁用“浏览”按钮等的条件。我希望能够指向您想要的方向。
从我的角度来看,最好的选择是棱镜库和InteractionRequests。打开对话框的操作仍然在xaml中,并且从Viewmodel触发,而Viewmodel不需要知道有关视图的任何信息。
另见
https://plainionist.github.io///Mvvm-Dialogs/一>
例如见:
在我看来,最好的解决方案是创建自定义控件。
我通常创建的自定义控件由以下部分组成:
- 文本框或文本块
- 以图像为模板的按钮
- 文件路径将被包装到的字符串依赖属性
所以 *.xaml 文件会是这样的
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Text="{Binding Text, RelativeSource={RelativeSource AncestorType=UserControl}}"/>
<Button Grid.Column="1" Click="Button_Click">
<Button.Template>
<ControlTemplate>
<Image Grid.Column="1" Source="../Images/carpeta.png"/>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
和 *.cs 文件:
public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text",
typeof(string),
typeof(customFilePicker),
new FrameworkPropertyMetadata(null,
FrameworkPropertyMetadataOptions.BindsTwoWayByDefault | FrameworkPropertyMetadataOptions.Journal));
public string Text
{
get
{
return this.GetValue(TextProperty) as String;
}
set
{
this.SetValue(TextProperty, value);
}
}
public FilePicker()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
OpenFileDialog openFileDialog = new OpenFileDialog();
if(openFileDialog.ShowDialog() == true)
{
this.Text = openFileDialog.FileName;
}
}
最后你可以将它绑定到你的视图模型:
<controls:customFilePicker Text="{Binding Text}"/>