[Wap] 制作自定义WmlListAdapter来实现Mobile.List控件的各种效果-优快云博客

本文介绍如何通过自定义WML ListAdapter实现Mobile.List控件的横排与图片效果，包括添加图片属性及控制换行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[Wap] 制作自定义WmlListAdapter来实现Mobile.List控件的各种效果

编写者

日期

关键词

郑昀@ultrapower

2005-8-18

Wap ASP.NET Mobile control device adapter

自定义的mobile.List的横排效果

现有的mobile.List输出效果，每一个Item之间一定会换行，如果你看了WmlListAdapter的源代码就知道了，这是因为他们在输出每一个Item渲染时调用了RenderLink(writer, item.Value, null, false, false, item.Text, true);，最后一个参数就是是否在本Item渲染后输出换行标记。

我们可以改变这种渲染方式，从而让mobile.List变成横排效果。

自定义的mobile.List的图片效果

现有的mobile.List输出效果，每一个Item前后无法插入一张image。

我们可以改变这种渲染方式，从而让mobile.List变成可以自定义每一行的插入图片效果。

总的效果如下图所示：

Device Adapter概念

可以参考我的上一篇文章《[Wap]编译Adapter来自定义mobile control》,http://www.cnblogs.com/zhengyun_ustc/archive/2005/07/28/customcuildyourmobilecontrol.html。

所有的ASP.NET mobile device adapter都是通过text writer做render的。这些text writer均继承自MobileTextWriter。它提供了Write, WriteLine, 以及WriteBeginTag等方法。对于WML来说，这个Text Writer是System.Web.UI.MobileControls.Adapters.WmlMobileTextWriter。

下面，我们来介绍一下步骤：

自定义一个Adapter类

在这里我们新建一个类库项目，叫做“ListAdapter”，它将生成一个ListAdapter.Dll，我们的自定义控件以及Adapter就在这个Dll中。

在这个项目中，我们将定义一个继承自

System.Web.UI.MobileControls.Adapters.WmlListAdapter

的Adapter，来准备改写mobile:list控件的输出方式。

将下面的代码保存为ListAdapter.cs：

ListAdapter.cs

using System.Web.UI;

using System.Web.UI.MobileControls.Adapters;

using System.Web.UI.MobileControls;

namespace ultraWmlAdapter

