如何显示具有来自视图模型的多个输入字段的内容对话框

Question

我正在构建一个 C# UWP 应用程序，其中单击视图中的按钮会在 viewmodel（不是代码）中引发命令（使用 System.Windows.Input.IComand）后面），它构建了一种输入字段形式，如 Name:____ phone:____ 等，并将其显示在 UI/视图上。

• 我不想将<ContentDialog></ContentDialog> 保留在 查看。

到目前为止我所做的是

我认为的按钮：

<CommandBar>
 <AppBarButton x:Name="buttonNew" Command="{Binding AddClick}" />
</CommandBar>

• 后面代码中的ViewModel对象被设置为DataContext 查看

在视图模型中：

public ICommand AddClick=> new RelayCommand(Add);

private async void Add()
{
    TextBox input = new TextBox()
    {
        PlaceholderText = "Name",
    };

    var contentDialog = new ContentDialog
    {
        Title = "Add a Person",
        Content = input,                    
        FullSizeDesired = true,
        PrimaryButtonText = "Add",
        CloseButtonText = "Cancel"
    };
    await contentDialog.ShowAsync();
}

如您所见，我能够显示/触发带有一个输入字段和 2 个按钮的内容对话框。

我的问题是：

1. 如何添加更多的输入字段，就像我们在视图模型的代码中添加一个
   <StackPanel></StackPanel> 并分配它 到内容对话框的内容？
2. 如何相应地调整它的大小以使所有字段都正确显示并且不会随意显示，因为我没有在 Xaml 中对此进行编码？

Answer 1

从一般的应用构建实践来看，推荐使用XAML创建UI来创建自定义ContentDialog。

您不必在 View 中编写 ContentDialog 的 XAML 代码，您可以在 Visual Studio 中添加新项目，选择 Content Dialog 模板，并创建一个从 ContentDialog 派生的自定义对话框。

然后使用类似下面的代码：

MyCustomDialog.xaml

<ContentDialog
    ...
    Title="Add a Person"
    FullSizeDesired="True"
    PrimaryButtonText="Add"
    CloseButtonText="Cancel"
    PrimaryButtonClick="ContentDialog_PrimaryButtonClick">

    <StackPanel>
        
        <TextBox Header="Name" x:Name="NameBox" PlaceholderText="Name"
                 HorizontalAlignment="Stretch"/>
        
        <TextBox Header="Phone" x:Name="PhoneBox" PlaceholderText="Phone"
                 Margin="0,15,0,0" HorizontalAlignment="Stretch"
                 InputScope="Number"/>
        
    </StackPanel>
</ContentDialog>

ViewModel.cs

private async void Add()
{
    var dialog = new MyCustomDialog();
    await dialog.ShowAsync();
}

---

如果坚持使用C#代码创建ContentDialog，则需要将XAML中的标签转换成对应的类，但这种方法不易调试。

private async void Add()
{
    var container = new StackPanel();

    TextBox nameBox = new TextBox()
    {
        PlaceholderText = "Name",
        Header = "Name",
        HorizontalAlignment = HorizontalAlignment.Stretch
    };

    TextBox phoneBox = new TextBox()
    {
        PlaceholderText = "Phone",
        Header = "Phone",
        HorizontalAlignment = HorizontalAlignment.Stretch,
        Margin = new Thickness(0, 15, 0, 0)
    };

    container.Children.Add(nameBox);
    container.Children.Add(phoneBox);

    var contentDialog = new ContentDialog
    {
        Title = "Add a Person",
        Content = container,
        FullSizeDesired = true,
        PrimaryButtonText = "Add",
        CloseButtonText = "Cancel"
    };
    await contentDialog.ShowAsync();
}

XAML中的标签其实就是C#中对应的类，从你提供的代码来看，ContentDialog全屏显示。您提到要正确显示字段，如果您的意思是TextBox中输入的字符串太长，文本显示不完整，您可以将TextBox.TextWrapping属性设置为True强>。