UI 实现，最佳途径答案

【问题标题】：UI Implementation, best route to takeUI 实现，最佳途径
【发布时间】：2016-07-28 12:11:50
【问题描述】：

我正在开发一个小型应用程序，我需要一些帮助来实施。

要点是我想创建一个网格状容器，其中包含动态数量的相同柱状结构。每个列状结构内部都有一些用户可以与之交互的文本字段和单选按钮。

我一直在研究一些可能会有所帮助的不同 WPF 对象，但我已经不知所措了。

我想到的一些事情：

柱状结构可以是自定义构建的用户控件。此 UserControl 将具有处理各种按钮和文本字段交互的所有逻辑。
我们可以使用设置为水平的 StackPanel 来容纳这些用户控件。从我收集到的信息来看，StackPanel 似乎是我的理想容器。

我的一些问题：

我需要为 UserControl 创建一个 .xaml 吗？
如果添加了更多可以显示的 UserControl，StackPanel 是否提供了一种使用水平滚动条从左到右滚动的方法？
是否需要自定义定义 UserControl 的大小，或者是否可以只指定设置的宽度并使用 StackPanel 的高度？
有没有更简单或更合适的解决方案？

最后，我附上了一个非常粗略的草图，以提供我想要做什么的视觉概念：

【问题讨论】：

1. “我需要为 UserControl 创建一个 .xaml 吗？”是的，UserControl 由 XAML 和代码组成。 2. 将 UserControl 放入 ItemsControl 的 ItemTemplate 中。这样，它的 DataContext 就绑定到 ItemsControl 的 ItemsSource 属性绑定到的项集合的适当数据项。 3. 为 ItemsControl 的 ItemsPanel 使用水平 StackPanel。 4. 将 ItemsControl 放入 ScrollViewer。
@Clemens 如果问的不是太多，您能否举个例子说明 XAML 对于 ItemsControl 的外观？
您可能想从这里开始阅读：Data Templating Overview。

标签： c# wpf user-interface user-controls

【解决方案1】：

我会尽力回答你的问题：

您一定要为控件的每个部分提取一个控件，该控件被多次使用。

堆栈面板是一个容器，类似于 HTML 中的 div。如果要显示滚动条，最好使用ScrollViewer 而不是Stackpanel。
如果设置了 StackPanel/ScrollViewer 的高度，则其中的控件将遵守该限制，除非您实际为子元素设置了明确的高度。如果 Stackpanel/ScrollViewer 的高度未设置，子元素将被拉伸（因此，为了适应父元素，您必须指定高度）。但是，您可以决定如何做。
我认为这是为每个冗余部分提取控件并使用 ScrollViewer 的上帝解决方案！

如果有不清楚的地方，请告诉我！祝你好运:)

【讨论】：

【解决方案2】：

我将首先阅读一些与 WPF 配合良好的 MVVM 模式。除此之外，我会使用 ListView 而不是水平堆栈面板和滚动查看器。我希望我的数据垂直扩展而不是水平扩展。这里有一些示例代码可供使用。

这是你的模型类：

public enum CustomOption
{
    Option1,
    Option2,
    Option3
}

public class Item
{
    public string Value1 { get; set; }

    public string Value2 { get; set; }

    public string Value3 { get; set; }

    CustomOption Option { get; set; }
}

这是您的 ViewModel：

public class MainWindowVM
{
    public ObservableCollection<Item> Items { get; set; }
}

这是你的主窗口：

<ScrollViewer
    <ListView ItemsSource="{Binding Items}">
        <ListView.Resources>
            <ObjectDataProvider x:Key="EnumValues" MethodName="GetValues" ObjectType="{x:Type System:Enum}">
                <ObjectDataProvider.MethodParameters>
                    <x:Type TypeName="local:CustomOption"/>
                </ObjectDataProvider.MethodParameters>
            </ObjectDataProvider>
        </ListView.Resources>
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Value1" Margin="5"/>
                    <TextBox Text="{Binding Value1}" Margin="2"/>
                    <TextBlock Text="Value2" Margin="5"/>
                    <TextBox Text="{Binding Value2}" Margin="2"/>
                    <TextBlock Text="Value3" Margin="5"/>
                    <TextBox Text="{Binding Value3}" Margin="2"/>
                    <TextBlock Text="Option" Margin="5"/>
                    <ComboBox ItemsSource="{Binding Source ={StaticResource EnumValues}}" SelectedItem="{Binding Option}" Margin="5"/>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ScrollViewer>

这是一个非常简单的示例，可以帮助您入门。您可以四处玩耍以获得更好看的样式和布局。我使用了 ComboBox 而不是我不喜欢的 RadioButtons。您还需要在某处将 MainWindow 的 DataContext 设置为 MainWindowVM。您现在可以在您的应用程序启动时执行此操作。

【讨论】：