locked
How bind viewmodel command to RichTextBlock's DoubleTapped Event using Interactivity? RRS feed

  • Question

  • How bind viewmodel command to RichTextBlock's DoubleTapped Event using Interactivity?
    Wednesday, November 12, 2014 7:08 PM

All replies

  • Add a reference to Behavior SDK (XAML) (Project->Add Reference->Windows 8.1->Extensions) and use the following code:

    <Page
        x:Class="App8.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App8"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        xmlns:core="using:Microsoft.Xaml.Interactions.Core"
        xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
        <StackPanel>
    
            <RichTextBlock>
                <interactivity:Interaction.Behaviors>
                    <core:EventTriggerBehavior EventName="DoubleTapped">
                        <core:InvokeCommandAction
                            Command="{Binding SuggestionRequest}"/>
                    </core:EventTriggerBehavior>
                </interactivity:Interaction.Behaviors>
    
            </RichTextBlock>
    
        </StackPanel>
    </Page>
    

    Please refer to the following page for more details: http://irisclasson.com/2013/12/10/passing-event-arguments-from-xaml-in-windows-store-apps-inputconverter-inputconverterparameter-etc/

    Please also remember to mark helpful posts as answer and/or helpful.

    Wednesday, November 12, 2014 10:42 PM
  • Hi Magnus,

    I have created two simple scenarios based off of the link above. One uses a TextBlock and one uses a RichTextBlock with both using Behaviors to bind to the DoubleTapped Event. The TextBlock scenario works but the RichTextBlock scenario does not fire the Double Tapped event via Behaviors.

    Here is the code:

    using System;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    
    namespace RichTextBlockBehaviors
    {
        public sealed class DoubleTappedArgsConverter : IValueConverter
        {
            public object Convert(object value, Type targetType, object parameter, string language)
            {
                var args = (DoubleTappedRoutedEventArgs)value;
                string controlName = string.Empty;
                string param = (string)parameter;
                if (args.OriginalSource != null)
                {
                    var obj = args.OriginalSource;
                    if (obj.GetType().Name.Equals("TextBlock"))
                        controlName = ((TextBlock)obj).Name;
                    if (obj.GetType().Name.Equals("RichTextBlock"))
                        controlName = ((RichTextBlock)obj).Name;
                }
    
                if (args == null) return value;
                IDoubleTappedParameters item = new DoubleTappedParameters(controlName, param)
                {
                    TargetName = controlName,
                    TargetType = param
                };
                return item;
               
            }
    
            public object ConvertBack(object value, Type targetType, object parameter, string language)
            {
                return value;
            }
        }
    }
    namespace RichTextBlockBehaviors
    {
    
        public class DoubleTappedParameters : IDoubleTappedParameters
        {
            public DoubleTappedParameters(string targetName, string targetType)
            {
                TargetName = targetName;
                TargetType = targetType;
            }
            public string TargetName { get; set; }
            public string TargetType { get; set; }
        }
    }
    RichTextBlock Xaml:

    using Windows.Foundation.Collections;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    
    // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
    
    namespace RichTextBlockBehaviors
    {
        /// <summary>
        /// An empty page that can be used on its own or navigated to within a Frame.
        /// </summary>
        public sealed partial class Scenario1 : Page
        {
            public DelegateCommand<IDoubleTappedParameters> DoubleTappedRequest { get; set; }
    
            public Scenario1()
            {
                InitializeComponent();
                DoubleTappedRequest = new DelegateCommand<IDoubleTappedParameters>(DoubleTappedRequestFor, o => true);
                DataContext = this;
            }
    
            private void DoubleTappedRequestFor(IDoubleTappedParameters query)
            {
    
            }
        }
    }

    <Page
        x:Class="RichTextBlockBehaviors.Scenario1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:RichTextBlockBehaviors"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:core="using:Microsoft.Xaml.Interactions.Core"
        xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
        mc:Ignorable="d">
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            
            <TextBlock x:Name="paperName" Text="PaperName" Visibility="Collapsed"/>
            <Grid x:Name="rootGrid" Tag="myParam">
                <ScrollViewer x:Name="contentScrollViewer" Background="AntiqueWhite" Width="800" Height="400">
                    <ScrollViewer.Resources>
                        <local:DoubleTappedArgsConverter x:Name="DoubleTappedArgsConverter"/>
                    </ScrollViewer.Resources>
                    <StackPanel Width="500" Height="50">
                        <Border Background="LightGray">
                            <RichTextBlock x:Name="_000"  Tag="MyName" Width="500" Height="50" FontSize="34"  Foreground="Blue" VerticalAlignment="Center">
                                <interactivity:Interaction.Behaviors>
                                    <core:EventTriggerBehavior EventName="DoubleTapped">
                                        <core:InvokeCommandAction 
                                            Command="{Binding DoubleTappedRequest}"
                                            InputConverter="{StaticResource DoubleTappedArgsConverter}"
                                            InputConverterLanguage="en-US"
                                            InputConverterParameter="{Binding ElementName=paperName, Path=Text}"/>
                                    </core:EventTriggerBehavior>
                                </interactivity:Interaction.Behaviors>
                                <Paragraph><Run>Text</Run></Paragraph>
                            </RichTextBlock>
                        </Border>
                        
                    </StackPanel>
                </ScrollViewer>
            </Grid>
    
        </Grid>
    </Page>
    

    The only difference between scenario1 and scenario2 is one uses a TextBlock and one uses a RichTextBlock. The RichTextBlock scenario does not work and will not fire the DoubleTapped Event unless explicitly wired up in Xaml or programattically. I wonder what I am doing wrong if you got your example working?

    Friday, November 14, 2014 3:46 PM
  • This Works:

    <Page
        x:Class="RichTextBlockBehaviors.Scenario2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:RichTextBlockBehaviors"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:core="using:Microsoft.Xaml.Interactions.Core"
        xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
        mc:Ignorable="d">
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            
            <TextBlock x:Name="paperName" Text="PaperName" Visibility="Collapsed"/>
            <Grid x:Name="rootGrid" Tag="myParam">
                <ScrollViewer x:Name="contentScrollViewer" Background="AntiqueWhite" Width="800" Height="400">
                    <ScrollViewer.Resources>
                        <local:DoubleTappedArgsConverter x:Name="DoubleTappedArgsConverter"/>
                    </ScrollViewer.Resources>
                    <StackPanel Width="500" Height="50">
                        <Border Background="LightGray">
                            <TextBlock x:Name="_000"  Tag="MyName" Width="500" Height="50" FontSize="34"  Foreground="Blue" VerticalAlignment="Center">
                                <interactivity:Interaction.Behaviors>
                                    <core:EventTriggerBehavior EventName="DoubleTapped">
                                        <core:InvokeCommandAction 
                                            Command="{Binding DoubleTappedRequest}"
                                            InputConverter="{StaticResource DoubleTappedArgsConverter}"
                                            InputConverterLanguage="en-US"
                                            InputConverterParameter="{Binding ElementName=paperName, Path=Text}"/>
                                    </core:EventTriggerBehavior>
                                </interactivity:Interaction.Behaviors>
                                <Run>Text</Run>
                            </TextBlock>
                        </Border>
                        
                    </StackPanel>
                </ScrollViewer>
            </Grid>
    
        </Grid>
    </Page>
    

    Friday, November 14, 2014 3:48 PM
  • If you have a working example is there a way you can send it to me or make the full project available?
    Friday, November 14, 2014 3:50 PM
  • I hope someone on the xml team will be so kind as to look at the code as it is reproable
    Friday, November 14, 2014 7:46 PM