html - 在 XSL 中像 WPF WrapPanel 一样显示图像

Question

我有一个 XML 数据文件，其中包含许多图像路径，这些图像路径使用以下 XSL 样式显示在表格中

<?xml version='1.0'?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<xsl:for-each select="ArrayOfShoeprintDetails/ShoeprintDetails">
<table border="2" Width="50" cellspacing="0" cellpadding="5" style="font-family:arial">
<tr>
<th align="right">Reference</th>
<td>
<xsl:value-of select="Reference"/>
</td>
</tr>
<tr>
<th align="right">Images</th>
<td>
<xsl:for-each select="Images/ShoeImage">
<img width="100" height="auto">
<xsl:attribute name="src">
<xsl:value-of select="DecryptedFilename"/>
</xsl:attribute>
</img>
</xsl:for-each>
</td>
</tr>
</table>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

如您所见，为 XML 文件中的每个根元素生成一个表，其中两行用于引用和图像。

图像设计为显示在第二行第二列的嵌套表格中。

问题是表格不断扩展以将图像保持在一行中(最多可能有 15 张图像。但是我希望图像“换行”以便最多显示 5 张图像，然后它在表格中开始一个新行，但我不知道如何完成。

我试过不使用嵌套表格，但这会以堆叠方式显示图像，一个堆叠在另一个之上，而不是并排显示。

这背后的基本原理是我想打印文档并且打印时一些图像被剪切掉。

• XSL(不是 FO)
• XML
• 在 WPF 浏览器控件中显示
• 在 C# 中动态创建 XSL 文件
• Visual Studio 2012

编辑

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="ReportTemplate.xsl"?>
<ArrayOfShoeprintDetails xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<ShoeprintDetails>
<Reference>Item 1</Reference>
<Images>
<ShoeImage>
<DecryptedFilename>C:\79136</DecryptedFilename>
</ShoeImage>
<ShoeImage>
<DecryptedFilename>C:\79137</DecryptedFilename>
</ShoeImage>
<ShoeImage>
<DecryptedFilename>C:\79138</DecryptedFilename>
</ShoeImage>
<ShoeImage>
<DecryptedFilename>C:\79139</DecryptedFilename>
</ShoeImage>
<ShoeImage>
<DecryptedFilename>C:\79140</DecryptedFilename>
</ShoeImage>
<ShoeImage>
<DecryptedFilename>C:\79141</DecryptedFilename>
</ShoeImage>
<ShoeImage>
<DecryptedFilename>C:\79142</DecryptedFilename>
</ShoeImage>
<Images>
</ShoeprintDetails>
</ArrayOfShoeprintDetails>

Answer 1

如果您希望每行只有五张图片(并且不关心每张图片的大小)，则可以采取的方法是从选择每行中最先出现的图片开始；即第 1、6、11(等)图像

 <xsl:for-each select="Images/ShoeImage[position() mod 5 = 1]">

然后，对于每个这样的图像，您将获得构成该行的图像，就像这样

 <xsl:for-each select=".|following-sibling::ShoeImage[position() &lt; 5]" />

试试这个 XSLT

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:param name="imagesPerRow" select="5" />
<xsl:template match="/">
  <xsl:for-each select="ArrayOfShoeprintDetails/ShoeprintDetails">
    <table border="2" Width="50" cellspacing="0" cellpadding="5" style="font-family:arial">
      <tr>
        <th align="right">Reference</th>
        <td><xsl:value-of select="Reference"/></td>
      </tr>
      <xsl:for-each select="Images/ShoeImage[position() mod $imagesPerRow = 1]">
        <tr>
          <th align="right">Images</th>
          <td>
             <xsl:apply-templates select=".|following-sibling::ShoeImage[position() &lt; $imagesPerRow]" />
          </td>
        </tr>
      </xsl:for-each>
    </table>
  </xsl:for-each>
</xsl:template>

<xsl:template match="ShoeImage">
   <img width="100" height="auto" src="{DecryptedFilename}" />
</xsl:template>
</xsl:stylesheet>

请注意，我在这里参数化了“5”，并且我还切换到使用 xsl:apply-templates 只是为了减少缩进!

另请注意在创建 src 属性时使用属性值模板。花括号 { } 表示要计算的表达式，而不是按字面意义输出。

编辑:这更像是一个 HTML 问题，即 XSLT，但如果您只想显示一次“图像”标题单元格，请尝试以下操作:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes" />
<xsl:param name="imagesPerRow" select="5" />
<xsl:template match="/">
  <xsl:for-each select="ArrayOfShoeprintDetails/ShoeprintDetails">
    <table border="2" Width="50" cellspacing="0" cellpadding="5" style="font-family:arial">
      <tr>
        <th align="right">Reference</th>
        <td><xsl:value-of select="Reference"/></td>
      </tr>
      <xsl:variable name="images" select="Images/ShoeImage" />
      <xsl:for-each select="$images[position() mod $imagesPerRow = 1]">
        <tr>
          <xsl:if test="position() = 1">
             <th align="right" rowspan="{ceiling(count($images) div 5)}">Images </th>
          </xsl:if>
          <td>
             <xsl:apply-templates select=".|following-sibling::ShoeImage[position() &lt; $imagesPerRow]" />
          </td>
        </tr>
      </xsl:for-each>
    </table>
  </xsl:for-each>
</xsl:template>

<xsl:template match="ShoeImage">
   <img width="100" height="auto" src="{DecryptedFilename}" />
</xsl:template>
</xsl:stylesheet>