Horizontale Listenansicht auf den Bildschirm beschränken?

Ich habe eine listview, die horizontal wiederholt, und es zeigt 20 Bilder an. Mit meiner Bildschirmauflösung ist Platz für 5 Bilder/Zeile, also sollte ich 4 Zeilen sehen.Horizontale Listenansicht auf den Bildschirm beschränken?

Leider zeigt es derzeit eine lange Reihe mit allen 20 Bildern. Es wird auch die horizontale Bildlaufleiste angezeigt.

Meine Frage: Wie kann ich den Raum auf meine Bildschirmauflösung beschränken, so dass ich die 4 Zeilen mit Bildern und keine horizontale Bildlaufleiste sehen? Alles sollte auf dem Bildschirm angezeigt werden. Wenn überhaupt, sollte eine vertikale Bildlaufleiste vorhanden sein, um nach unten zu scrollen.

Ich habe einige CSS hinzugefügt, um die Größe des Körpers auf 100% zu begrenzen, aber nichts hat sich geändert. Ich habe auch das div innerhalb <body> auf 100% gesetzt, habe aber auch nichts gemacht.

Hier ist der Code:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <style type="text/css"> 
    body, html 
    { 
     height: 100%; 
     width: 100%; 
     margin: 0; 
     padding: 0; 
    } 
</style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div style="width:100%"> 
     <asp:DataList id="DataListImages" RepeatDirection="Horizontal" RepeatLayout="Table" 
       RepeatColumns="0" runat="server"> 
      <HeaderStyle BackColor="#aaaadd"> 
      </HeaderStyle> 
      <AlternatingItemStyle BackColor="Gainsboro"> 
      </AlternatingItemStyle> 
      <HeaderTemplate> 
      </HeaderTemplate> 
      <ItemTemplate> 
       <div style="width: 192px; height: 162px"></div> 
       <asp:Image runat="server" id="ProductImage" 
        AlternatingText='<%# DataBinder.Eval(Container.DataItem, "Name") %>' 
        ImageUrl='<%# Eval("image_path","~/Styles/Images/{0}") %>' /> 
      </ItemTemplate> 
     </asp:DataList> 

    </div> 
    </form> 
</body> 
</html>

Quelle

2016-04-14 rbhat

Zunächst einmal, das ist ein Datalist - Sie müssen das beheben.

Sie benötigen einen Blick auf die Listview GroupTemplate nehmen:

Using GroupTemplate in ASP.Net ListView Control(Tiled Display)

Sie können die Aufmerksamkeit auf die Dimensionen der Bilder und die Dateigrößen von einem Performance-Sicht zu zahlen bereit sind.

Hier ist ein Beispiel Listview GroupPlaceHolder der Verwendung ein bestimmtes Layout zu erreichen:

<asp:ListView ID="galleryView" runat="server" OnPagePropertiesChanging="ChangePage" 
     GroupPlaceholderID="groupPlaceHolder" ItemPlaceholderID="itemPlaceholder" 
GroupItemCount="5"> 
     <LayoutTemplate>    
      <div ID="groupPlaceHolder" runat="server"></div> 
     </LayoutTemplate> 
     <GroupTemplate>  
      <div ID="itemPlaceholder" runat="server"></div> 
     </GroupTemplate> 
     <ItemTemplate> 
      <asp:Image runat="server" id="ProductImage" 
      AlternatingText='<%# DataBinder.Eval(Container.DataItem, "Name") %>' 
      ImageUrl='<%# Eval("image_path","~/Styles/Images/{0}") %>' /> 
     </ItemTemplate> 
     <GroupSeparatorTemplate> 
      <div id="Div1" runat="server"> 
       <div style="clear:both"><br /></div> 
      </div> 
     </GroupSeparatorTemplate> 
    </asp:ListView> 
    <div style="clear:both; padding-top:8px; padding-left:8px;"> 
     <asp:DataPager ID="DataPager1" runat="server" PagedControlID="galleryView" PageSize="40"> 
      <Fields> 
       <asp:NumericPagerField ButtonCount="20" /> 
      </Fields> 
     </asp:DataPager> 
    </div>

Quelle

2016-04-14 17:51:53 IrishChieftain

Es ist eine Lösung etwas, aber das Problem hier ist, dass ich angeben, wie viele Elemente pro Zeile paßt. – rbhat

Sie können den GroupItemCount auf die Anzahl der Bilder pro Zeile festlegen. Sehen Sie sich die MSDN-Dokumentation an. Ich werde versuchen und eine Probe für Sie veröffentlichen. – IrishChieftain

Aber ich möchte nicht die Anzahl der Bilder pro Zeile angeben. Wenn das der Fall wäre, könnte ich 'RepeatColumns' -Eigenschaft in das Code-Snippet setzen, das ich gepostet habe, und es würde Ihrem Beispiel ähnlich sein. – rbhat

Horizontale Listenansicht auf den Bildschirm beschränken?

Antwort

Verwandte Themen