水平リストビューを画面内のスペースに制限しますか？

私は水平に繰り返すlistviewを持っており、20枚の画像が表示されます。私の画面解像度では、5つの画像/行のためのスペースがあるので、私は4つの行を参照する必要があります。水平リストビューを画面内のスペースに制限しますか？

残念ながら、現在、すべての20個の画像で1つの長い行が表示されています。水平スクロールバーも表示されます。

私の質問：画像が4行、水平スクロールバーが表示されないように、画面の解像度にスペースを制限するにはどうすればよいですか？すべてを画面内に表示する必要があります。もしあれば、スクロールダウンするための垂直スクロールバーが必要です。

CSSを追加してボディのサイズを100％に制限しましたが、何も変更されませんでした。 <body>のdivも100％に設定しましたが、何もしませんでした。

は、ここでは、コードです：

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

出典

2016-04-14 rbhat

まず第一に、これはDataListコントロールです - あなたはそれを修正する必要があります。

あなたは、ListViewコントロールGroupTemplateを見てみる必要があります。

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

あなたはパフォーマンスの観点から、画像の大きさとファイルサイズに注意を払う必要がある場合があります。ここで

は、特定のレイアウトを実現するために、リストビューGroupPlaceHolderを使用してのサンプルです：

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

出典

2016-04-14 17:51:53 IrishChieftain

それは多少解決策だが、ここでの問題は、私は、行ごとにフィットする項目の数も指定しなければならないということです。 – rbhat

GroupItemCountを1行あたりの写真数に設定できます。 MSDNのドキュメントをご覧ください。私はあなたのためのサンプルを投稿しようとします。 – IrishChieftain

しかし、私は行ごとの写真の量を指定したくありません。その場合、私が掲示したコードスニペットの 'RepeatColumns'プロパティを設定することができ、それはあなたの例に似ています。 – rbhat

水平リストビューを画面内のスペースに制限しますか？

答えて

関連する問題