How can I use partial views in Prism? - xamarin.forms

I have Prism 7.1 with Xamarin Forms 3.5. I can't get partial views to work correctly.
The consuming view has this up the top
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
xmlns:converters="clr-namespace:MapManPrism.Converters"
x:Class="MapManPrism.Views.WelcomeWizardPage"
xmlns:mvvm="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
x:Name="wizard"
Title="Welcome" xmlns:cv="clr-namespace:PanCardView;assembly=PanCardView"
xmlns:cvi="clr-namespace:PanCardView.Controls;assembly=PanCardView" xmlns:views="clr-namespace:MapManPrism.Views">
As you can see I am giving the consuming page a name (wizard).
I then have a carouselview that has several views in it
<cv:CarouselView SelectedIndex="{Binding CurrentPage}" IsPanSwipeEnabled="false" IsUserInteractionEnabled="false">
<cv:CarouselView.ItemsSource>
<x:Array Type="{x:Type View}">
<ContentView Padding="10" Margin="10">
...
</ContentView>
<ContentView>
<Frame>
<views:PublisherDetails mvvm:ViewModelLocator.AutowirePartialView="{x:Reference wizard}"></views:PublisherDetails>
</Frame>
</ContentView>
In my app.xaml.cs I have this line
ViewModelLocationProvider.Register<PublisherDetails, PublisherDetailsViewModel>();
But I can't navigate to the consuming page when its set up like this. Removing "mvvm:ViewModelLocator.AutowirePartialView="{x:Reference wizard}"" makes it work, but obviously the view model for the partial view doesn't get wired up.
How can I fix this? Or, is there a way to manually connect the partial view's view model to see if that fixes it?

Related

CarouselView swiping is Buggy

I'm relatively new to Xamarin Forms. I'm trying to have a view that allows me to swipe left/right between different pages with a page indicator at the bottom. I'm using CarouselView, as suggested by the internet, and it seems to work. But, the selected page is very buggy. Sometimes, swiping to the next page causes it to snap back to the previous page. Sometimes, it stays on the current page. Sometimes, it works correctly. I observe the same behavior on both Android and UWP. Although, it appears to be a little worse in UWP than Android.
It seems the index for the current page is getting mixed up somehow. Here is my XAML:
<ContentPage.Content>
<StackLayout>
<CarouselView x:Name="Pages" IndicatorView="{x:Reference ActivePageIndicator}">
<CarouselView.ItemsSource>
<x:Array Type="{x:Type ContentView}">
<views:TroubleshootingPage />
<views:StatusPage />
<views:ContactInfoPage />
</x:Array>
</CarouselView.ItemsSource>
<CarouselView.ItemTemplate>
<DataTemplate>
<ContentView Content="{Binding .}" />
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView
x:Name="ActivePageIndicator"
IndicatorColor="LightGray"
SelectedIndicatorColor="Green"
IndicatorSize="16"
IndicatorsShape="Circle"
HorizontalOptions="Center"
Margin="4"
/>
</StackLayout>
</ContentPage.Content>
I've tried using different types of views in the ItemsSource list. But, I still get the same effect.
Is there something I'm doing wrong? Something I'm missing? A bug in CarouselView?
Thanks.

Xamarin.Forms CollectionView trigger event on Focus/Hover

I'm currently attempting to implement a Xamarin.Forms application which will be targeting Android TV. I have simplified my application to show the specific issue I'm having.
I have a collection of items which which I am displaying via a CollectionView. I am able to scroll around items inside this CollectionView using the D-Pad controls absolutely fine, as can be seen via this screenshot, where the "focussed"/"selected" item is visible if I make the layout bounds visible.
There is nothing available except the "ItemSelected" event on the CollectionView which only occurs on actually pressing enter. I have tried to add in "Focus" events to all the elements that make up this page and nothing gets triggered. I am unsure what exactly is being "focussed" upon here.
This is my page:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewmodels="clr-namespace:Channels.ViewModels"
x:Class="Channels.MainPage"
x:DataType="viewmodels:ChannelViewModel"
BackgroundColor="{DynamicResource BackgroundColour}">
<StackLayout Orientation="Vertical" Padding="10">
<Label Text="Selected Item" TextColor="White" Margin="0, 0, 10, 10"></Label>
<CollectionView ItemsSource="{Binding Data}">
<CollectionView.ItemsLayout>
<LinearItemsLayout ItemSpacing="5"></LinearItemsLayout>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="5" Spacing="5" BackgroundColor="Red">
<Label Text="Test Text" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" TextColor="White"></Label>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ContentPage>
I would like to know exactly what is getting focus here and if it is possible to do something like I have stated.
I haven't found many examples of Xamarin being used in terms of Android TV so it might not be possible to do things like this. I have also tried implementing the same code in .NET Maui and cannot find any events that might work here.
You could use the GestureRecognizers in the template to triger what you want to do when you selected the item or click on the item.
<Label>
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Label.GestureRecognizers>
</Label>

What is the best way to create the MasterDetailPage menu items in Xamarin.Forms

