WPF：布局的最佳实践是什么

Question

我正在尝试掌握 WPF 应用程序中设置样式/绑定数据的不同方式。为了更好地理解这一点，我希望获得关于如何设计我的具体示例的建议/帮助。

下面的屏幕截图展示了我想要的外观。我还包括了我已经编写的代码。然而，这只是使用简单的 StackPanel 输出主标题和下面的文本。

我的第一个问题是关于多少“信息”，以及应该将哪些内容放入视图中，然后在我的 resources.xaml 中应设置哪些样式以及如何设置样式？这可能很模糊，但我想了解我应该考虑将哪些控件包含在我的视图中，以及我应该考虑将哪些代码放入我的样式中。

图片示例

MyView.xaml

<ScrollViewer VerticalScrollBarVisibility="Auto" Padding="20 0">
    <ItemsControl ItemsSource="{Binding MyModelList}" ItemTemplate="{StaticResource MyViewDataTemplate}" >
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Vertical" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</ScrollViewer>

资源.xaml

<DataTemplate x:Key="MyViewDataTemplate">
    <Border BorderThickness="0 0 0 1" BorderBrush="Black">
        <StackPanel>
            <Label Content="{Binding Heading}" FontSize="24" />
            <Label>
                <Label.Content>
                    <TextBlock>
                        <TextBlock.Text>
                            <MultiBinding StringFormat="Card: {0}, {1}">
                                <Binding Path="PropertyA"></Binding>
                                <Binding Path="PropertyB"></Binding>
                            </MultiBinding>
                        </TextBlock.Text>
                    </TextBlock>
                </Label.Content>
            </Label>
        </StackPanel>
    </Border>
</DataTemplate>

Answer 1

我不确定我对你的问题有多少理解，但你问的第一件事是在资源中放置什么以及在主布局中放置什么。

一个简单的规则是将可重用的代码放在资源中并放在主布局中。例如，假设您必须在用户界面的许多地方显示文本框。现在，您可以将文本框背景、字体、前景、大小等放入资源中，以便每次使用文本框时都可以轻松地从资源中重用这些信息。同样，如果发生更改，您只需要在单个位置进行更改，而不是每个文本框本身。

what are the controls I should be looking at to include in my View和what code should I be looking at to put in my styles.

好吧，关于第一部分，这完全取决于您想要实现的场景。从图像示例来看，网格可以与三列一起使用，因为看起来您的 UI 分为三个部分，即标题，然后是两个文本块。在第一列内放置一个带有两个文本块的堆栈面板（一个用于标题，一个用于其下方的小描述），在接下来的两列中，您可以在每列中放置一个文本块。

现在，关于第二点，一旦将文本块放入网格列中，您就可以将蓝色背景等样式信息放入资源中

我使用此 XAML 在图像中创建结构

 <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <StackPanel Orientation="Vertical" Grid.Column="0">
            <TextBlock FontSize="20">Hilighted</TextBlock>
            <TextBlock FontSize="10">Card</TextBlock>
        </StackPanel>

        <StackPanel Orientation="Vertical" Grid.Column="1">
            <TextBlock FontSize="20">0</TextBlock>
            <TextBlock FontSize="10">Text</TextBlock>
        </StackPanel>

        <StackPanel Orientation="Vertical" Grid.Column="2">
            <TextBlock FontSize="20">0</TextBlock>
            <TextBlock FontSize="10">Text</TextBlock>
        </StackPanel>
    </Grid>

现在这些是没有任何样式的普通控件。您可以将样式放入资源中并将它们应用到文本块