I have a xamgrid and I need to call my viewmodel command to perform some action when user >double click on xamgrid cell(event: celldoubleclicked). How to handle this scenario with >MVVM?
You could use the EventToCommand trigger from MvvmLight.
<ig:XamGrid>
<i:Interaction.Triggers>
<i:EventTrigger EventName="CellDoubleClicked">
<cmd:EventToCommand Command={Binding MyCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ig:XamGrid>
Or the InvokeCommandAction in the Blend sdk:
<ig:XamGrid>
<i:Interaction.Triggers>
<i:EventTrigger EventName="CellDoubleClicked">
<i:InvokeCommandAction Command={Binding MyCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ig:XamGrid>
Related
I want to change the Source of an ImageButton in xaml based on the Theme (i.e. Light vs Dark). I get a System.NullReferenceException 'Object reference not set to an instance of an object.' when I use the following:
<ImageButton
Grid.Row="1"
Margin="10"
Command="{Binding CreateCommand}"
Source="{AppThemeBinding Light=add_box_black_48dp.svg, Dark=add_box_light_48dp.svg}"
HorizontalOptions="End"
VerticalOptions="End"/>
If I change the Source to the following everything works
Source="add_box_white_48dp"
Can I use AppThemeBinding to change the ImageButton Source in this way?
<Edited on 6/4/2022 to show xaml for cases that work and those that do not work. Also changed the names of the svg files to reflect light and dark cases>
I am using Visual Studio Community 2022 (64-bit) - Preview
Version 17.3.0 Preview 1.1
This ImageButton xaml throws the exception:
<ImageButton
Margin="10"
Command="{Binding CreateNewAccountCommand}"
Source="{AppThemeBinding Light=add_light.svg, Dark=add_dark.svg}"
HorizontalOptions="End"
VerticalOptions="End"
BackgroundColor="#376489"
CornerRadius="8"
WidthRequest="36"
HeightRequest="36">
</ImageButton>
This ImageButton xaml works and does not throw an exception
<ImageButton
Margin="10"
Command="{Binding CreateNewAccountCommand}"
Source="add_light.svg"
HorizontalOptions="End"
VerticalOptions="End"
BackgroundColor="#abdbe3"
CornerRadius="8"
WidthRequest="36"
HeightRequest="36">
</ImageButton>
This also works and does not throw an exception
<ImageButton
Margin="10"
Command="{Binding CreateNewAccountCommand}"
Source="add_dark.svg"
HorizontalOptions="End"
VerticalOptions="End"
BackgroundColor="#376489"
CornerRadius="8"
WidthRequest="36"
HeightRequest="36">
</ImageButton>
To work cross-platform, refer to .png files. These get built automatically by Maui:
Each image resource needs Property/BuildAction: "MauiImage".
Refer to .png in xaml:
Source="{AppThemeBinding Light=add_box_black_48dp.png, Dark=add_box_light_48dp.png}"
Verified by modifying Maui project's default MainPage, to say:
<Image Source="{AppThemeBinding Light=dotnet_bot.png, Dark=dotnet_bot.png}" ... />
This refers to a Media item dotnet_bot.svg, which (I infer) gets converted by "MauiImage" into a .png resource.
NOTE: Maybe the plan is to be able to leave off the extension. This works on Android, but the image does not show on Windows:
<!-- Doesn't work currently on Windows -->
<Image Source="{AppThemeBinding Light=dotnet_bot, Dark=dotnet_bot}" ... />
I want to make a xamarin forms carousel view containing 2 custom views. I have this code:
<ContentPage x:Class="MainView" xmlns:mvvm="clr-namespace:Prism.Mvvm;assembly=Prism.Forms" xmlns:views="clr-namespace:Views" x:Name="Main">
<CarouselView>
<CarouselView.ItemsSource>
<x:Array Type="{x:Type View}">
<views:View1 mvvm:ViewModelLocator.AutowirePartialView="{x:Reference Main}" />
<views:View2 mvvm:ViewModelLocator.AutowirePartialView="{x:Reference Main}" />
</x:Array>
</CarouselView.ItemsSource>
<CarouselView.ItemTemplate>
<DataTemplate>
<ContentView Content="{Binding .}" />
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</ContentPage>
When launching the app, exception is thrown:
Xamarin.Forms.Xaml.XamlParseException: 'Position 80:37. Can not find
the object referenced by Main'
If I just set both views as direct content of the main page, it works fine. What am I doing wrong?
Is there a way to make the collection of views through the MainViewModel?
I'm trying to use MVVMLight to bind a TreeViewItem Selected event to a command.
The TreeViewItem's are defined in a HierarchicalDataTemplate so I cannot add Interaction.Triggers (as shown below)
<HierarchicalDataTemplate
x:Key="TreeViewItemTemplate"
ItemsSource="{Binding ChildReportViewModels}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Selected">
<MvvmLight_Command:EventToCommand Command="{Binding LoadReportCommand, Mode=OneWay}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</HierarchicalDataTemplate>
How else can I add the EventTrigger to each TreeViewItem?
Thanks.
I forgot about this question.
For future ref, here's the solution I used...
Instead of trying to bind the EventToCommand to the Selected event of the TreeView,
I bound it to the MouseLeftButtonUpEvent of the TextBlock declared in the HierarchicalDataTemplate for TreeViewItems.
<HierarchicalDataTemplate
x:Key="TreeViewItemTemplate"
ItemsSource="{Binding ChildReportViewModels}"
ItemContainerStyle="{StaticResource TreeViewItemContainerStyle}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonUp">
<gs_cmd:EventToCommand Command="{Binding LoadPublicationCommand, Mode=OneWay}" CommandParameter="{Binding}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBlock>
</StackPanel>
</HierarchicalDataTemplate>
I have not much knowledge about MVVMLight and especially about EventTrigger.
But since there is no answer to your qestion yet the codeplex article TreeViewWithViewModel might help. It shows how to bind to SelectedItem and IsExpanded Properties in a wpf-treeview and how these can be used to implement load on demand in the treeview.
I am using MVVM in my application and binding combobox to my collection. However when i run it the combobox doesn't have any selected index and it shows a ugly emtpy box. How do i get past this issue?
This is my code :-
<ComboBox x:Name="cmbPasswordQuestion" ItemsSource="{Binding PasswordQuestionList}" DisplayMemberPath="SiteTermsXItemsName" SelectedValuePath="SiteTermsXItemId" SelectedValue="{Binding SignUpUser.PasswordQuestionId}" Margin="97,210,247,0" VerticalAlignment="Top" Height="24">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding PasswordQuestionCommand}" CommandParameter="{Binding SelectedItem, ElementName=cmbPasswordQuestion}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ComboBox>
I am not able to set the SelectedIndex = 0 directly in xaml as i am binding the collection run time.
Thanks in advance :)
All you need is to set SignUpUser.PasswordQuestionId to the id of the first item in the combobox right after you initialized the PasswordQuestionList property. And the binding will do the rest.
I have a user control called HomePage.xaml. I'm creating a model instance (using MVVM pattern) in the code behind file in the constructor of page as
MainViewModel model = new MainViewModel();
I have a button in HomePage.xaml which I want to bind to the command inside MainViewModel called GetData() and want to populate the data in datagrid. MainViewModel has an ObservableCollection which I would use to bind the data in datagrid.
Populating the data in datagrid without binding command works fine.
I'm binding the button as:
<StackPanel x:Name="stkPanelInput" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button x:Name="buttonGetData" Width="70" Content="GetData" Command="{Binding GetData}" Click="buttonGetData_Click"/>
</StackPanel>
How shall I bind the command using MVVM?
Like Archie said, set the DataContext of your page to the instance of your MainViewModel.
DataContext = model;
Then you have your XAML look like this:
<StackPanel x:Name="stkPanelInput" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button x:Name="buttonGetData" Width="70" Content="GetData" Command="{Binding GetDataCommand}" Click="buttonGetData_Click"/>
</StackPanel>