问题:下列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-->