2016-04-14 15 views
0

Yatay olarak yinelenen bir listview sahibiyim ve 20 resim gösteriyor. Ekran çözünürlüğümle, 5 resim/satır için yer var, bu yüzden 4 satır görmeliyim.Yatay liste görünümünü ekran içindeki alana mı sınırlıyorsunuz?

Maalesef, şu anda 20 resmin tümünü içeren bir uzun satır görünüyor. Ayrıca yatay kaydırma çubuğunu da görüntülüyor.

Soruma Soru: Görüntüyü 4 satırlı ve yatay kaydırma çubuğunu göremem için ekranı ekran çözünürlüğüyle nasıl sınırlandırabilirim? Her şey ekranda gösterilmelidir. Bir şey varsa, aşağı kaydırmak için dikey bir kaydırma çubuğu olmalıdır.

Vücudun boyutunu% 100 ile sınırlamak için bazı CSS ekledim, ancak hiçbir şey değişmedi. Ayrıca, div'u <body> içinde% 100'e ayarlıyorum, ancak hiçbir şey yapmadım.

İşte kod:

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

cevap

0

Öncelikle, bu bir DataList - bunun düzeltmek gerekir.

Sen ListView GroupTemplate bakmak gerekir:

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

Sen bakış bir performans açısından görüntülerin boyutları ve dosya boyutları dikkat etmek isteyebilir.

İşte belli bir düzen elde etmek ListView GroupPlaceHolder kullanmanın örneği verilmiştir:

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

Biraz bir çözüm, ama burada sorun ben satır başına uyacak kaç öğe belirtmek zorunda olmasıdır. – rbhat

+0

GroupItemCount öğesini satır başına düşen resim sayısına ayarlayabilirsiniz. MSDN belgelerine bakın. Senin için bir örnek göndermeye çalışacağım. – IrishChieftain

+0

Ama satır başına resim miktarını belirtmek istemiyorum. Durum buysa, gönderdiğim kod snippet'inde 'RepeatColumns' özelliğini ayarlayabilirim ve örneğinize benzer olurdu. – rbhat

İlgili konular