Connect command in view model to custom property

03 Jul 2024, 22:54

hi,
i need another help with my custom control:

        <local:SettingsUserControl
        x:Name="SettingModule" Background="Transperent" Grid.Row="1" Grid.Column="0" Margin="10"
                                   HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsVisibleControlProperty="True"
                                   SettingsButtonShadedProperty="True"
                                 [u]   microscope_button_click = "{Binding Microscope_Button_Click_Command}[/u]"
                                  [b]   settings_button_click = "SettingsUserControl_OnSettingsButtonClick"[/b]>


         </local:SettingsUserControl>

the bold part (settings_button_click event) is working (i used NS_CONNECT_ATTACHED_EVENT)
i want to make the underline part (microscope_button_click) to work by creating a delegate command on view model and bind it to the event, i am not sure my syntax is actually correct.
declaration and reflection of the event was done :

static const Noesis::RoutedEvent* power_button_clickEvent;
			data->RegisterEvent(power_button_clickEvent, "power_button_click", Noesis::RoutingStrategy_Bubble);

definition also in other part.

my view model i definde the command in the constructoe with callback defined late and reflect:

   MainWindowViewModel::MainWindowViewModel()
   {
       mMicroscopeButtonCommand = Noesis::MakePtr<NoesisApp::DelegateCommand>(MakeDelegate(this, &MainWindowViewModel::onMicroscopeButtonPress));


   }

   NoesisApp::DelegateCommand* MainWindowViewModel::getMicroscopePressButtonCommand() const
    {
        return mMicroscopeButtonCommand;
    }


  void MainWindowViewModel::onMicroscopeButtonPress(Noesis::BaseComponent *param_)
    {
		std::cout << "\nView Model Microscope Button Pressed\n" << std::endl;
    }





    NS_IMPLEMENT_REFLECTION(BasicAssistantScreen::MainWindowViewModel, "BasicAssistantScreen.MainWindowViewModel")
    {
        NsProp("MyCommand", &MainWindowViewModel::getMicroscopePressButtonCommand);
    }

i saw something in tutorials like this:

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:b="http://schemas.microsoft.com/xaml/behaviors">
  <Button Content="Close">
    <b:Interaction.Triggers>
      <b:EventTrigger EventName="Click">
        <b:InvokeCommandAction Command="{Binding CloseCommand}" CommandParameter="Force"/>
      </b:EventTrigger>
    </b:Interaction.Triggers>
  </Button>
</Grid>

but i could not make it work (using the Interaction + Triggers) and i was told that it should be much easier and by the first way i tried.

thanks again for the help.

04 Jul 2024, 13:41

Hi,

If the viewmodel is set inside the UserControl you can bind the command directly to the Button:

<Button x:Name="MicroscopeButton" ... Command="{Binding Microscope_Button_Click_Command}"/>

In case you want to handle it from outside the UserControl, then you can listen to the custom event using interactivity:

<local:SettingsUserControl ...>
  <b:Interaction.Triggers>
    <b:EventTrigger EventName="microscope_button_click">
      <b:InvokeCommandAction="{Binding Microscope_Button_Click_Command}"/>
    </b:EventTrigger>
  </b:Interaction.Triggers>
</local:SettingsUserControl>

Assuming you registered the custom event with the name "microscope_button_click" in the UserControl reflection block (the same as you did with the power_button_click event).

Please let me know if you find any trouble with this.

04 Jul 2024, 15:48

unfortunately no success.
i try these 2 codes with events for testing the Triggers and InvokeCommand, one with button and "built in" event that works and with my custom user control and custom event not work:
work version:

        <local:SettingsUserControl x:Name="SettingModule" Background="Transparent" Grid.Row="1" Grid.Column="0" Margin="10"
                                   HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsVisibleControlProperty="True"
                                   SettingsButtonShadedProperty="True"
                                    LowerButtonTypeProperty="{x:Static local:LowerButtonType.BackButton}"
                                    power_button_click= "SettingsUserControl_OnPowerBackButtonClick"
                                     microscope_button_click = "SettingsUserControl_OnMicroscopeButtonClick"
                                     settings_button_click = "SettingsUserControl_OnSettingsButtonClick">


        </local:SettingsUserControl>

 

    <Button Content = "Hi">
            <b:Interaction.Triggers>
                <b:EventTrigger EventName="Click">
                    <b:InvokeCommandAction Command="{Binding MyCommand}" />
                </b:EventTrigger>
            </b:Interaction.Triggers>
     </Button>

