It's not clear to me if Compiled binding is supported in prism. Its an extremely good feature that avoids reflection and speeds up the load of the page.
Hopefully either Brian Lagunas or Dan Siegel will answer this one.
Can somebody clarify if compiled binding is supported in prism and how to do it or does it magically do it or do we need to manually set bindingcontext.
An answer would be greatly appreciated by anyone?
updated with noddy sample
<?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="PrismCompiledBinding.Views.MainPage"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:models="clr-namespace:PrismCompiledBinding.Models">
<!--x:DataType="ViewModel:MainPageViewModel"-->
<!--mc:Ignorable="d"-->
<ContentPage.Content>
<ListView
ItemsSource="{Binding Monkeys}"
SeparatorVisibility="None"
VerticalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate x:DataType="models:Monkey">
<ViewCell>
<StackLayout
Padding="20,10,0,10"
Orientation="Horizontal"
Spacing="20"
VerticalOptions="FillAndExpand">
<Label
FontSize="Medium"
Text="{Binding Name}"
TextColor="Black"
VerticalOptions="Center" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
using System.Collections.ObjectModel;
using Prism.Navigation;
using PrismCompiledBinding.Models;
namespace PrismCompiledBinding.ViewModels
{
public class MainPageViewModel : ViewModelBase
{
public MainPageViewModel(INavigationService navigationService)
: base(navigationService)
{
Monkeys = GetMonkeys();
}
private ObservableCollection<Monkey> monkeys;
public ObservableCollection<Monkey> Monkeys
{
get => monkeys;
set => SetProperty(ref monkeys, value);
}
private ObservableCollection<Monkey> GetMonkeys()
{
ObservableCollection<Monkey> list=new ObservableCollection<Monkey>();
list.Add(new Monkey
{
Name = "Baboon",
Location = "Africa & Asia",
Details =
"Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae.",
});
list.Add(new Monkey
{
Name = "Capuchin Monkey",
Location = "Central & South America",
Details =
"The capuchin monkeys are New World monkeys of the subfamily Cebinae. Prior to 2011, the subfamily contained only a single genus, Cebus.",
});
return list;
}
}
}
public class Monkey
{
public string Name { get; set; }
public string Location { get; set; }
public string Details { get; set; }
}
thanks
Yes Compiled Bindings works fine with Prism.
I specifically tested it using Prism version 7.2.0.1422 and Xamarin.Forms 4.2.0.848062.
I followed this tutorial.
According to your description, You want to binding in Prism.Form. If you want to use Prism.Forms, you need to install Prism Template Pack, go to Tools > Extensions and Updates select Online and search for Prism Template Pack. Locate the the extensions, click Download, and complete the installation firstly.
Then needing to do following thing:
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
The Prism library is referenced.
prism:ViewModelLocator.AutowireViewModel="True"
This view (MainPage.xaml) is wired to the view model (MainPageViewModel.cs) automatically via naming conventions allowing for databinding to the view model. So you don't need to bind BindContext.
I do one sample that you can take a look:
https://github.com/CherryBu/PrismApp
There are also two article that may help you:
https://prismlibrary.com/docs/xamarin-forms/Getting-Started.html
https://dzone.com/articles/getting-started-with-xamarin-forms-and-prism
Related
I'm getting the error System.InvalidOperationException: 'Cannot convert "VerticalGrid, 2" into Xamarin.Forms.IItemsLayout' during InitalizeComponent() of my ContentPage containing a CollectionsView.
The code works properly on UWP, and the error occurs when running on Android. Being new to xamarin.forms, I'm not really sure what to start looking for.
EDIT: it works if I choose "VerticalList".
Here's a bit of my xaml:
<ContentPage ... >
<StackLayout>
<CollectionView
x:Name="DetailGrid"
ItemsLayout="VerticalGrid, 2" >
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="20" BackgroundColor="Crimson">
<Image Source= "{Binding Path}" WidthRequest="300"/>
<Label Text="{Binding FileName}" TextColor ="Bisque" LineBreakMode="WordWrap" />
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ContentPage>
And here's some code-behind:
namespace varlist
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class CollectionPage : ContentPage
{
public ObservableCollection<NodeData> nodes = new ObservableCollection<NodeData>();
public CollectionPage ()
{
InitializeComponent ();
nodes.Add (new ImageData { FileName = "image_chair_pk.jpg" });
...
DetailGrid.ItemsSource = nodes;
}
}
}
I got the same error with you when I use a Xamarin.forms version 4.5.0.725.
After I update my Xamarin.forms to the latest version 4.8.0.1687, everything works well.
Please update your Xamarin.forms version to fix this problem:
I found a workaround. This appears to be a framework bug.
According to Xamarin.Forms CollectionView Layout the syntax I used should work - and it does work for UWP.
They also show an alternate declaration to specify ItemsLayout:
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="2" />
</CollectionView.ItemsLayout>
And, this syntax works on Android.
I filed a bug on github:[Bug] CollectionView with ItemsLayout=VerticalGrid crashes on Android #12920
You can omit this property if you wish it vertical, the default is set to VerticalList. If you want your collectionView to be Horizontal, just use HorizontalList.
See https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout
I am trying to play a video using Plugin.MediaManager.Forms and I am referring to this blog.
Step 1: Added Plugin.MediaManager and Plugin.MediaManager.Forms.
Step 2: XAML code - Added a VideoView
<?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:local="clr-namespace:VideoPlayerApp"
x:Class="VideoPlayerApp.MainPage"
xmlns:forms="clr-namespace:Plugin.MediaManager.Forms;assembly=Plugin.MediaManager.Forms"
Title="Video Player">
<ContentPage.Content>
<StackLayout>
<Label Text="Xamarin Forms"
FontSize="40"
TextColor="Azure"/>
<Label Text="Video Player Application"
FontSize="58"
TextColor="BlueViolet"/>
<Button x:Name="PlayStopButtonText"
Text="Play"
Clicked="PlayStopButton"
TextColor="BlueViolet"/>
<forms:VideoView HeightRequest="202"
WidthRequest="202"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Step 3: xaml.cs code
public partial class MainPage : ContentPage
{
private string videoUrl = "https://sec.ch9.ms/ch9/e68c/690eebb1-797a-40ef-a841-c63dded4e68c/Cognitive-Services-Emotion_high.mp4";
public MainPage()
{
InitializeComponent();
}
private void PlayStopButton(object sender, EventArgs e)
{
if (PlayStopButtonText.Text == "Play")
{
CrossMediaManager.Current.Play(videoUrl, MediaFileType.Video);
PlayStopButtonText.Text = "Stop";
}
else if (PlayStopButtonText.Text == "Stop")
{
CrossMediaManager.Current.Stop();
PlayStopButtonText.Text = "Play";
}
}
}
But getting error on this step:
Error CS0103 The name 'MediaFileType' does not exist in the current context
Step 4: Also added VideoViewRenderer.Init();in MainActivity.cs, AppDelegate.cs and MainPage.xaml.cs. But getting following error for this initialization.
The name 'VideoViewRenderer' does not exist in the current context
Am I missing something? I checked some other blogs but same error occuring. I have added a sample project here.
Android Options Screenshot:
The blog seems out of date. Part of APIs and methods were obsoleted . You should check the newest docs from https://github.com/martijn00/XamarinMediaManager#usage .
use the following code instead of VideoViewRenderer.Init() ;
CrossMediaManager.Current.Init();
And just need to call the method
CrossMediaManager.Current.Play(videoUrl);
And I checked your demo . You need to update the version of Xamarin.Forms to 4.2.x both in share project and specific platforms(Android and iOS) .Which will match to the version of the plugin.
Don't forget to set the Dex complier to d8 .
Right click your Android project -> Property-> Android Options.
I'm trying to use prism 7.1 AutoWirePartialView to bind a PartialView to its viewModel. However, binding is not working, or at least, setting the viewModel to the PartialView does not seem to work, it still has the page's BindingContext as BindingContext.
There is my Page :
<?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="Project.Core.Views.NotConnectedViews.ForecastDemoPage"
xmlns:carouselForecast="clr-namespace:Project.Core.Views.MainViews"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
x:Name="ForecastDemo"
BackgroundColor="{StaticResource PrimaryColorOne}" ControlTemplate="{StaticResource MainAppTemplate}">
<ContentPage.ToolbarItems>
<ToolbarItem Name="SearchForecast" Command="{Binding ShowSearchForecastDemoCommand}" Order="Primary" Icon="ic_search_white_24dp.png" Priority="0" />
</ContentPage.ToolbarItems>
<ContentView x:Name="ContentViewForecast" ControlTemplate="{StaticResource ForecastTownControlTemplate}">
<carouselForecast:ForecastPartialViewCarousel prism:ViewModelLocator.AutowirePartialView="{x:Reference ForecastDemo}"></carouselForecast:ForecastPartialViewCarousel>
</ContentView>
</ContentPage>
Binding: 'DayWeatherForecasts' property not found on
'Project.Core.ViewModels.ForecastDemoPageViewModel', target property:
'Project.Core.Views.MainViews.ForecastPartialViewCarousel.ItemsSource'
As you can see, I'm using the partial view as a ContentPresenter for a ContentView that uses a ControlTemplate.
There is my PartialView :
<carousel:CarouselViewControl x:Name="carouselView"
Position="{Binding CarouselPosition}"
PositionSelectedCommand="{Binding PositionChanged}"
Orientation="Horizontal" AnimateTransition="True" IsSwipeEnabled="False"
ItemsSource="{Binding DayWeatherForecasts}" InterPageSpacing="10"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:carousel="clr-namespace:CarouselView.FormsPlugin.Abstractions;assembly=CarouselView.FormsPlugin.Abstractions"
x:Class="Project.Core.Views.MainViews.ForecastPartialViewCarousel">
<!-- Item template is defined here, removed for readability -->
</carousel:CarouselViewControl>
And this is my PartialView ViewModel :
namespace Project.Core.ViewModels
{
public class ForecastPartialViewCarouselViewModel : ViewModelBase
{
public ForecastPartialViewCarouselViewModel(IForecastService forecastService,
INavigationService navigationService) : base(navigationService)
{
InitStubForecasts();
}
private ObservableCollection<DayWeatherForecast> _dayWeatherForecasts;
public ObservableCollection<DayWeatherForecast> DayWeatherForecasts
{
get => _dayWeatherForecasts;
set => SetProperty(ref _dayWeatherForecasts, value);
}
}
}
Of course DayWeatherForecasts is set with some stub values. I simplified the viewModel for readability purpose.
I'm not using prism AutoWiring viewModel, so in app.xaml.cs :
containerRegistry.RegisterForNavigation<ForecastDemoPage, ForecastDemoPageViewModel>();
Question : Could it be that my PartialViewModel is in the ViewModels folder and that the Partialview I want to be be bound to this ViewModel is under a subfolder MainViews ? Should I create a MainViewsViewModel folder and put my viewModel there ?
EDIT : I tried this solution, but as I expected it does nothing.
If not, then I don't know why it doesnt work ...
Thanks !
Ok so I finally found out that its not enough to put this to my PartialView
prism:ViewModelLocator.AutowirePartialView="{x:Reference ForecastDemo}
As I organized my views in subfolders, prism cannot register alone my ViewModel and my PartialView.
So what I needed is to register manually the ViewModel with the PartialView using ViewModelLocationProvider
protected override void RegisterTypes(IContainerRegistry containerRegistry)
{
ViewModelLocationProvider.Register<ForecastPartialViewCarousel,
ForecastPartialViewCarouselViewModel>();
}
It's not only a matter of name, but of namespace too. If I wanted the PartialView to have the correct ViewModel set w/o registering it manually, I should have put my PartialView in the Views root folder and the corresponding ViewModel in the ViewModels root folder (with naming convention)
I have a class that inherits ObservableCollection< Double[] > (let's call it "TestClass"). I.e. collection of double arrays. Can I use this kind of collection in XAML. I'm trying to add items but it looks like I cannot add double arrays as items. Is this even possible?
Something like this:
<TestClass>
<x:Array Type="sys:Double">
<!-- What comes here...? -->
</x:Array>
</TestClass>
Actually, I would rather like to use ObservableCollection< Double[,] > but I think it's impossible - two-dimensional array I mean.
Help me out here... :)
First, you need a ViewModel. The ViewModel will be your container class where we insert custom double-arrays or fetch them from the database. If it's not just a lookup, you will need to implement INotifyPropertyChanged (but that's a different topic):
namespace MyCompany.Common.ViewModels
{
using System.ComponentModel;
using System.Runtime.CompilerServices;
public class PointsArrayVM
{
private double[] _points;
public double[] Points
{
get
{
return _points;
}
set
{
_points = value;
}
}
}
}
In this example, I'll add two custom records of double[] (firstArray & secondArray). I then assign the collection to a CollectionViewSource, and (just to illustrate) I assign more records from the database to a second CollectionViewSource with the exposed MainViewModel property, List<PointsArrayVM> DatabasePoints. If it's not just a lookup, you will need an ObservableCollection instead of a List. In your XAML, under Window.Resources, add the following:
<x:Array x:Key="firstArray" Type="sys:Double"
xmlns:sys="clr-namespace:System;assembly=mscorlib">
<sys:Double>1.1</sys:Double>
<sys:Double>1.2</sys:Double>
<sys:Double>1.3</sys:Double>
</x:Array>
<x:Array x:Key="secondArray" Type="sys:Double"
xmlns:sys="clr-namespace:System;assembly=mscorlib">
<sys:Double>2.1</sys:Double>
<sys:Double>2.2</sys:Double>
<sys:Double>2.3</sys:Double>
</x:Array>
<x:Array x:Key="pointsArray" Type="{x:Type viewmodels:PointsArrayVM}"
xmlns:viewmodels="clr-namespace:MyCompany.Common.ViewModels;assembly=Common">
<viewmodels:PointsArrayVM Points="{StaticResource firstArray}"/>
<viewmodels:PointsArrayVM Points="{StaticResource secondArray}"/>
</x:Array>
<CollectionViewSource x:Key="customPointsCollectionViewSource" Source="{StaticResource pointsArray}"/>
<CollectionViewSource x:Key="databasePointsCollectionViewSource" Source="{Binding DatabasePoints}"/>
Now that we have our CollectionViewSources, we can add them to a CompositeCollection with CollectionContainers. In this example I'm using Points[0] as the display text, and Points1 as the selected value:
<ComboBox Text="{Binding PointsFilter}" VerticalAlignment="Top"
SelectedValuePath="Points[0]" DisplayMemberPath="Points[1]">
<ComboBox.ItemsSource>
<CompositeCollection>
<CollectionContainer Collection="{Binding Source={StaticResource customPointsCollectionViewSource}}"/>
<CollectionContainer Collection="{Binding Source={StaticResource databasePointsCollectionViewSource}}"/>
</CompositeCollection>
</ComboBox.ItemsSource>
</ComboBox>
I hope this helps! For some very informative XAML tips, have a look at this site.
Regarding your second question
Yes, WPF seems to have a problem with assigning a control path to a specific point in a multi-dim array. You can however work around this by also having a Points2DArray ViewModel that contains an array of PointsArrayVM objects:
namespace MyCompany.Common.ViewModels
{
using System.ComponentModel;
using System.Runtime.CompilerServices;
public class Points2DArrayVM
{
private PointsArrayVM[] _pointsArrays;
public PointsArrayVM[] PointsArrays
{
get
{
return _pointsArrays;
}
set
{
_pointsArrays = value;
}
}
}
}
So in your XAML, you can now put the collections of one ViewModel into the other container ViewModel:
<x:Array x:Key="pointsArray1" Type="{x:Type viewmodels:PointsArrayVM}"
xmlns:viewmodels="clr-namespace:MyCompany.Common.ViewModels;assembly=Common">
<viewmodels:PointsArrayVM Points="{StaticResource firstArray}"/>
<viewmodels:PointsArrayVM Points="{StaticResource secondArray}"/>
</x:Array>
<x:Array x:Key="pointsArray2" Type="{x:Type viewmodels:PointsArrayVM}"
xmlns:viewmodels="clr-namespace:MyCompany.Common.ViewModels;assembly=Common">
<viewmodels:PointsArrayVM Points="{StaticResource firstArray}"/>
<viewmodels:PointsArrayVM Points="{StaticResource secondArray}"/>
</x:Array>
<x:Array x:Key="points2DArray" Type="{x:Type viewmodels:Points2DArrayVM}"
xmlns:viewmodels="clr-namespace:MyCompany.Common.ViewModels;assembly=Common">
<viewmodels:Points2DArrayVM PointsArrays="{StaticResource pointsArray1}"/>
<viewmodels:Points2DArrayVM PointsArrays="{StaticResource pointsArray2}"/>
</x:Array>
<CollectionViewSource x:Key="customPointsCollectionViewSource" Source="{StaticResource points2DArray}"/>
Then in your ComboBox, it would be something like:
<ComboBox Text="{Binding PointsFilter}" VerticalAlignment="Top"
SelectedValuePath="PointsArrays[0].Points[0]" DisplayMemberPath="PointsArrays[0].Points[1]">
<ComboBox.ItemsSource>
<CompositeCollection>
<CollectionContainer Collection="{Binding Source={StaticResource customPointsCollectionViewSource}}"/>
</CompositeCollection>
</ComboBox.ItemsSource>
</ComboBox>
I have a hierarchy of view models representing formatted content:
public abstract class ContentPartViewModel : ViewModel
{
}
public class TextContentPartViewModel : ContentPartViewModel
{
public string Text { ... }
}
public class TitleContentPartViewModel : TextContentPartViewModel
{
}
public class HyperlinkContentPartViewModel : TextContentPartViewModel
{
public string Uri { ... }
}
I have an encompassing view model that contains a collection of ContentPartViewModels to be rendered:
public class ContentViewModel
{
public ICollection<ContentPartViewModel> ContentParts { ... }
}
I then have a ContentView that renders all parts of the content:
<UserControl ...>
<ItemsControl ItemsSource="{Binding ContentParts}"/>
</UserControl>
In an ideal world, I would just define a DataTemplate for each of the content part types and they would be rendered accordingly. However, Silverlight does not support the DataType property on the DataTemplate class, so that is not an option.
Another option would be to provide a DataTemplateSelector and do the mapping from view model type to DataTemplate myself. Alas, ItemsControl in SL2 does not have an ItemTemplateSelector property - only an ItemTemplate property.
That left me with no option but to provide an ItemTemplate that then uses a converter to turn off all the UI apart from the piece relevant to that content part:
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding Text}" FontWeight="Bold" Visibility="{Binding Converter={StaticResource TitleContentPartConverter}}"/>
<TextBlock Text="{Binding Text}" Visibility="{Binding Converter={StaticResource TextContentPartConverter}}"/>
<HyperlinkButton Content="{Binding Text}" NavigateUri="{Binding Uri}" Visibility="{Binding Converter={StaticResource HyperlinkContentPartConverter}}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
This is obviously rather awful, both for performance and for readability/correctness of code. It also makes it much harder for me to format the output correctly. So, questions:
Can anyone recommend a better way to do this in SL2?
Can anyone confirm whether the situation has improved in SL3?
Thanks,
Kent
Yes. DataType in DataTemplate is not supported in Silverlight 2 or Silverlight 3.
You can work around ItemTemplateSelector in Silverlight. Please take a look at this sample.
http://silverlight.net/forums/t/12598.aspx
protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
{
base.PrepareContainerForItemOverride(element, item);
DataTemplateSelector selector = this.ItemTemplateSelector;
if (null != selector)
{
((ContentPresenter)element).ContentTemplate = selector.SelectTemplate(item, element);
}
}