zoukankan      html  css  js  c++  java
  • WP7有约(七):实现铃声设置的播放图标的效果

    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事件,因此我把它留给你课后实践一下。

  • 相关阅读:
    innodb next-key lock
    kafka-0.9
    aggregations 详解1(概述)
    mapping 详解5(dynamic mapping)
    mapping 详解4(mapping setting)
    mapping 详解3(Meta-Fields)
    mapping 详解2(field datatypes)
    mapping 详解1(mapping type)
    分布式 ES 操作流程解析
    ES 中的那些坑
  • 原文地址:https://www.cnblogs.com/allenlooplee/p/2280008.html
Copyright © 2011-2022 走看看