asp.net 中的水平列表视图答案

【问题标题】：horizontal list view in asp.netasp.net 中的水平列表视图
【发布时间】：2014-04-21 14:40:51
【问题描述】：

这是我的 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 的方向？

【问题讨论】：

标签： c# asp.net listview datapager

【解决方案1】：

如果您只想在单行中显示图像，您可以将它们放在单行的列中。尝试如下重写列表视图标记（将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>

【讨论】：

【解决方案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>

试一试

【讨论】：

【解决方案3】：

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

您可以使用 WrapPanel 代替 StackPanel。

【讨论】：

这是 asp.net，没有 WrapPanel :(