c# - WPF:布局的最佳实践是什么

Question

我正试图掌握在我的 WPF 应用程序中设置样式/绑定(bind)数据的不同方式。为了最好地理解这一点，我想就如何设计我的具体示例提出建议/帮助。

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

我的第一个问题是关于多少“信息”，什么应该放入 View ，然后是什么以及如何在我的 resources.xaml 中设置样式？这可能含糊不清，但我想了解我应该查看哪些控件以包含在我的 View 中以及我应该查看哪些代码以放入我的样式。

图片示例

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>

Resources.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

我不确定我对您的问题了解多少，但您首先问的是要在资源中放置什么以及在主布局中放置什么。

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

我应该查看哪些控件以包含在我的 View 中以及我应该查看哪些代码以放入我的样式。

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

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

我使用此 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>

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