WPF前端XAML代码如何用后台XAML.CS代码实现？

Question

问题：下列WPF前端XAML代码如何用后台XAML.CS代码实现？

背景：需根据后台返回List个数动态生成数据方块，呈如图所示分布。

前端代码：

    <!--动态生成指令信息方块的可滚动区域begin-->
    <ScrollViewer  VerticalScrollBarVisibility="Auto" Height="627" Margin="0,174,10,0" Grid.Row="1" VerticalAlignment="Top" HorizontalAlignment="Right" Width="533" >
        <!--居中对齐-->
        <StackPanel x:Name="StackPanelMain" Height="auto" Width="530"  VerticalAlignment="Center">
            <!--左数据方块-->
            <Grid  Height="100" Margin="25,10,270,10" >
                <Grid.Resources>
                    <Style TargetType="TextBlock">
                        <Setter Property="FontSize" Value="16"/>
                        <Setter Property="FontFamily" Value="微软雅黑"/>
                    </Style>
                    <Style TargetType="Border">
                        <Setter Property="BorderBrush" Value="Black"/>
                        <Setter Property="BorderThickness" Value="1"/>
                    </Style>
                </Grid.Resources>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="80"/>
                    <ColumnDefinition Width="150"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Border Grid.RowSpan="4"  Grid.ColumnSpan="4" Background="Yellow"/>

                <TextBlock Grid.Row="0" Grid.Column="0" Text="拣货单:"/>
                <TextBlock Grid.Row="0" Grid.Column="1" Text="ME0000052"/>
                <TextBlock Grid.Row="1" Grid.Column="0" Text="指令号:"/>
                <TextBlock Grid.Row="1" Grid.Column="1" Text="22090700006"/>
                <TextBlock Grid.Row="2" Grid.Column="0" Text="料号:"/>
                <TextBlock Grid.Row="2" Grid.Column="1" Text="HQ11730306009"/>
                <TextBlock Grid.Row="3" Grid.Column="0" Text="指令需求:"/>
                <TextBlock Grid.Row="3" Grid.Column="1" Text="10009"/>
            </Grid>
            <!--右数据方块-->
            <Grid Height="100" Margin="270,-110,25,10" >
                <Grid.Resources>
                    <Style TargetType="TextBlock">
                        <Setter Property="FontSize" Value="16"/>
                        <Setter Property="FontFamily" Value="微软雅黑"/>
                    </Style>
                    <Style TargetType="Border">
                        <Setter Property="BorderBrush" Value="Black"/>
                        <Setter Property="BorderThickness" Value="1"/>
                    </Style>
                </Grid.Resources>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="80"/>
                    <ColumnDefinition Width="150"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Border Grid.RowSpan="4"  Grid.ColumnSpan="4" Background="Yellow"/>

                <TextBlock Grid.Row="0" Grid.Column="0" Text="拣货单:"/>
                <TextBlock Grid.Row="0" Grid.Column="1" Text="ME0000052"/>
                <TextBlock Grid.Row="1" Grid.Column="0" Text="指令号:"/>
                <TextBlock Grid.Row="1" Grid.Column="1" Text="22090700006"/>
                <TextBlock Grid.Row="2" Grid.Column="0" Text="料号:"/>
                <TextBlock Grid.Row="2" Grid.Column="1" Text="HQ11730306009"/>
                <TextBlock Grid.Row="3" Grid.Column="0" Text="指令需求:"/>
                <TextBlock Grid.Row="3" Grid.Column="1" Text="10009"/>
            </Grid>
        </StackPanel>
    </ScrollViewer>
    <!--动态生成指令信息按钮区域end-->

Answer 1

• 请看👉 ：《wpf/XAML-XAML语言Grid布局做的计算器》