horizontal list view in asp.net

问题:

Here is my code for listView and 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>

By this code , listView show images vertically , I want to show my images horizontally.
How can I change the orientation of listView ?

回答1:

If you just want to show the images in a single row, you can just put them in the columns of a single row. Try rewriting the listview markup as follows (move table,tr markups into 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:

I used this code once

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

give it a shot

回答3:

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

You can use a WrapPanel instead of the StackPanel.

回答4:

Ideally should be able to rotate HTML element (Img in your case) by a specified degree. I seen something similar which rotate text through CSS and hope it make no difference in case of img since both are html elements

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

You can find more information here on these blog1, blog2.