WP7 (7): implement the effect of the playing icon set for the ringtone

WP7 (7): implement the effect of the playing icon set for the ringtone

 

Written by Allen Lee

 

Sjcxyf mentioned the following problem through the station message:

Now I want to create a function: When ListPicker pops up the full screen, each item is preceded by a playing image, followed by a music name, And then I click the previous one to play the current music, he is not allowed to select the value of this item, and the result will be returned only after selecting the following words. What is the effect of setting the ringtone in Phone 7 real machine?

 

Let's take a look at the ringtone settings of the cottage version. 1 shows that the ListPicker page is closed no matter whether the user clicks the ringtone name or the playing icon on its left. The effect that sjcxyf wants is to click the playing icon to play the corresponding ringtone, and click the ringtone name to confirm the selection. The problem is that even if you click a blank area under the ringtone, The ListPicker page is closed. Why?

Figure 1 ringtone settings

 

View the ListPickerPage. xaml. cs file. We will find that the ListBox control on the ListPicker page has added the Tap event handler, as shown in Code 1. It is not hard to see that the ListPicker page shows the expected behavior, that is, in single-choice mode, the ListPicker page is closed when you click the options or blank areas in The ListBox control. As a result, the requirements of sjcxyf can be re-described as preventing the ListBox control event handler from being executed when the user clicks the playback icon. But how can this be done?

Code 1 ListBox control's Tap event handler

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 supports a concept called a routed event, which is triggered by passing the child element up the object tree to each parent element until it reaches the root element. Not all events are routing events, but the Tap event is a routing event. In other words, when you click the play icon, The ListBox control acts as the parent element of the play icon, although it is not a parent element directly contained, it can also perceive the transmitted Tap events. As a result, the requirements of sjcxyf can be re-described to prevent the stream play ICON's Tap event from being passed up to the parent element. But how can this be done?

The second parameter of the Tap event handler has a Handled attribute, which is used to handle this requirement. Assuming that the playing icon is an Image control, as shown in Code 2, we can add a Tap event handler for it and set the Handled attribute to true, as shown in code 3, in this way, the Silverlight Event System will stop passing the Tap event to each parent element.

Code 2: The XAML code of the playback icon

<Image Source="/play.png" Stretch="None" HorizontalAlignment="Left" 
       VerticalAlignment="Center" Tap="Image_Tap" Margin="0,0,12,0"/>

Code 3: stream play ICON's Tap event handler

Private void Image_Tap (object sender, System. Windows. Input. GestureEventArgs e)
{
// Add the code for playing music

E. Handled = true;
}

 

However, when you click the play icon, the selected ringtone will also change. This is obviously not the way to set the ringtone for Windows Phone 7. When you click the play icon, you only want to play the ringtone, but do not change the selected ringtone. If you press the Back key to return, the ringtone settings will remain unchanged. The implementation of this effect is the same as the previous one, but this time it is replaced by the MouseLeftButtonUp event, so I will leave it for you to practice it after class.