not working version:

      
        <local:SettingsUserControl x:Name="SettingModule" Background="Transparent" Grid.Row="1" Grid.Column="0" Margin="10"
                                   HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsVisibleControlProperty="True"
                                   SettingsButtonShadedProperty="True"
                                    LowerButtonTypeProperty="{x:Static local:LowerButtonType.BackButton}"

                                     microscope_button_click = "SettingsUserControl_OnMicroscopeButtonClick"
                                     settings_button_click = "SettingsUserControl_OnSettingsButtonClick">


                  <b:Interaction.Triggers>
                            <b:EventTrigger EventName="PowerButtonHandler">
                                <b:InvokeCommandAction Command="{Binding MyCommand}" />
                            </b:EventTrigger>
                        </b:Interaction.Triggers>

        </local:SettingsUserControl>

of course i did not change anything in the view model "MyCommand" is the same.
the reflection was like this:

	NS_IMPLEMENT_REFLECTION(BasicAssistantScreen::SettingsUserControl, "BasicAssistantScreen.SettingsUserControl")
{

	Noesis::UIElementData* data = NsMeta<Noesis::UIElementData>(Noesis::TypeOf<SelfClass>());
	data->RegisterEvent(power_button_clickEvent, "power_button_click", Noesis::RoutingStrategy_Bubble);
	data->RegisterEvent(microscope_button_clickEvent, "microscope_button_click", Noesis::RoutingStrategy_Bubble);
	data->RegisterEvent(settings_button_clickEvent, "settings_button_click", Noesis::RoutingStrategy_Bubble);
	data->RegisterProperty<bool>(is_module_visible_property, "IsVisibleControlProperty", Noesis::PropertyMetadata::Create(bool(true)));
	data->RegisterProperty<bool>(is_settings_button_background_shaded_property, "SettingsButtonShadedProperty", Noesis::PropertyMetadata::Create(bool(true)));
	data->RegisterProperty<LowerButtonType>(lower_button_type_property, "LowerButtonTypeProperty", Noesis::PropertyMetadata::Create(LowerButtonType(LowerButtonType::BackButton)));


}

and also b is defined at the start of the file (not in the code i provided if needed i can provide full xaml):
xmlns:b="http://schemas.microsoft.com/xaml/behaviors"
maybe the issue is something with data context?

04 Jul 2024, 19:23

EventName should be the name of the event you passed in the data->RegisterEvent() method when registering the custom event raised by your control.
From the code attached it should be "power_button_click" (or any other event you want to listen to).

<b:Interaction.Triggers>
  <b:EventTrigger EventName="power_button_click">
    <b:InvokeCommandAction Command="{Binding MyCommand}" />
  </b:EventTrigger>
</b:Interaction.Triggers>

05 Jul 2024, 10:23

thanks.
i needed to change what you said and finally the solution was change the data context ( DataContext="{Binding}").
this is the write code:

   <local:SettingsUserControl x:Name="SettingModule" Background="Transparent" Grid.Row="1" Grid.Column="0" Margin="10"
                                   HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsVisibleControlProperty="True"
                                   SettingsButtonShadedProperty="True"
                                    LowerButtonTypeProperty="{x:Static local:LowerButtonType.BackButton}"
                                     microscope_button_click = "SettingsUserControl_OnMicroscopeButtonClick"
                                     settings_button_click = "SettingsUserControl_OnSettingsButtonClick"
                                         DataContext="{Binding}">

         <b:Interaction.Triggers>
           <b:EventTrigger EventName="power_button_click">
             <b:InvokeCommandAction Command="{Binding MyCommand}" />
               </b:EventTrigger>
             </b:Interaction.Triggers>

        </local:SettingsUserControl>

Connect command in view model to custom property Topic is solved

Connect command in view model to custom property

Re: Connect command in view model to custom property

Re: Connect command in view model to custom property

Re: Connect command in view model to custom property

Re: Connect command in view model to custom property

Who is online