{

public class ImageList : System.Web.UI.MobileControls.List

{

private string _img="";

public string Image

{

get{ return this._img; }

set{ this._img=value; }

}

public class WmlImgListAdapter :System.Web.UI.MobileControls.Adapters.WmlListAdapter

{

protected new ImageList Control

{

get

{

return (ImageList)base.Control;

}

public override void Render(

WmlMobileTextWriter writer)

{

log.DebugTrace("ImgListAdapter Render Begin:"

+ this.Control.UniqueID);

if(Control.HasControls())

{

writer.BeginCustomMarkup();

RenderChildren(writer);

writer.EndCustomMarkup();

return;

}

int pageStart = Control.FirstVisibleItemIndex;

int pageSize = Control.VisibleItemCount;

if (pageSize == 0)

{

return;

}

* 我们在上面自定义了Image属性，那么这里我们可以通过Control.Image来获取它,

* 在aspx页面上，它可能是这么定义的，<imagelist image="Images/5.gif"></imagelist>；

* 这样，我们就可以直接通过Control.Image获取字符串"Images/5.gif"。

* zhengyun_ustc 20050819

String strListImageUrl = (String)Control.Image;

if(strListImageUrl != null

&& strListImageUrl.Length > 0)

{

writer.WriteBeginTag("img");

writer.WriteAttribute("src", strListImageUrl);

writer.WriteLine(" />");

}

System.Web.UI.MobileControls.MobileListItemCollection items = Control.Items;

if (items.Count == 0)

{

return;

}

bool itemsAsLinks = Control.ItemsAsLinks;

bool hasCmdHandler = Control.HasItemCommandHandler;

writer.EnterStyle(Style);

for (int i = 0; i

{

System.Web.UI.MobileControls.MobileListItem item = items[pageStart + i];

* 请注意这里不能用BreakAfter的名字作为本Item的CustomAttributes，

* 因为好像和原先的BreakAfter冲突；所以这里的CustomAttributes名字最好都起一个

* 比较特殊的，不与原先mobile:List的属性们冲突!

* zhengyun_ustc 20050819

String strBreakAfter = (String)item.CustomAttributes["BreakAfterItem"];

// 默认都换行!

bool bBreakAfterItem = true;

if(strBreakAfter != null

&& strBreakAfter.Length > 0)

{

strBreakAfter = strBreakAfter.ToLower();

switch(strBreakAfter)

{

case "false":

// 要求渲染时不换行

bBreakAfterItem = false;

break;

default:

break;

}

if (itemsAsLinks)

{

RenderLink(writer, item.Value, null, false, false, item.Text, bBreakAfterItem);

}

else if (hasCmdHandler)

{

RenderPostBackEvent(writer, item.Index.ToString(), null, true, item.Text, bBreakAfterItem);

}

else

{

writer.RenderText(item.Text, bBreakAfterItem);

}

* 我们知道MobileListItem有一个CustomAttributes成员,它

* “Returns the set of custom attributes defined for the control.”

* 也就是说我们通过"item.CustomAttributes",可以得到当前这个Control的自定义属性的集合；

* 这样如果我们这样定义List的某一个Item：

* <item text="1" value="1" image="Images/2.png" breakafteritem="True"></item>

* 那么可以通过item.CustomAttributes["Image"]获取Image属性的值；

* zhengyun_ustc 20050819

String strCurrentListItemImageUrl = (String)item.CustomAttributes["Image"];

if(strCurrentListItemImageUrl != null

&& strCurrentListItemImageUrl.Length > 0)

{

writer.WriteBeginTag("img");

writer.WriteAttribute("src", strCurrentListItemImageUrl);

writer.WriteLine(" />");

}

writer.ExitStyle(Style);

log.DebugTrace("ImgListAdapter Render End");

}

做一个说明，我们的ImageList类是从System.Web.UI.MobileControls.List继承下来的，增加了一个Image属性作准备。

另外，自定义的WmlImgListAdapter就是继承了

System.Web.UI.MobileControls.Adapters.WmlListAdapter，所以我们要重写

Render(WmlMobileTextWriter writer)函数，从而让它做到下面两件事情：

通过

Web.config中的system.web节点下

String strListImageUrl = (String)Control.Image;

if(strListImageUrl != null

&& strListImageUrl.Length > 0)

{

writer.WriteBeginTag("img");

writer.WriteAttribute("src", strListImageUrl);

writer.WriteLine(" />");

}

来获取在aspx页面上定义的List自定义属性。这里的知识点就是，你可以在aspx中这么定义<imagelist id="NewList1" runat="server">Image="Images/5.gif" >，那么直接就可以通过Control.Image来获取这个“Images/5.gif”字符串。这是当前List控件总的Image图片显示。</imagelist>

我们还可以通过在每一个Item商定以自定义属性Image来在List的每一项后面都输出一张图片。

Web.config中的system.web节点下

String strCurrentListItemImageUrl = (String)item.CustomAttributes["Image"];

if(strCurrentListItemImageUrl != null

&& strCurrentListItemImageUrl.Length > 0)

{

writer.WriteBeginTag("img");

writer.WriteAttribute("src", strCurrentListItemImageUrl);

writer.WriteLine(" />");

}

这里的知识点是，MobileListItem有一个CustomAttributes成员,它代表“Returns the set of custom attributes defined for the control.”。也就是说我们通过"item.CustomAttributes",可以得到当前这个Control的自定义属性的集合。

所以，如果我们这样定义List的某一个Item：

那么可以通过item.CustomAttributes["Image"]获取Image属性的值了。