Горизонтальный список в asp.net

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

Если вы просто хотите показать изображения в одной строке, вы можете просто поместить их в столбцы одной строки. Попробуйте переписать разметку списка следующим образом (переместить 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.