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

Question

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

• 我不想在视图中保留<ContentDialog></ContentDialog> 。

到目前为止我所做的是

在我看来按钮：

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

• 后面代码中的ViewModel对象设置为View的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>在视图模型的代码中赋值给Content Dialog的内容？
2. 如何相应地调整大小以使所有字段都正确显示并且不会随意显示，因为我没有在 Xaml 中对此进行编码？

Answer 1

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

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

然后使用类似于以下的代码：

我的自定义对话框.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>

视图模型.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 。