WP7有约（七）：实现铃声设置的播放图标的效果

 

written by allen lee

 

 

 

      sjcxyf同学通过站内消息提到这样一个问题：

 

我现在想做一个功能就是当listpicker弹出全屏幕的时候每一项前面是一个播放图片，后面是音乐名称，然后我点击前面的播放的时候播放当前的音乐，不让他选择这一项的值并返回 要选择后面的字之后才返回 就是像phone 7真机里面设置铃声那种效果怎么做？

 

 

 

      我们来看一个山寨版的铃声设置，如图1所示，无论用户单击铃声名字还是它左边那个播放图标，都会关闭listpicker页面。sjcxyf同学想要的效果是单击播放图标将会播放对应的铃声，而单击铃声名字才是确认选择。问题是，即使你单击铃声下面的空白地方，listpicker页面也会关闭，为什么？

 

 

 

图1 山寨版铃声设置

 

 

 

      查看listpickerpage.xaml.cs文件，我们将会发现listpicker页面的listbox控件添加了tap事件处理程序，如代码1所示。从中我们不难看出，listpicker页面表现出来的行为是预期的，即在单选模式下，单击listbox控件里的选项或者空白地方将会关闭listpicker页面。于是，sjcxyf同学的需求可以重新描述成在用户单击播放图标时防止listbox控件的事件处理程序被执行，但是，怎样才能做到？

 

代码1 listbox控件的tap事件处理程序

 

private void onpickertapped(object sender, system.windows.input.gestureeventargs e)

{

    // we listen to the tap event because selectionchanged does not fire if the user picks the already selected item.

 

    // only close the page in single selection mode.

    if (selectionmode == selectionmode.single)

    {

        // commit the value and close

        selecteditem = picker.selecteditem;

        closepickerpage();

    }

}

复制代码

 

 

      silverlight支持一种叫做路由事件（routed event）的概念，这种事件的触发会从子元素沿着对象树向上传递给各个父元素，直至到达根元素为止。并非所有事件都是路由事件，但tap事件刚好就是路由事件，换句话说，当用户单击播放图标时，listbox控件作为播放图标的父元素，虽然不是直接包含的父元素，也能感知传递过来的tap事件。于是，sjcxyf同学的需求可以重新描述成防止播放图标的tap事件向上传递给父元素，但是，怎样才能做到？

 

      tap事件处理程序的第二个参数有一个handled属性，这个属性正是用来处理这种需求的。假设播放图标是一个image控件，如代码2所示，我们可以为它添加一个tap事件处理程序，并在里面把handled属性设为true，如代码3所示，这样，silverlight的事件将会停止把tap事件向上传递给各个父元素。

 

代码2 播放图标的xaml代码

 

<image source="/play.png" stretch="none" horizontalalignment="left"

       verticalalignment="center" tap="image_tap" margin="0,0,12,0"/>

复制代码

代码3 播放图标的tap事件处理程序

 

private void image_tap(object sender, system.windows.input.gestureeventargs e)

{

    // 添加播放音乐的代码

 

    e.handled = true;

}

 

 

      不过，当用户单击播放图标时，当前选中的铃声也会发生改变，这显然不是windows phone 7的铃声设置的做法。我们希望单击播放图标时只是播放铃声，但不改变当前选中的铃声，如果此时按back键返回，铃声设置将会维持原状。这个效果的实现方式和前面的一样，只不过这次换成了mouseleftbuttonup事件，因此我把它留给你课后实践一下

 

代码下载：