Single Tap to edit TextBox in RadExpanderControl; double tap to toggle ExpandableContent

[Sebastian]

I have a RadExpanderControl inside my RadDataBoundListBox.
Inside the RadExpanderControl I have a TextBox. I would like it so that upon single tap, the TextBox becomes editable, but the ExpandableContent is not toggled. When the RadExpanderControl is double tapped, the ExpandableContent should be toggled.

I have looked through the documentation but I have seen no references to single and double tap events.

Thank you very much for your help.

[Deyan]

Hello Sebastian,

Thanks for writing.

The RadExpanderControl checks if the tap event within its expandable content is handled, and if yes - it changes the expanded state. Since the TextBlock is an element that does not handle event's, you will not be able to implement the desired scenario. You will need to implement a custom control that will have a RadTextBox and a TextBlock inside and toggles between then upon a given interaction by marking the events as handled so that the expander doesn't react.

I hope this helps.

Regards,
Deyan
Telerik

[Sebastian]

Thanks for your help.

I'm nearly there. I am absorbing the event to expand the control by firing the following in the Tap event of my Textbox:

e.Handled = true;

How do I programmatically open the expander control from the tap event, after it has run the above code?

bool singleTap;
private async void taskTitle_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
    e.Handled = true;
    TextBox thisTextBox = (TextBox)sender;
    thisTextBox.IsReadOnly = true;

    this.singleTap = true;
    await Task.Delay(200);
    if (this.singleTap)
    {
        // Single tab Method.
        thisTextBox.IsReadOnly = false;
        System.Diagnostics.Debug.WriteLine("Single Tap only");

    }
}
private void taskTitle_DoubleTap(object sender, System.Windows.Input.GestureEventArgs e)
{
    System.Diagnostics.Debug.WriteLine("Double tapped task title");
    this.singleTap = false;
    TextBox thisTextBox = (TextBox)sender;

    //EXPAND THE TELERIK CONTROL!!
}

The XAML for reference looks something like the following:

<phone:PhoneApplicationPage.Resources>
        <DataTemplate x:Key="ToDoListBoxItemTemplate">
            <telerikPrimitives:RadExpanderControl>
                <telerikPrimitives:RadExpanderControl.Content>
                    <StackPanel>
                        <TextBox Text="{Binding ItemName}" x:Name="taskTitle" Tap="taskTitle_Tap" DoubleTap="taskTitle_DoubleTap" />
                    </StackPanel>
                </telerikPrimitives:RadExpanderControl.Content>
                <telerikPrimitives:RadExpanderControl.ExpandableContent>
                    <!-- some stuff -->
                </telerikPrimitives:RadExpanderControl.ExpandableContent>
            </telerikPrimitives:RadExpanderControl>
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <telerikPrimitives:RadDataBoundListBox Name="RadListBox" IsItemReorderEnabled="True" ItemTemplate="{StaticResource ToDoListBoxItemTemplate}"/>
    </Grid>

The full code isn't really necessary, but I thought I might include it, to make it more clear as to what I'm trying to do.

Thank you very much.

[Deyan]

Hi Sebastian,

Thanks for writing back and for the additional details.

So in the DoubleTap event you should access the RadExpanderControl instance and set its IsExpanded property to true. In our Telerik.Windows.Core.dll we have a class called ElementTreeHelper which allows you to navigate through the visual tree and look for elements of a given type. You can use this class to find the RadExpanderControl instance which is parent of the TextBox element:

RadExpanderControl parentExpander = ElementTreeHelper.FindVisualAncestor<RadExpanderControl>(textBox);

I hope this helps.

Regards,
Deyan
Telerik

[Sebastian]

Hi Deyan,

Thanks for your help, it's much appreciated.

When I do:

parentExpander.IsExpanded = true;

The expandercontrol opens, but without the animation that you get when you press the AnimatedIndicator. Is it possible to get the same opening animation programmatically?

I am having some problems setting my own AnimatedIndicator in the XAML, my code is as follows:

        <DataTemplate x:Key="ToDoListBoxItemTemplate">
            <telerikPrimitives:RadExpanderControl">
                <telerikPrimitives:RadExpanderControl.AnimatedIndicatorContent>
                        <Image Source="/Assets/retract.png" Stretch="Fill"/>
                </telerikPrimitives:RadExpanderControl.AnimatedIndicatorContent>
...

For some reason, I still get the default telerik AnimatedIndicator.

Thanks again :)

[Deyan]

Hi Sebastian,

Thanks for writing.

Currently, the animation is played only when the expander is expanded by user interaction. We will consider your need and will add a method which will allow you to toggle the expanded state using the animation. Setting the IsExpanded property will expand the control without animation - this behavior is needed when using the control with RadDataBoundListBox because of the listbox' UI virtualization mechanism.

You will be able to find the new method in the official Q3 2013 release of RadControls for Windows Phone and in one of our upcoming Internal Build releases (which happen on a weekly basis). Please take a look at the corresponding Release notes for more information.

Regards,
Deyan
Telerik