ListView.GroupTemplate Propiedad
Definición
Importante
Parte de la información hace referencia a la versión preliminar del producto, que puede haberse modificado sustancialmente antes de lanzar la versión definitiva. Microsoft no otorga ninguna garantía, explícita o implícita, con respecto a la información proporcionada aquí.
Obtiene o establece el contenido definido por el usuario para el contenedor de grupo de un control ListView.
public:
virtual property System::Web::UI::ITemplate ^ GroupTemplate { System::Web::UI::ITemplate ^ get(); void set(System::Web::UI::ITemplate ^ value); };
[System.ComponentModel.Browsable(false)]
[System.Web.UI.PersistenceMode(System.Web.UI.PersistenceMode.InnerProperty)]
[System.Web.UI.TemplateContainer(typeof(System.Web.UI.WebControls.ListViewItem))]
public virtual System.Web.UI.ITemplate GroupTemplate { get; set; }
[<System.ComponentModel.Browsable(false)>]
[<System.Web.UI.PersistenceMode(System.Web.UI.PersistenceMode.InnerProperty)>]
[<System.Web.UI.TemplateContainer(typeof(System.Web.UI.WebControls.ListViewItem))>]
member this.GroupTemplate : System.Web.UI.ITemplate with get, set
Public Overridable Property GroupTemplate As ITemplate
Valor de propiedad
Objeto que incluye el contenido personalizado para el contenedor de grupo de un control ListView. El valor predeterminado es null
, lo que indica que esta propiedad no se estableció.
- Atributos
Ejemplos
En el ejemplo siguiente se muestra cómo crear un diseño en mosaico en el ListView control mediante la GroupTemplate propiedad .
<%@ Page language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ListView Tiled Layout Example</title>
<style type="text/css">
.header
{
background-color:#B0C4DE;
border-top:solid 1px #9dbbcc;
border-bottom:solid 1px #9dbbcc;
}
.separator { border-right: 1px solid #ccc; }
</style>
</head>
<body>
<form id="form1" runat="server">
<h3>ListView Tiled Layout Example</h3>
<asp:ListView ID="ProductsListView"
DataSourceID="ProductsDataSource"
GroupItemCount="2"
runat="server">
<LayoutTemplate>
<table cellpadding="2" width="640px" runat="server" id="tblProducts">
<tr runat="server" class="header">
<th runat="server" colspan="3">PRODUCTS LIST</th>
</tr>
<tr runat="server" id="groupPlaceholder" />
</table>
</LayoutTemplate>
<GroupTemplate>
<tr runat="server" id="ProductsRow">
<td runat="server" id="itemPlaceholder" />
</tr>
</GroupTemplate>
<GroupSeparatorTemplate>
<tr runat="server">
<td colspan="3"><hr /></td>
</tr>
</GroupSeparatorTemplate>
<ItemTemplate>
<td align="center" style="width:300px" runat="server">
<asp:HyperLink ID="ProductLink" runat="server"
Text='<%# Eval("Name") %>'
NavigateUrl='<%# "ProductDetails.aspx?productID=" + Eval("ProductID") %>' /><br />
<asp:Image ID="ProductImage" runat="server"
ImageUrl='<%# "~/images/thumbnails/" + Eval("ThumbnailPhotoFileName") %>' /><br />
<b>Price:</b>
<asp:Label ID="PriceLabel" runat="server" Text='<%# Eval("ListPrice", "{0:c}")%>' /><br />
</td>
</ItemTemplate>
<ItemSeparatorTemplate>
<td class="separator" runat="server"> </td>
</ItemSeparatorTemplate>
</asp:ListView>
<br />
<asp:DataPager runat="server" ID="ProductsDataPager"
PagedControlID="ProductsListView">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button"
ShowFirstPageButton="true"
ShowNextPageButton="false"
ShowPreviousPageButton="false" />
<asp:NumericPagerField ButtonCount="10" />
<asp:NextPreviousPagerField ButtonType="Button"
ShowLastPageButton="true"
ShowNextPageButton="false"
ShowPreviousPageButton="false" />
</Fields>
</asp:DataPager>
<!-- This example uses Microsoft SQL Server and connects -->
<!-- to the AdventureWorks sample database. Use an ASP.NET -->
<!-- expression to retrieve the connection string value -->
<!-- from the Web.config file. -->
<asp:SqlDataSource ID="ProductsDataSource" runat="server"
ConnectionString="<%$ ConnectionStrings:AdventureWorks_DataConnectionString %>"
SelectCommand="SELECT P.ProductID, P.Name, P.Color, P.ListPrice,
PF.ThumbnailPhotoFileName
FROM Production.Product AS P
INNER JOIN Production.ProductProductPhoto AS PPF ON P.ProductID = PPF.ProductID
INNER JOIN Production.ProductPhoto AS PF ON PPF.ProductPhotoID = PF.ProductPhotoID">
</asp:SqlDataSource>
</form>
</body>
</html>
<%@ Page language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ListView Tiled Layout Example</title>
<style type="text/css">
.header
{
background-color:#B0C4DE;
border-top:solid 1px #9dbbcc;
border-bottom:solid 1px #9dbbcc;
}
.separator { border-right: 1px solid #ccc; }
</style>
</head>
<body>
<form id="form1" runat="server">
<h3>ListView Tiled Layout Example</h3>
<asp:ListView ID="ProductsListView"
DataSourceID="ProductsDataSource"
GroupItemCount="2"
runat="server">
<LayoutTemplate>
<table cellpadding="2" width="640px" runat="server" id="tblProducts">
<tr runat="server" class="header">
<th runat="server" colspan="3">PRODUCTS LIST</th>
</tr>
<tr runat="server" id="groupPlaceholder" />
</table>
</LayoutTemplate>
<GroupTemplate>
<tr runat="server" id="ProductsRow">
<td runat="server" id="itemPlaceholder" />
</tr>
</GroupTemplate>
<GroupSeparatorTemplate>
<tr runat="server">
<td colspan="3"><hr /></td>
</tr>
</GroupSeparatorTemplate>
<ItemTemplate>
<td align="center" style="width:300px" runat="server">
<asp:HyperLink ID="ProductLink" runat="server"
Text='<%# Eval("Name") %>'
NavigateUrl='<%# "ProductDetails.aspx?productID=" & Eval("ProductID") %>' /><br />
<asp:Image ID="ProductImage" runat="server"
ImageUrl='<%# "~/images/thumbnails/" & Eval("ThumbnailPhotoFileName") %>' /><br />
<b>Price:</b>
<asp:Label ID="PriceLabel" runat="server" Text='<%# Eval("ListPrice", "{0:c}")%>' /><br />
</td>
</ItemTemplate>
<ItemSeparatorTemplate>
<td class="separator" runat="server"> </td>
</ItemSeparatorTemplate>
</asp:ListView>
<br />
<asp:DataPager runat="server" ID="ProductsDataPager"
PagedControlID="ProductsListView">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button"
ShowFirstPageButton="true"
ShowNextPageButton="false"
ShowPreviousPageButton="false" />
<asp:NumericPagerField ButtonCount="10" />
<asp:NextPreviousPagerField ButtonType="Button"
ShowLastPageButton="true"
ShowNextPageButton="false"
ShowPreviousPageButton="false" />
</Fields>
</asp:DataPager>
<!-- This example uses Microsoft SQL Server and connects -->
<!-- to the AdventureWorks sample database. Use an ASP.NET -->
<!-- expression to retrieve the connection string value -->
<!-- from the Web.config file. -->
<asp:SqlDataSource ID="ProductsDataSource" runat="server"
ConnectionString="<%$ ConnectionStrings:AdventureWorks_DataConnectionString %>"
SelectCommand="SELECT P.ProductID, P.Name, P.Color, P.ListPrice,
PF.ThumbnailPhotoFileName
FROM Production.Product AS P
INNER JOIN Production.ProductProductPhoto AS PPF ON P.ProductID = PPF.ProductID
INNER JOIN Production.ProductPhoto AS PF ON PPF.ProductPhotoID = PF.ProductPhotoID">
</asp:SqlDataSource>
</form>
</body>
</html>
Comentarios
Utilice la GroupTemplate propiedad para crear un diseño en mosaico en el ListView control . En un diseño de tabla en mosaico, los elementos se repiten horizontalmente en una fila. La propiedad especifica GroupItemCount los números de veces que un elemento se repite.
Para especificar una plantilla declarativa para el contenedor de grupos, agregue un GroupTemplate
elemento dentro del ListView control . A continuación, puede agregar el contenido de la plantilla al GroupTemplate
elemento .
La GroupTemplate propiedad debe incluir un marcador de posición para el elemento de datos, como una celda de tabla (td
), div
o span
un elemento . Este marcador de posición debe tener el runat
atributo establecido en "server" y el ID
atributo establecido en el valor de la ItemPlaceholderID propiedad . En tiempo de ejecución, el ListView control reemplaza el marcador de posición por el contenido definido para cada elemento de las ItemTemplate plantillas y AlternatingItemTemplate .