Question

以下是listView和Data Pager，

的代码

 <asp:ListView runat="server" ID="PageHorizon">
        <LayoutTemplate>
            <asp:PlaceHolder ID="itemPlaceholder" runat="server">  
            </asp:PlaceHolder>
        </LayoutTemplate>
        <ItemTemplate>
            <table width="100%">
                <tr>
                    <td width="25%">
                            <img src='<%#Eval("ImagePath")%>' alt="Single Image"  
                            width="64px" height="64px" />
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:ListView>
    <br />
    <hr />
    <asp:DataPager ID="DataPager1" runat="server" PagedControlID="PageHorizon"  
     PageSize="3">
        <Fields>
            <asp:NextPreviousPagerField ShowFirstPageButton="True"   
            ShowNextPageButton="True" />
            <asp:NumericPagerField />
            <asp:NextPreviousPagerField ShowLastPageButton="True"   
            ShowPreviousPageButton="True" />
        </Fields>
    </asp:DataPager>

通过此代码，listView垂直显示图像，我想水平显示我的图像如何更改listView的方向？

Answer 1

如果您只想将图像显示在一行中，则可以将它们放在单行的列中。尝试重写listview标记，如下所示（将table，tr标记移至LayoutTemplate）：

<asp:ListView runat="server" ID="PageHorizon">
    <LayoutTemplate>
        <table>
        <tr>
           <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
        </tr>
        </table>
    </LayoutTemplate>
    <ItemTemplate>  
            <td>
                <img src='<%#Eval("ImagePath")%>' alt="Single Image"  
                width="64px" height="64px" />
            </td>       
    </ItemTemplate>
</asp:ListView>

Answer 2

我曾使用过这段代码

<asp:ListView ID="listview1" runat="server">
    <ItemTemplate>
        <table  style="display: inline-block;">
            <tr>
                <td>
                    <asp:Image ID="Image1" runat="server" ImageUrl="<%#Bind('ImageURL') %>" CssClass="max75" />
                </td>
            </tr>
        </table>
    </ItemTemplate>
</asp:ListView>

试一试

Answer 3

<ListView.ItemsPanel>
   <ItemsPanelTemplate>
      <StackPanel Orientation="Horizontal" />
   </ItemsPanelTemplate>
</ListView.ItemsPanel>

您可以使用WrapPanel而不是StackPanel。

Answer 4

理想情况下应该能够按指定的程度旋转HTML元素（在您的情况下为Img）。我看到类似的东西通过CSS旋转文本，并希望它在img的情况下没有区别，因为它们都是html元素

/* for firefox, safari, chrome, etc. */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

您可以在blog1，blog2找到更多相关信息。

asp.net中的水平列表视图

4 个答案: