wsick / Fayde

Inspired by Silverlight; XAML engine using Javascript and rendering to the HTML5 Canvas.
MIT License
189 stars 27 forks source link

How to use interactivity and interactions #137

Closed deepaksm1 closed 9 years ago

deepaksm1 commented 9 years ago

How to use interactivity and interactions in fayde? What namespaces need to include in XAML?

 <ItemsControl ItemsSource="{Binding Path= HeaderList}" Grid.Row="0" Grid.Column="0" >
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                  <TextBlock   Text="{Binding Text}" Width="100" HorizontalAlignment="Left" >  
                      <i:Interaction.Triggers>
                          <i:EventTrigger EventName="MouseLeftButtonDown">
                             <ie:CallMethodAction MethodName="PrevMouseDownEventHandler" 
    TargetObject="{Binding Path=DataContext,RelativeSource={RelativeSource AncestorType=ItemsControl}" />
                          </i:EventTrigger>
                       </i:Interaction.Triggers>
                </TextBlock>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
Sally-Xu commented 9 years ago

Try this:

<DataTemplate>
<TextBlock MouseLeftButtonDown="{EventBinding Command={Binding Path=DataContext.PrevMouseDownCmd, RelativeSource={RelativeSource ItemsControlParent}}, CommandParameter={Binding}}}" Text="{Binding Text}" />
</DateTemplate>

Make sure to write the command in your ViewModel:

PrevMouseDownCmd = new Fayde.MVVM.RelayCommand((e: Fayde.IEventBindingArgs) => { this.CurrentItem = e.parameter; // this is the data Item you just clicked e.args.Handled = true; alert(this.CurrentItem.Text); }, (e: Fayde.IEventBindingArgs) => { return true; // here is the condition to enable the command});

deepaksm1 commented 9 years ago

Ok Thanks, I will try this...