My VIEW refuses to draw data from the VIEWMODEL. The Visual Studio 2022 intellisense fills in the connections as if there is a connection, and it compiles just fine...but no data displays. I've stepped away from XAML for several years, and I'm trying to jump back in.
I am trying to have an entry field update the VIEWMODEL, and then the label to display the text being written to the VIEWMODEL. I keep paring the code back, trying to get ANYTHING to work before trying to execute more complicated bindings, but for now I can't get the VIEW to connect to the VIEWMODEL.
The following XAML is the extremely stripped down VIEW code.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:model="clr-namespace:MauiCalendar.Model"
xmlns:viewmodel="clr-namespace:MauiCalendar.ViewModel"
x:Class="MauiCalendar.View.DaySingleView"
x:DataType="viewmodel:DaySingleViewModel"
Title="{Binding Title}">
<VerticalStackLayout>
<Entry
Text="{Binding Title}" />
<Label
Text="{Binding Title}" />
<Label
Text="Test" />
<Button
Text="Load Days" />
</VerticalStackLayout>
</ContentPage>
The VIEWMODEL is called "DaySingleViewModel" located inside a ViewModel directory. I've got multiple fields and methods, but I'm stripping them out to keep this question lean.
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using CommunityToolkit.Diagnostics;
using System.Diagnostics;
using System.ComponentModel;
using MauiCalendar.Model;
using MauiCalendar.Services;
namespace MauiCalendar.ViewModel
{
[ObservableObject]
public partial class DaySingleViewModel
{
public DaySingleViewModel()
{ }
[ObservableProperty]
string title = "Starting Value";
}
}
The above code outputs the following:
Would anyone with more experience be willing to take a look at what I'm doing wrong?
I tested your code, and you need add BindingContext to connect the View with ViewModel firstly. Here's the code snippet below for your reference. Just keep the code neat and easy to understand.
View:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiCalendar.View.DaySingleView">
<VerticalStackLayout>
<Entry Text="{Binding Title}" />
<Label Text="{Binding Title}" />
<Label Text="Test"/>
<Button Text="Load Days"/>
</VerticalStackLayout>
</ContentPage>
View's code-behind:
using MauiCalendar.ViewModel;
namespace MauiCalendar.View;
public partial class DaySingleView : ContentPage
{
public DaySingleView()
{
BindingContext = new DaySingleViewModel();
InitializeComponent();
}
}
ViewModel:
using CommunityToolkit.Mvvm.ComponentModel;
namespace MauiCalendar.ViewModel
{
[ObservableObject]
public partial class DaySingleViewModel
{
[ObservableProperty]
string title = "Starting Value";
public DaySingleViewModel() { }
}
}
Starting Page:
using MauiCalendar.View;
namespace MauiCalendar;
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new DaySingleView();
}
}
Related
I´ve started to learn xamarin forms and now I'm already starting to apply animation to my Image. But I've got an error in my code.
Here's my code in xaml.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace teste2
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Page1 : ContentPage
{
public Page1()
{
InitializeComponent();
}
protected override async void OnAppearing()
{
base.OnAppearing();
// The animation
car.FadeTo(0, 2000);
}
}
}
And here's my error:
Error CS0103 Name 'car' does not exist in current context teste2
And here's my xaml code:
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="teste2.TabsPage" BarBackgroundColor="#508ca7"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:TabbedPage.ToolbarPlacement="Bottom">
<TabbedPage.Children >
<ContentPage Title="Voiture" IconImageSource="lab_icon_voiture.png" BackgroundColor="#DCCECD">
<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="Center">
<!-- The image that i want to animate-->
<Image Source="lab_voiture.png" x:Name="car"/>
</StackLayout>
</ContentPage>
<ContentPage Title="Avion" IconImageSource="lab_icon_avion.png" BackgroundColor="#f4f4f4">
<StackLayout Orientation="Vertical" HorizontalOptions="Center" VerticalOptions="CenterAndExpand">
<Image Source="lab_avion.png" x:Name="plane"/>
</StackLayout>
</ContentPage>
</TabbedPage.Children>
</TabbedPage>
This is a common issue with Xamarin on VS, especially on MAC, what happens is that your debug file does not generate the XAML changes onto the xaml.g.cs file. Which is basically the file that is autogenerated where our compiler combines the xaml and xaml.cs file.
All you need to do for this to update correctly is to comment the following line of code:
car.FadeTo(0, 2000);
Once you do this go for a clean build or a rebuild. once your app builds successfully go back to this line of code again and uncomment it and this should start working
Goodluck !
I'm working on a Xamarin App where I want to dynamically display a list of Registry Numbers from a Class Registry.
After the list of numbers is displayed, the user should choose one of them to login in the App.
I have decided that this list will be displayed as a list of Buttons, because once the user clicks it, nothing else needs to be done. However, most of documentation regarding Binding and ListView does not use Buttons as displaying element.
I have decided to follow the steps on this excellent video but I keep receiving the following error:
Binding: 'LocalCommand' property not found on '31348', target property: 'Xamarin.Forms.Button.Command'
Binding: 'LocalCommand' property not found on '10227', target property: 'Xamarin.Forms.Button.Command'
Actually, 31348 and 10227 are the numbers that I want to display. And indeed I indicated them as the Binding context at some point. But I would like to "change" that Binding so I can invoke the LocalCommand method. Probably implementing the LocalCommand in the object would solve the issue, but I definitely don't want to do that!
Questions:
Is there a better and simpler way to do this?
How can I do to "bring back" the Binding to the LocalCommand?
I'm still learning about Binding, so any tips would be really useful!
Thanks!
RegistryPage.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"
xmlns:behavior1="clr-namespace:SPConsigMobile.Utils"
x:Class="App.Views.RegistryPage"
BackgroundColor="{StaticResource AppBackgroundColor}"
Title="App"
NavigationPage.HasNavigationBar="false">
<ContentPage.Content>
<ListView x:Name="RegistryView"
ItemsSource="{Binding User.Registry}"
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Button Text="{Binding Number}"
Command="{Binding LocalCommand}"/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
RegistryPage.xaml.cs
namespace App.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class RegistryPage : ContentPage
{
public RegistryPage()
{
InitializeComponent();
RegistryView.ItemsSource = User.Registries;
}
public ICommand LocalCommand => new Command(CommandClicked);
private void CommandClicked()
{
Console.WriteLine("Command Button Clicked!");
}
}
}
In general when you set the ItemSource property of a control (in this case of your ListView), you have also to set the DataTemplate.
Now, the BindingContext of view inside the DataTemplate is an item of the collection you have binded to. In your case, because you have set the ItemSource to be a Collection of PhoneNumber, the bindingContext of each view is a PhoneNumber.
So when you are trying to acess your command with 'Command="{Binding LocalCommand}"', what you are doing is to search a LocalCommand Property inside a PhoneNumber class. What you need instead is to search it inside your Page class. So, give a name to your ContentPage with x:Name, then reference the source to your command binding to be the Root Page, and the Path to be the path to the command, starting from the Source (so NumberSelectedCommand in my example). the command parameter should be instead exactly the number, so it's an empty path Binding.
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="App1.RegistryPage"
x:Name="Root"
>
<StackLayout>
<ListView x:Name="RegistryView"
ItemsSource="{Binding User.Registry}"
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Button Text="{Binding Number}"
Command="{Binding Source={x:Reference Root}, Path=NumberSelectedCommand}"
CommandParameter="{Binding}"
/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
RegistryPage.xaml.cs
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class RegistryPage : ContentPage
{
public RegistryPage()
{
InitializeComponent();
RegistryView.ItemsSource = User.Registries;
NumberSelectedCommand = new Command<PhoneNumber>(OnNumberSelected);
}
// Commands
public ICommand NumberSelectedCommand { get; }
// Commands Handlers
private void OnNumberSelected(PhoneNumber selectedNumber)
{
// Do what you need with selected number.
}
}
I have been reading much about Xamarin for sometime and how to make a splash screen. I am quite new to something like this and hence i wanted to ask on here, Why is the splash screen not redirecting to the login page in the Emulator'
i am using Visual Studio 2019, I added a new folder drawable-hdpi and then added the images to it to be used inside the xaml. Now what? it does not redirect!
Here is what my code looks like
Splash screen Xaml (MainPage.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"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="VisitorMan.MainPage"
BackgroundColor="#fff">
<StackLayout HorizontalOptions="Center" VerticalOptions="Center" Padding="10">
<Image Source="splash_logo.png" x:Name="imgLogo" HeightRequest="150" WidthRequest="150"/>
</StackLayout>
</ContentPage>
The corresponsing MainPage.xaml.cs File Looks like this
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace VisitorMan
{
// Learn more about making custom code visible in the Xamarin.Forms previewer
// by visiting https://aka.ms/xamarinforms-previewer
[DesignTimeVisible(false)]
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
Animate();
}
public async Task Animate()
{
imgLogo.Opacity = 0;
await imgLogo.FadeTo(1, 4000);
Application.Current.MainPage = new LoginPage();
}
}
}
The Login Page which shows the username and password (LoginPage.xaml) Looks like this
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="VisitorMan.LoginPage"
BackgroundColor="#fff">
<ContentPage.Content>
<StackLayout Spacing="20" Padding="50" VerticalOptions="Center">
<Image Source="splash_logo.png" x:Name="imgLogo" HeightRequest="150" WidthRequest="150"/>
<Entry Placeholder="Username"></Entry>
<Entry Placeholder="Password" IsPassword="True"></Entry>
<Button Text="Log In" TextColor="White" BackgroundColor="#ff77D065"></Button>
</StackLayout>
</ContentPage.Content>
</ContentPage>
The splashscreen is just standstill and does not redirect to the Login Page. Could there be something i am missing?
I have tried shared sample , the problem is that you need to update nuget packages (especially version of Xamarin.Forms) of project to the latest version.
Right click Solution of project , choose Manage Nuget Packages For Solution...
After Updated :
The effect :
I didn't check but you can try this
public async Task Animate()
{
imgLogo.Opacity = 0;
await imgLogo.FadeTo(1, 4000);
Device.BeginInvokeOnMainThread(() =>
{
Application.Current.MainPage = new LoginPage();
});
}
In Xamarin.Forms, I have an ActivityIndicator and a label that pops up when a video is loading and I wish to correctly disable it when the video is fully loaded.
I have a binding in my code "this.IsBusy" that correctly enables/disables the ActivityIndicator.
I notice in my debug, I receive this message when the video starts:
05-05 14:17:09.843 V/MediaPlayer-JNI(19723): isPlaying: 1
QUESTION: How can I use this isPlaying state to turn my "this.IsBusy" to become false? Is it possible? Or do I need a custom renderer to make this all happen.
Below is my XAML:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:PreAppStructure"
xmlns:roxv="clr-namespace:Rox;assembly=Rox.Xamarin.Video.Portable"
x:Class="PreAppStructure.Page3"
Title="Welcome to page 3">
<ContentPage.Content>
<Grid>
<roxv:VideoView x:Name="VideoView" AutoPlay="True" LoopPlay="True" ShowController="True" Source="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" />
<StackLayout BackgroundColor="Black" HorizontalOptions="Center" VerticalOptions="Center" IsVisible="True">
<ActivityIndicator Color="White"
x:Name="loader"
IsRunning="{Binding IsBusy}"
VerticalOptions="Center" HorizontalOptions="Center" />
<Label x:Name ="loadingtext" Text="Loading...Please wait!" HorizontalOptions="Center" TextColor="White" IsVisible="{Binding IsBusy}"/>
</StackLayout>
</Grid>
</ContentPage.Content>
</ContentPage>
Below is my C# class:
...
using Rox;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace PreAppStructure
{
public partial class Page3 : ContentPage
{
public Page3()
{
InitializeComponent();
this.BindingContext = this;
this.IsBusy = true; // Activity Indicator is now successfully visible!
// When the app reaches the "isPlaying" state, I wish the Activity Indicator to not be visible (false)
} //On this line, the page loads, video buffers and then the video plays
}
}
I know there are already some questions about this situation but I've not found a solution even following literally some youtube videos.
My situation is the followed:
I've started a new Xamarin form application that supports Android and iOS (I don't know why only these ones and not even Windows10 and Windows Phone)
I've tried to put an Image inside the MainPage with a specific local or remote image but nothing seems to be shown
MainPage.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:liveband"
x:Class="liveband.MainPage">
<StackLayout>
<Image
WidthRequest="200"
HeightRequest="150"
x:Name="MyImage"/>
<Label Text="Welcome to Xamarin Forms!"
HorizontalOptions="Center"
VerticalOptions="Center"/>
<Slider />
</StackLayout>
</ContentPage>
MainPage.xaml.cs
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace liveband
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
MyImage.Source = new UriImageSource()
{
Uri = new Uri("http://www.satsignal.eu/wxsat/Meteosat7-full-scan.jpg")
};
}
}
}