将API中的数据动态显示到WPF / C＃中

Display data from API, into WPF application.

将数据从API显示到WPF应用程序中。

Hello, Im creating an application for a questionnaire. It calls the data from the API and i would like to know what is the best way to display the information.

您好,我正在为问卷创建一个应用程序。它调用API中的数据,我想知道显示信息的最佳方式是什么。

The information displayed will have to be "questionnaire type" and will be attempted by users and saved into database with the selected values.

显示的信息必须是“问卷类型”,并且将由用户尝试并使用所选值保存到数据库中。

Thanks

1 个解决方案

#1

I already tried through textboxes that are dynamically created from a List, but setting the location of the textboxes tend to be full of errors

我已经尝试过通过List动态创建的文本框,但是设置文本框的位置往往会出错

Please have a look at StackPanel

请看看StackPanel

It stacks its child elements below or beside each other, dependening on its orientation.

它根据其方向将其子元素堆叠在彼此的下方或旁边。

With a stack panel you can place multiple elements atop of each other, see the sample from the link provided

使用堆栈面板,您可以将多个元素放在彼此的顶部,请参阅提供的链接中的示例

<StackPanel>
  <TextBlock Margin="10" FontSize="20">How do you like your coffee?</TextBlock>
  <Button Margin="10">Black</Button>
  <Button Margin="10">With milk</Button>
  <Button Margin="10">Latte machiato</Button>
  <Button Margin="10">Chappuchino</Button>
</StackPanel>

this will result in the following layout

这将导致以下布局

You can create these dynamically. Take the following template

您可以动态创建它们。采用以下模板

<StackLayout x:Name="QuestionStack">
  <TextBlock Margin="10" FontSize="20" x:Name="QuestionTextBlock" />
</StackLayout>

and in your code behind

并在你的代码后面

void DisplayQuestion(Question question)
{
    QuestionTextBlock.Text = question.QuestionText;
    foreach(var answer in question.Answers)
    {
        AddAnswerButton(answer);
    }
}

private void AddAnswer(Answer answer)
{
    QuestionStack.Children.Add(CreateButtonForAnswer(answer));
}

private Button CreateButtonForAnswer(Answer answer)
{
    var button new Button()
    {
        Content = answer.Text,
        Margin = 10
    }

    button.Click += (sender, eventArgs) => 
    {
        // handle button click
    };

    return button;
}

Please note: This is only one possibility. Without knowing more about your requirements it's hard to tell what you need exactly.

请注意:这只是一种可能性。如果不了解您的要求,很难确切地说出您的需求。

Edit:

Since you asked: You could for example create a custom control to display one question (I've replaced the Button with CheckBox and for sake of simplicity I've omitted the XAML, but it is not too hard to achieve the same results with XAML)

既然你问:你可以创建一个自定义控件来显示一个问题(我用CheckBox替换了Button,为了简单起见,我省略了XAML,但是用XAML实现相同的结果并不难)

class QuestionControl : ContentControl
{
    private Question question;

    private StackLayout QuestionStackLayout { get; }

    public QuestionControl()
    {
        QuestionStackLayout = new StackLayout();
        QuestionTextBlock = new TextBlock()
                                 {
                                     Margin = 10,
                                     FontSize = 20
                                 };
        QuestionStackLayout.Children.Add(QuestionTextBlock);
    }

    public Question Question 
    {
        get
        {
            return question;
        }
        set
        {
            question = value;
            DisplayQuestion();
        }
    }

    private void DisplayQuestion()
    {
        QuestionTextBlock.Text = question.QuestionText;
        foreach(var answer in question.Answers)
        {
            AddAnswerButton(answer);
        }
    }

    private void AddAnswer(Answer answer)
    {
        QuestionStack.Children.Add(CreateButtonForAnswer(answer));
    }

    private CheckBox CreateCheckBoxForAnswer(Answer answer)
    {
        var checkBox new CheckBox()
        {
            Content = answer.Text,
            Margin = 10
        }

        checkBox.Checked += (sender, eventArgs) => 
        {
            answer.IsSelected = (sender as CheckBox).IsChecked;
        };

        return checkBox;
    }
}

You can now stack instances of QuestionControl. Since the Answer-objects are updated by the CheckBox.Click event you can simply access QuestionControl.Question to get which answers are selected. You might think about deep copying the Question when setting QuestionControl.Question instead of just setting the reference, to avoid side effects.

您现在可以堆叠QuestionControl的实例。由于CheckBox对象由CheckBox.Click事件更新,您只需访问QuestionControl.Question即可获得选择的答案。在设置QuestionControl.Question而不是仅设置引用时,您可能会考虑深入复制问题,以避免副作用。

#1