I cant find a way to implement an onClick event on a button that will allow the application to navigate between the login and the second view.
How can I do that ?
Here is what i did
I created a method in my LoginViewModel.cs file that should redirect me to the second view.
class LoginViewModel
{
private async Task SecondView_Click()
{
App.Current.MainPage = new NavigationPage(new SecondView());
}
}
Then I've defined a BindingContext in my Login.cs
public partial class Login : ContentPage
{
public Login()
{
InitializeComponent();
BindingContext = new LoginViewModel();
}
}
Then I define a button in my Login.xaml that has a binded command property
<StackLayout
VerticalOptions="CenterAndExpand">
<Entry StyleId="UsernameEntry"
Placeholder="Username"
Text="{Binding Username}" />
<Entry StyleId="PasswordEntry"
Placeholder="password"
Text="{Binding Password}" />
<Button
StyleId="btn_connexion"
Text="Connexion"
Command="{Binding connexion}" />
<Button
StyleId="btn_testSecondView"
Text="Test 2nd View"
Command="{Binding SecondView_Click}"></Button>
</StackLayout>
This works for me
PAGE 1 XAML
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TestRelativeLayout.MyPage1"
Title="TabbedPage">
<StackLayout>
<Button Clicked="Handle_Clicked" Text = "Press">
</Button>
</StackLayout>
</ContentPage>
PAGE 1 XAML.CS
using Xamarin.Forms;
namespace TestRelativeLayout
{
public partial class MyPage1 : ContentPage
{
public MyPage1()
{
InitializeComponent();
}
public void Handle_Clicked(object sender, System.EventArgs e)
{
Application.Current.MainPage = new NavigationPage(new MyPage2());
}
}
}
Try to remove
private async Task
and use
void
private async Task SecondView_Click()
{
App.Current.MainPage = new NavigationPage(new SecondView());
}
Here is what I did.
I found that there is a "clicked" property on that prompt an intellisense dropdown with a "new event handler".
<StackLayout
VerticalOptions="CenterAndExpand">
<Entry StyleId="UsernameEntry"
Placeholder="Username"
Text="{Binding Username}" />
<Entry StyleId="PasswordEntry"
Placeholder="password"
Text="{Binding Password}" />
<Button
StyleId="btn_connexion"
Text="Connexion"
Clicked="connexion" />
<Button
StyleId="btn_testSecondView"
Text="Test 2nd View"
Clicked="SecondView_Click"></Button>
</StackLayout>
Once i did that it created a method in the code behind "Login.xaml.cs".
From there I just paste the navigation method and it worked
private async Task SecondView_Click()
{
App.Current.MainPage = new NavigationPage(new SecondView());
}
The fact that it is a PCL project makes it difficult to find the right information because everything you find on the internet concerns the ios/android solution and not the portable solution.
Related
I'm using the CameraView from the XamarinCommunityToolKit. Why button command "Capture" does not fire when I click it? Is it because code is running in emulator and not in actual physical phone with a real camera?
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
x:Class="App2.Views.CapturePage">
<StackLayout>
<xct:CameraView
x:Name="cameraView"
CaptureMode="Photo"
FlashMode="Off"
HorizontalOptions="FillAndExpand"
MediaCaptured="CameraView_MediaCaptured"
OnAvailable="CameraView_OnAvailable"
VerticalOptions="FillAndExpand" />
<Button
x:Name="doCameraThings"
Command="{Binding CaptureCommand, Source={x:Reference cameraView}}"
IsEnabled="True"
Text="Capture" />
<Image
x:Name="previewPicture"
Aspect="AspectFit"
BackgroundColor="LightGray"
HeightRequest="250"
IsVisible="False" />
</StackLayout>
</ContentPage>
ViewModel looks like this:
public class CaptureViewModel : BaseViewModel
{
public Command CaptureCommand { get; }
public CaptureViewModel()
{
CaptureCommand = new Command(CapturePageClicked);
}
private async void CapturePageClicked()
{
//Some code here
}
}
From Xamarin Community Toolkit CameraView, there is one Icommand ShutterCommand for CameraView, so you can binding ShutterCommand to Button.Command.
<StackLayout>
<xct:CameraView
x:Name="cameraview"
CaptureMode="Photo"
FlashMode="On"
HorizontalOptions="FillAndExpand"
MediaCaptured="cameraView_MediaCaptured"
VerticalOptions="FillAndExpand"
/>
<Button
x:Name="doCameraThings"
Command="{Binding ShutterCommand, Source={x:Reference cameraview}}"
IsEnabled="True"
Text="Capture" />
<Image
x:Name="previewPicture"
Aspect="AspectFit"
BackgroundColor="LightGray"
HeightRequest="250"
IsVisible="False" />
</StackLayout>
public partial class Page6 : ContentPage
{
public Page6()
{
InitializeComponent();
}
private void cameraView_MediaCaptured(object sender, Xamarin.CommunityToolkit.UI.Views.MediaCapturedEventArgs e)
{
switch (cameraview.CaptureMode)
{
default:
case CameraCaptureMode.Default:
case CameraCaptureMode.Photo:
previewPicture.IsVisible = true;
previewPicture.Rotation = e.Rotation;
previewPicture.Source = e.Image;
break;
case CameraCaptureMode.Video:
previewPicture.IsVisible = false;
break;
}
}
}
But you can also binding another command to Button.click in Viewmodel.
<xct:CameraView
x:Name="cameraview"
CaptureMode="Photo"
FlashMode="On"
HorizontalOptions="FillAndExpand"
MediaCaptured="cameraView_MediaCaptured"
VerticalOptions="FillAndExpand"
/>
<Button
x:Name="doCameraThings"
Command="{Binding CaptureCommand}"
IsEnabled="True"
Text="Capture" />
<Image
x:Name="previewPicture"
Aspect="AspectFit"
BackgroundColor="LightGray"
HeightRequest="250"
IsVisible="False" />
public class CaptureViewModel
{
public Command CaptureCommand { get; }
public CaptureViewModel()
{
CaptureCommand = new Command(CapturePageClicked);
}
private async void CapturePageClicked()
{
//Some code here
}
}
Binding ViewModel to current page BindingContext
public Page6()
{
InitializeComponent();
this.BindingContext = new CaptureViewModel();
}
simple sample about CameraView, you can take a look:
https://github.com/xamarin/XamarinCommunityToolkit/blob/main/samples/XCT.Sample/Pages/Views/CameraViewPage.xaml
I want to create an application that can Create, Read, Update and Delete Merchandiser records.
I am struggling with how to "Update" and "Delete" a record based on a ItemSelected in the ListView.
The item selected in the ListView represents a Merchandiser and is currently being passed into each new View as an argument.
I intend to store data in an SQLite database, but for simplicity have not included any of that logic. Database Commands (Save, Delete etc.) will be created in the MerchandiserViewModel
Here is my slimmed down code so far
Merchandiser.cs Model
public class Merchandiser
{
public string Name { get; set; }
public string PhoneNumber { get; set; }
// Additional Properties not shown for simplicity
}
MerchandiserViewModel.cs ViewModel
public class MerchandiserViewModel : ViewModelBase
{
public ObservableCollection<Merchandiser> MerchandiserList { get; set; }
private Merchandiser selectedItem;
public Merchandiser SelectedItem
{
get { return selectedItem; }
set
{
selectedItem = value;
RaisePropertyChanged();
}
}
public MerchandiserViewModel()
{
MerchandiserList = new ObservableCollection<Merchandiser>();
CreateData();
}
private void CreateData()
{
for (int i = 0; i < 20; i++)
{
Merchandiser merchandiser = new Merchandiser();
merchandiser.Name = $"Merchandiser {i}";
merchandiser.PhoneNumber = $"12{i}6{i*3}{i*8}{i*9/3+2}";
MerchandiserList.Add(merchandiser);
}
}
}
// Database commands and other logic not shown...
}
BaseViewModel.cs
public class ViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void RaisePropertyChanged([CallerMemberName] string propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
MerchandiserListPage.xaml & .cs View - Display List of Merchandiers
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MVVM.Views.MerchandisersListPage">
<ContentPage.Content>
<StackLayout>
<ListView x:Name="MerchandiserListView"
ItemSelected="MerchandiserListView_ItemSelected"
SelectionMode="Single"
HasUnevenRows="True"
ItemsSource="{Binding MerchandiserList}"
SelectedItem="{Binding SelectedItem}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Label
FontSize="Large"
Text="{Binding Name}"
VerticalOptions="Center" />
<Label
FontSize="Small"
Text="{Binding PhoneNumber}"
VerticalOptions="Center" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
// MerchandisersListPage.xaml.cs - Code Behind
public MerchandisersListPage()
{
InitializeComponent();
this.BindingContext = new MerchandiserViewModel();
}
private async void MerchandiserListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
Merchandiser merchandiser = (Merchandiser)e.SelectedItem;
await Navigation.PushAsync(new MerchandisersProfilePage(merchandiser));
}
MerchandisersProfilePage.xaml & .cs
This page should navigate to the MerchandiserEditPage using an Edit Button but I'm not sure if I am handling the 'Code Behind' correctly?
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MVVM.Views.MerchandisersProfilePage">
<ContentPage.Content>
<StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Name: " />
<Label
FontSize="Large"
Text="{Binding Name}"
VerticalOptions="Center" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="PhoneNumber: " />
<Label
FontSize="Small"
Text="{Binding PhoneNumber}"
VerticalOptions="Center" />
</StackLayout>
<Button Text="Edit"
Clicked="EditButton_Clicked"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
// MerchandisersProfilePage.xaml.cs - Code Behind
Merchandiser selectedMerchandiser;
public MerchandisersProfilePage(Merchandiser merchandiser)
{
InitializeComponent();
selectedMerchandiser = merchandiser; // Is this what I should be doing?
this.BindingContext = merchandiser;
}
private async void EditButton_Clicked(object sender, EventArgs e)
{
// Am I doing this the correct way??
await Navigation.PushAsync(new MerchandiserEditPage(selectedMerchandiser));
}
MerchandiserEditPage.xaml & .cs This is where I am stuck.
I will need to update the record in the database by calling a method in the MerchandiserViewModel but am not sure how to do this? The method (which ideally should be called by a Command) to update the database has the following signature UpdateMerchandiser(Merchandiser merchandiser).
Ideally I would like the Save Button to use a Command instead of Clicked so I can access the Save command in the MerchandiserViewModel but this imposes another problem around form validation. How then can I then validate this information (e.g. Name is not empty) before saving it the the database? Because the MerchandiserViewModel doesn't know anything about the MerchandiserEditPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MVVM.Views.MerchandiserEditPage">
<ContentPage.Content>
<StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Name: " />
<Entry
FontSize="Large"
Text="{Binding Name}"
VerticalOptions="Center" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="PhoneNumber: " />
<Entry
FontSize="Small"
Text="{Binding PhoneNumber}"
VerticalOptions="Center" />
</StackLayout>
<!-- Ideally this should use 'Command' instead of 'Clicked' -->
<Button Text="Save"
Clicked="SaveButton_Clicked"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
// MerchandiserEditPage.xaml.cs - Code Behind
public MerchandiserEditPage(Merchandiser merchandiser)
{
InitializeComponent();
this.BindingContext = merchandiser;
}
// I would prefer not to use an event handler but use a Command in the MerchandiserViewModel instead
// I also need to perform some basic validation e.g. Name entry should not be empty etc.
private async void SaveButton_Clicked(object sender, EventArgs e)
{
// How can I Save/Update the changes?
// Pop() page off the stack and return to the MerchandiserProfileView
await Navigation.PopAsync();
}
I believe the above code is designed in accordance to MVVM, however if not, please advise where I am violating this pattern?
I also want to do similar for deleting a record but once I get the update method sorted I'm sure deleting will follow similar logic.
Note: The code above is not shown in its entirety and is missing SQLite database functionality and other logic for simplicity. All functionality to the database (Save, Update, Delete) is in the MerchandiserViewModel. I will edit or add any additional information to this question as required to help provide a complete picture of the problem.
I have a simple screen example trying to implement the ScrollToAsync function. I can't get the function to scroll at all.
My XAML:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.ItemList">
<ContentPage.Content>
<ScrollView x:Name="myScroll">
<StackLayout>
<Label Text="Welcome to Xamarin.Forms!" />
<Label Text="Welcome to Xamarin.Forms!" />
<Label Text="Welcome to Xamarin.Forms!" />
<Label Text="Welcome to Xamarin.Forms!" />
// Many labels to fill space here
<Label Text="Welcome to Xamarin.Forms!" />
</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>
And the C# is:
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class ItemList : ContentPage
{
public ItemList ()
{
InitializeComponent ();
myScroll.ScrollToAsync(0, 100, false);
}
}
What am I doing wrong? It must be something simple I need to do. I already tried wrapping the ScrollToAsync call in an async method, so I can use "await" before it, but this did not work.
That is because the scroll is not loaded yet, better try to add this method to your code
protected override void OnAppearing()
{
base.OnAppearing();
scLista.ScrollToAsync(0,100,false);
}
Adding Delay would helped You ,
I set it in a timer and worked fine for me .
public MainPage()
{
InitializeComponent();
StarAnimate();
}
private void StarAnimate()
{
Device.StartTimer(TimeSpan.FromSeconds(1), () =>
{
myScroll.ScrollToAsync(LatestElment, ScrollToPosition.Center, true);
return false;
});
}
LatestElment:The element to scroll.
I have a Xamarin Forms application using mvvmcross. There I have navigation via TabbedPages. Each page has a xaml + code behind and viewmodel.
Relevant code for first page:
<?xml version="1.0" encoding="utf-8" ?>
<pages:BaseTabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:ABBI_XPlat_3.Pages;assembly=ABBI_XPlat_3"
x:Class="ABBI_XPlat_3.Pages.DeviceListPage"
Title="Discover devices"
x:Name="DevicePage">
<pages:BaseTabbedPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="DeviceItemTemplate"> ... </DataTemplate>
</ResourceDictionary>
</pages:BaseTabbedPage.Resources>
<pages:BaseTabbedPage.Children>
<pages:BasePage Title="Scan for devices">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<StackLayout BackgroundColor="#FF6969" Padding="10" IsVisible="{Binding IsStateOn, Converter={StaticResource InverseBoolean}}">
<Label Text="{Binding StateText}" FontSize="18" HorizontalTextAlignment="Center"></Label>
</StackLayout>
<ListView Grid.Row="1" ItemsSource="{Binding Devices}" SelectedItem="{Binding SelectedDevice, Mode=TwoWay}"
IsPullToRefreshEnabled="True"
RefreshCommand="{Binding RefreshCommand}"
IsRefreshing="{Binding IsRefreshing, Mode=OneWay}"
RowHeight="80"
ItemTemplate="{StaticResource DeviceItemTemplate}">
</ListView>
<StackLayout Grid.Row="2" Orientation="Horizontal">
<Button Text="Connect" Command="{Binding ConnectToSelectedCommand}" HorizontalOptions="FillAndExpand"/>
<Button Text="Stop Scan" Command="{Binding StopScanCommand}" HorizontalOptions="End"/>
<ActivityIndicator IsRunning="{Binding IsRefreshing}"
HeightRequest="24"
WidthRequest="24"
VerticalOptions="Center"
HorizontalOptions="End"/>
</StackLayout>
</Grid>
</pages:BasePage>
<pages:ServiceListPage Title="Services"/>
<pages:OtherTabbedPage Title="Services"/>
</pages:BaseTabbedPage.Children>
</pages:BaseTabbedPage>
I am able to call different viewmodels from buttons in my main view model using:
public MvxCommand ConnectToSelectedCommand => new MvxCommand(ConnectToSelectedDeviceAsync, CanDisplayServices);
private async void ConnectToSelectedDeviceAsync()
{
ShowViewModel<ServiceListViewModel>(new MvxBundle(new Dictionary<string, string> { { DeviceIdKey, SystemDevices.FirstOrDefault().Id.ToString() } }));
}
within my main ViewModel. But I want to be able to use the tabs to navigate between ViewModels. At the moment if I click on a tab, then it brings up the page, but without the associated ViewModel.
Help please!
So what you have to do to get MvvmCross to bind the Pages to the VMs is have a MvxTabbedPage as the Root TabbedPosition & have your pages that go in the tabs as the Detail TabbedPosition. Then in the MvxTabbedPage's ViewModel, you have to Navigate to all the Detail Tab's ViewModels. Here is an example.
namespace NameSpace
{
// Tabbed Detail Page
[MvxTabbedPagePresentation(Title = "Home", Icon = "ic_home_black.png")]
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class HomePage : MvxContentPage<HomeViewModel>
{
public HomePage()
{
InitializeComponent();
}
}
// Tabbed Root Page
[MvxTabbedPagePresentation(TabbedPosition.Root, WrapInNavigationPage = true)]
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class TabbedPage : MvxTabbedPage<TabbedViewModel>
{
public TabbedProjectDetailsPage()
{
InitializeComponent();
}
}
// Tabbed Detail ViewModel
public class HomeViewModel : MvxViewModel
{
IMvxNavigationService _navigation;
public HomeViewModel(IMvxNavigationService navigation)
{
_navigation = navigation;
}
}
// Tabbed Root ViewModel
public class TabbedViewModel : MvxNavigationViewModel
{
public TabbedProjectDetailsViewModel(IMvxLogProvider log, IMvxNavigationService navigation) : base(log, navigation)
{
}
MvxCommand _navHome;
public ICommand NavigateHome
{
get
{
_navHome = _navHome ?? new MvxCommand(async () =>
{
await NavigationService.Navigate<HomeViewModel>();
});
return _navHome;
}
}
public void ShowViewModels()
{
this.NavigateHome.Execute(null);
}
bool appeared = false;
public override void ViewAppearing()
{
base.ViewAppearing();
if (!appeared)
{
ShowViewModels();
}
appeared = true;
}
}
}
Finally managed to solve the problem. It was so simple that I could not find an answer anywhere. I just had to add a bindingcontext to the codebehind of the page.
public ServiceListPage()
{
InitializeComponent();
this.BindingContext = new ViewModels.ServiceListViewModel(Plugin.BLE.CrossBluetoothLE.Current.Adapter, UserDialogs.Instance);
}
Im trying to add some items to a Listview which i added using Xamarin.Forms markup in an xaml file.
The button can be accessed by hooking with the click event.But since the listview is empty i need the event like ondraw like in winforms, so that i can hook to it when it is drawn.
In the XAML file I have :
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ButtonXaml.ButtonXamlPage">
<StackLayout>
<Button Text="Tap for click count!"
BorderWidth="10"
TextColor="Red"
HorizontalOptions="Center"
Clicked="OnButtonClicked" />
<ListView
HorizontalOptions="Center"
/>
</StackLayout>
</ContentPage>
In the .cs file i have
using System;
using Xamarin.Forms;
namespace ButtonXaml
{
public partial class ButtonXamlPage
{
int count = 0;
public ButtonXamlPage()
{
InitializeComponent();
}
public void OnButtonClicked(object sender, EventArgs args)
{
((Button)sender).Text = "You clicked me";
}
}
}
So should i hook to events in Listview or can i do something like Resource.getElementbyID like we do in android
To access a Forms control in the code-behind, you need to assign it a name, using the x:Name attribute
in XAML:
<ListView HorizontalOptions="Center" x:Name="MyList" />
in code:
MyList.ItemsSource = myData;
There is a bug in Xamarin where VS doesn't see the defined x:Name
http://forums.xamarin.com/discussion/25409/problem-with-xaml-x-name-and-access-from-code-behind
Say you've defined an image in XAML:
<Image x:Name="myImageXName" />
Then this should work in code behind:
this.FindByName<Image>("myImageXName");
In my case the problem was lack of line XamlCompilation(XamlCompilationOptions.Compile)] in .xaml.cs file.
Example:
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
BindingContext = new MainPageViewModel();
}
...
}