I'm using a MasterDetailPage in my Xamarin.Forms application.
To creat the menu items, I use buttons
<MasterDetailPage.Master>
<ContentPage Title="Menu">
<StackLayout Orientation="Vertical">
<Button Text="Club-House" Command="{Binding ClubHouseCommand}" />
<Button Text="Parcours" />
<BoxView VerticalOptions="CenterAndExpand" />
<Button Text="A propos" Command="{Binding AProposCommand}" VerticalOptions="End" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
Is there a better way to do it ? I was thinking about something more menuish like MenuItem or else.
Thanks
There is nothing standard for implementing a menu in the Master page.
You can use
ListView
StackLayout
Grid
Or a combination. StackLayout and ListView will most likely be your best options. Personally I go for a StackLayout because it's quicker to code and render than a ListView, which may come with more issues than advantages. However if I have a large menu (which I try to avoid), ListView may be quicker to code. But ListViews are generally meant for dynamically loaded data, not static.
As for the elements, the most common will be
Button
Label
While buttons are designed for clicking, sometimes I move to label's if I don't want to have to undo all the default styling, and use the TapGestureRecognizer.
You can create a new User Control for a menu item, to avoid code replication.
All up, there is no standard. Make it easy to code and understand, and quick to render. How you do that, depends on your requirements.

Implementing UWP flyout splitview using masterdetailview in prism?

I am a complete noob to xamarin :)
So was wondering if someone could point me to right resources.
To be short, I want to implement something like this in prism using Xamarin MasterDetailPage.
Using the master detail sample here, the hamburger menu doesn't act as a fly out.
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="HelloWorld.Views.MyMasterDetail">
<MasterDetailPage.Master>
<ContentPage Title="Default">
<StackLayout>
<Button Text="ViewA" Command="{Binding NavigateCommand}" CommandParameter="MyNavigationPage/ViewA?id=A" />
<Button Text="ViewB" Command="{Binding NavigateCommand}" CommandParameter="MyNavigationPage/ViewB?id=B" />
<Button Text="ViewC" Command="{Binding NavigateCommand}" CommandParameter="MyNavigationPage/ViewC?id=C" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
</MasterDetailPage>
Right now, though there is enough space, it shows something like
(just as a sample, I am not using SplitViewMenu at all)
I need icons/some small text to show initially and on clicking hamburger, it should expand (you know just like the first link/ groove music app behavior).
Tips?
Right now, though there is enough space, it shows something like
In my experience, if you have assigned the Symbol property for SimpleNavMenuItem, the possible reason is you haven't imported the Themes file Generic.xaml under Themes folder
This file includes templates, styles for custom controls. For example, for NavMenuItem's template, FontIcon's Glyph property needs to be assigned correctly here:
<DataTemplate x:Key="NavMenuItemTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<FontIcon FontSize="16" Glyph="{Binding Path=SymbolAsChar}" VerticalAlignment="Center"
HorizontalAlignment="Center" ToolTipService.ToolTip="{Binding Path=Label}" />
<TextBlock Grid.Column="1" Text="{Binding Path=Label}" VerticalAlignment="Center" />
</Grid>
</DataTemplate>
While SimpleNavMenuItem class's SymbolAsChar property is based on Symbol's value:
public sealed class SimpleNavMenuItem : INavigationMenuItem
{
......
public Symbol Symbol { get; set; }
public char SymbolAsChar => (char) Symbol;
......
}
And if you still can make it work, please share a demo:)
I've sort of been looking for something like this myself since I can't hide the NavigationBar shown in the Master page of the MasterDetailPage when i run it on a Windows 10 Mobile device (I can hide for PC though). So basically, I'm looking into eventually building my own version of the MasterDetailPage.
Since I have not built it yet, I can't tell you exactly how to achieve what you're asking, but I do know that it will require you to either:
Write your own custom renderer for MasterDetailView or,
Write a new control and its renderer
In both cases, your renderer will involve creating and manipulating a new SplitView (which is the native UWP control that your SplitViewMenu example is extending). There's a tutorial for creating the actual UWP control here. If you havent learned about Xamarin's renderers yet, they are the "Translator" and "Interpreter" between a Xamarin.Forms control and a given platform's native control. I suspect Xamarin will eventually rewrite their MastDetailPage renderer for UWP to use a SplitView as a base, but who knows when that will be. Xamarin also has an open source SDK for Xamarin.Forms (as well as the others) on GitHub so you can study the MasterDetailPageRenderer for UWP.

Design-time binding does not work in caliburn.micro 2.0.2

I want to use design-time binding in WPF with caliburn.micro version 2.0.2.
I made simple test project and add neccessary settings for that:
<Window x:Class="CaliburnTest.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
xmlns:caliburn="http://www.caliburnproject.org"
xmlns:caliburnTest="clr-namespace:CaliburnTest"
d:DataContext="{d:DesignInstance caliburnTest:MainView, IsDesignTimeCreatable=True}"
caliburn:Bind.AtDesignTime="True">
<Grid>
<TextBlock Name="Test" Width="150" Height="50"/>
As a result I dont see value of textblock in design-time, but I see it after app starts.
Could someone tell me what I am missing here? Maybe some additional settings?

Resources