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个图像。但是我希望图像能够和＃34; Wrap＆＃34;所以最多可以说5个显示图像然后它在表格中开始一个新行，但我不知道如何实现这一点。

我尝试过不使用嵌套表，但这会将堆栈中的图像一个显示在另一个上面，而不是并排显示。

这背后的基本原理是我想打印文档，打印时会剪掉一些图像。

XSL（不是FO）
XML
在WPF浏览器控件中显示
使用C＃
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，但如果您只想显示“Images”标题单元格一次，请尝试以下操作：

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

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

1 个答案: