How to send event from view to VM?

UE4 · 28 Feb 2018, 08:21

I want to send event from View to VM

MyView.xaml
<Button TouchDown="HandeTouchDown" TouchUp="HandleTouchUp">

MyView.h
class
{
//connect event
virtual bool ConnectEvent() override;

void HandleTouchDown()
{
//let vm konw touch down
}
void HandleTouchUp()
{
if(index == touchDevice && TouchTime > 0.5f)
{
HnadleLongPress()
}

//let vm konw touch up
}

void HandleLongPress()
{
//let VM know longpress.
}
}

class ViewModel : public UObject
{
void HandleLongPress()
{
}
}

I know the build-in control have some Command can do this in xaml, such Button.Click, but how UserControl? How fire event in MyView.h?

UE4 · 01 Mar 2018, 04:13

Does NoesisGUI has a module can convert event to command such as System.Windows.Interactivity ?

01 Mar 2018, 12:31

Hi UE4,

Yes, we do. It's in a class named NoesisGUIExtensions.EventToCommand that exposes several dependency properties. You can find an example of its use in the Menu3D sample. Here's a xaml that uses it:

https://github.com/Noesis/Tutorials/blo ... tMenu.xaml

Hope this helps.

UE4 · 02 Mar 2018, 07:30

Hi UE4,

Yes, we do. It's in a class named NoesisGUIExtensions.EventToCommand that exposes several dependency properties. You can find an example of its use in the Menu3D sample. Here's a xaml that uses it:

https://github.com/Noesis/Tutorials/blo ... tMenu.xaml

Hope this helps.

Confused about the Menu3D sample UE4 version, no EventToCommand defined in code such as in C#, but all works well.

02 Mar 2018, 20:25

EventToCommand is part of the native NoesisGUI runtime, so it works out of the box.

UE4 · 06 Mar 2018, 04:31

Hi UE4,

Yes, we do. It's in a class named NoesisGUIExtensions.EventToCommand that exposes several dependency properties. You can find an example of its use in the Menu3D sample. Here's a xaml that uses it:

https://github.com/Noesis/Tutorials/blo ... tMenu.xaml

Hope this helps.

<ItemsControl ItemsSource="{Binding SpellList}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel Width="800" Height="200"/>

                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <local:TouchButton x:Name="Spell_0" 
                                   noesis:EventToCommand.Event="TouchDown" 
                                   noesis:EventToCommand.Command="{Binding SpellTouchDown}" 
                                   noesis:EventToCommand.CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Name}"  
                                   Width="120" Height="120" Canvas.Left="300" Canvas.Top="550"></local:TouchButton>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>

First, the child not auto placed at correct postion;
Second, the EventToCommand will not work in DataTemplate

06 Mar 2018, 21:11

Hi,

I've tried this modified version of your xaml that doesn't use your custom TouchButton:

<ItemsControl
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:noesis="clr-namespace:NoesisGUIExtensions"
  ItemsSource="{Binding SpellList}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel Width="800" Height="200"/>

                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Button x:Name="Spell_0"
                                   noesis:EventToCommand.Event="Click" 
                                   noesis:EventToCommand.Command="{Binding SpellTouchDown}" 
                                   noesis:EventToCommand.CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Name}"
                                   Width="120" Height="120">
                            </Button>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>

I have a Spell class that exposes a property of type ICommand called SpellTouchDown and the data context has a property that is a collection of spells named SpellList. When I click the button SpellTouchDown is called on the spell, and the string "Spell_0" is passed as the argument. Is that the behavior you were expecting?

As for the child item position, do you mean that Canvas.Left="300" Canvas.Top="550" do nothing? The containing panel is a WrapPanel, not a Canvas, so those dependency properties won't have an effect.

UE4 · 07 Mar 2018, 06:27

Hi,

I've tried this modified version of your xaml that doesn't use your custom TouchButton:

I have a Spell class that exposes a property of type ICommand called SpellTouchDown and the data context has a property that is a collection of spells named SpellList. When I click the button SpellTouchDown is called on the spell, and the string "Spell_0" is passed as the argument. Is that the behavior you were expecting?

As for the child item position, do you mean that Canvas.Left="300" Canvas.Top="550" do nothing? The containing panel is a WrapPanel, not a Canvas, so those dependency properties won't have an effect.

still have some problem, https://drive.google.com/open?id=1PB9CJ ... yYQZyj95wj

additional question about to the demo projection: if the VM has TArray<FString> DisplayTextList; how can I binding it to button? I mean its not a struct element, just a basic element.

UE4 · 07 Mar 2018, 11:40

how to convert event's param to command's param?

Command's param in Ueral is a UObject, NoesisCreateBaseComponentForUObject(BaseComponent); if there is a JoystickControl, evenry time I TouchMove on joystick, a command fired. and a UObject created? or reuse the UObject? I find the these Uobject's name are different.

UE4 · 12 Mar 2018, 04:41

solved it by:

<ItemsControl.ItemContainerStyle>
                        <Style>
                            <Setter Property="Canvas.Left" Value="{Binding Offset.X}" />
                            <Setter Property="Canvas.Top" Value="{Binding Offset.Y}"/>
                            <Setter Property="Canvas.Width" Value="{Binding DrawSize.X}"/>
                            <Setter Property="Canvas.Height" Value="{Binding DrawSize.Y}"/>
                        </Style>
                    </ItemsControl.ItemContainerStyle>

How to send event from view to VM?

How to send event from view to VM?

Re: How to send event from view to VM?

Re: How to send event from view to VM?

Re: How to send event from view to VM?

Re: How to send event from view to VM?

Re: How to send event from view to VM?

Re: How to send event from view to VM?

Re: How to send event from view to VM?

Re: How to send event from view to VM?

Re: How to send event from view to VM?

Who is online