Xamarin Form Prism Region Show Empty Page - xamarin.forms

Below is one of my xaml file in my project. I was trying to create a region so that I can navigate a view into the region. However, when I added the code <ContetnView BorderColor="Black" Grid.Row="2" prism:RegionManager.RegionName="ContentRegion"/> and run it, a blank page was seen instead. When I remove the code line, I was able to view my controls. What is the root cause of 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"
xmlns:prism="http://prismlibrary.com"
mc:Ignorable="d"
x:Class="MultiPosApp.Views.HomePageView">
<StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
<StackLayout Grid.Row="1">
<Button Text="View A" Command="{Binding ButtonClickedCommand}" CommandParameter="RegionAView"/>
<Button Text="View B" Command="{Binding ButtonClickedCommand}" CommandParameter="RegionBView"/>
</StackLayout>
<ContetnView BorderColor="Black" Grid.Row="2" prism:RegionManager.RegionName="ContentRegion"/>
</Grid>
</StackLayout>
</ContentPage>

In the App.xaml.cs file in the RegisterTypes method add line containerRegistry.RegisterRegionServices();.
protected override void RegisterTypes(IContainerRegistry containerRegistry)
{
containerRegistry.RegisterRegionServices();
// ... other registrations
}

Related

How to selected the item from the search bar in Xamarin Forms

I'm trying to get the string value of a selected item from the search bar. If to select Apple, then to get as string the value "Apple".
I have tried to use SearchButtonPressed but is not working at all. This is my code for the search bar.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="Sim.Views.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="Main Page">
<ContentPage.Content>
<Grid BackgroundColor="DarkGray">
<StackLayout Margin="10"
VerticalOptions="Start"
HorizontalOptions="Start">
<SearchBar x:Name="searchBar"
HorizontalOptions="Fill"
VerticalOptions="StartAndExpand"
Placeholder="Search Access Points..."
CancelButtonColor="Orange"
PlaceholderColor="Orange"
TextTransform="Lowercase"
HorizontalTextAlignment="Start"
TextChanged="OnTextChanged"
/>
<Label Text="Type in the searchbox."
HorizontalOptions="Fill"
VerticalOptions="CenterAndExpand" />
<ListView x:Name="searchResults"
HorizontalOptions="Fill"
VerticalOptions="CenterAndExpand"
IsVisible="False"/>
</StackLayout>
</Grid>
</ContentPage.Content>
</ContentPage>
I solved this issue by adding ItemTapped
<ListView x:Name="searchResults"
HorizontalOptions="Fill"
VerticalOptions="CenterAndExpand"
ItemTapped ="GetTappedItem"/>
void GetTappedItem(object sender, ItemTappedEventArgs e)
{
var details = e.Item;
}
Thank you #Jason.

Xamarin MVVM Show master page sliding from the left, when pressing tabbed page tab item

I am trying to achieve the effect, cross-platform(ios, android and uwp), as shown in the image below:
Clicking "More" normally would open a page, as normal behaviour for a tab bar item. Not sure how to override that behaviour and reveal the sliding master page instead. To the left of the "More" tab bar item, theres another tab bar item, when clicked it refreshes the data on (or reloads) the MainPage.
SettingsPage.xaml (master page, the sliding settings page)
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyProject.Classes"
xmlns:views="clr-namespace:MyProject.Views"
x:Class="MyProject.Views.SettingsMasterPage"
IconImageSource="menu.png"
Padding="0,40,0,0"
Title="Menu">
<StackLayout>
<ListView x:Name="listView" x:FieldModifier="public">
<ListView.ItemsSource>
<x:Array Type="{x:Type local:MasterPageItem}">
<local:MasterPageItem Title="Settings Link 1" />
<local:MasterPageItem Title="Settings Link 2" />
<local:MasterPageItem Title="Settings Link 3" />
</x:Array>
</ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="5,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding IconSource}" />
<Label Grid.Column="1" Text="{Binding Title}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
MyTabbedPage.xaml
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
xmlns:views="clr-namespace:MyProject.Views;assembly=MyProject"
x:Class="Xamarin.Sigma01.Views.LoggerDetectionTabbedPage"
android:TabbedPage.ToolbarPlacement="Bottom"
BarBackgroundColor="White"
SelectedTabColor="Black"
BarTextColor="Black">
<TabbedPage.Children>
<views:MainPage IconImageSource="tab_icon_mainpage.png" />
<!-- second link should be the sandwhich button that brings up the settings page -->
</TabbedPage.Children>
</TabbedPage>
MainPage.xaml (the main page, navigated to by the left TabBar link icon, to the left of the sandwhich icon with title "More")
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to the Main page!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
An easy way I can achieve the effect is to use Shell. It's released for months and just check your VS version for the correct template.
Create a new Xamarin.Forms project using VS2019.
You can use Shell out of the box if you can see the following screen.
Find "ItemsPage.xaml" in the Views folder.
Add one line in the ContentPage at the top
<ContentPage
...
Shell.TabBarIsVisible="False">
Add a StackLayout to contain the existing CollectionView and add your bottom buttons.
<RefreshView ...>
<!-- new StackLayout -->
<StackLayout>
<CollectionView ..... />
<!-- new Buttons -->
<StackLayout
HeightRequest="52"
Orientation="Horizontal"
BackgroundColor="#2196F3"
Visual="Material">
<Button
WidthRequest="200"
BackgroundColor="Transparent"
Text="Refresh"
Command="{Binding LoadItemsCommand}" />
<Button
BackgroundColor="Transparent"
Text="More"
Clicked="Button_Clicked" />
</StackLayout>
</StackLayout>
Go to "ItemsPage.xaml.cs" to complete the button event, add a method:
private void Button_Clicked(object sender, EventArgs e)
{
Shell.Current.FlyoutIsPresented = true;
}
Set startup project and deploy, check the effect and play around.
Additionally, in the latest Xamarin.Forms, UWP Shell is an experimental feature, and so does in XF 5.0. But the flyout things will probably work fine (not too sure about this).
An alternative, following the idea from #Shaw, but without Shell is to use the good old MasterDetail Page (which supports UWP) and add two buttons at the bottom to provide the "More" and "Refresh" functionality.
If this sounds like a good option for you, keep reading:
Add a Master-Detail Page to your Solution
On Visual Studio 2019 adding a Master-Detail to your solution is pretty straight forward. You only need to right click the Xamarin.Forms Project in the Solution Explorer and go to Add -> New Item (or simply use the shortcut Ctrl+Shift+A):
in the window that appears, select Master-Detail Page, give it a cool name (MasterDetailPage1 in this example!) and click Add:
By doing this you successfully have added a Master Detail to your solution. Now just go to App and set MainPage to it as follows:
MainPage = new MasterDetailPage1();
Add the bottom buttons
Now we want two buttons at the bottom of our Detail page. This is simply done by adding a stack of two buttons that locate at the end. Our newly added MasterDetailPage1Detail.xaml will then look like:
<?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="MasterTabRefresh.MasterDetailPage1Detail"
Title="Detail">
<StackLayout>
<Label Text="This is a detail page. To get the 'triple' line icon on each platform add a icon to each platform and update the 'Master' page with an Icon that references it."
Padding="10"/>
<StackLayout Orientation="Horizontal"
VerticalOptions="EndAndExpand"
Spacing="0">
<Button BackgroundColor="CornflowerBlue"
Text="Refresh"
TextColor="White"
CornerRadius="0"
HorizontalOptions="FillAndExpand"/>
<Button BackgroundColor="CornflowerBlue"
Text="More"
TextColor="White"
CornerRadius="0"
HorizontalOptions="FillAndExpand"
Clicked="MoreClicked"/>
</StackLayout>
</StackLayout>
</ContentPage>
which should look like:
And in the code behind (MasterDetailPage1Detail.xaml.cs ) we add the "More" functionality:
private void MoreClicked(object sender, EventArgs e)
{
((MasterDetailPage)Application.Current.MainPage).IsPresented = !((MasterDetailPage)Application.Current.MainPage).IsPresented;
}
Add a nice X (close) button to your menu/master
This could be achieved by adding a label with an "X" at the top right of the menu.
Simply modify your MasterDetailPage1Master.xaml to look like (note Label at Column 2 Row 0!)
<?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="MasterTabRefresh.MasterDetailPage1Master"
Title="Master">
<StackLayout>
<ListView x:Name="MenuItemsListView"
SeparatorVisibility="None"
HasUnevenRows="true"
ItemsSource="{Binding MenuItems}">
<ListView.Header>
<Grid BackgroundColor="#03A9F4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="80"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Label Grid.Column="2"
Grid.Row="0"
Text="X"
FontAttributes="Bold"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="X_Tapped"/>
</Label.GestureRecognizers>
</Label>
<Label
Grid.Column="1"
Grid.Row="2"
Text="My wonderful App"
Style="{DynamicResource SubtitleStyle}"/>
</Grid>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="15,10" HorizontalOptions="FillAndExpand">
<Label VerticalOptions="FillAndExpand"
VerticalTextAlignment="Center"
Text="{Binding Title}"
FontSize="24"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
Which should look like this:
And then add the "Close" functionality to that "X" Label in the code behind (MasterDetailPage1Master.xaml):
private void X_Tapped(object sender, EventArgs e)
{
((MasterDetailPage)Application.Current.MainPage).IsPresented = false;
}
And that is it! This should get you going. Happy coding!

Xamarin Forms Prism DialogService show behind ModalNavigation

I am using a custom DialogService, the problem I have is that I first show a page as a modal and when sending to display the DialogPage it is apparently not shown but it really is behind the model page.
Invocation of the modal page
await _navigationService.NavigateAsync("ProfilePage", useModalNavigation: true);
Xaml CustomDialog
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="http://prismlibrary.com"
prism:DialogLayout.LayoutBounds="0.5, 0.5, -1, -1"
prism:DialogLayout.RelativeWidthRequest="0.60"
BackgroundColor="White"
x:Class="ComedorIndustrial.Prism.Views.MessageDialog">
<Grid Padding="30,60">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Source="iconoError.png" />
<Label Text="{Binding Title}" HorizontalTextAlignment="Center" TextColor="#ee3837" Grid.Row="1" Style="{StaticResource RobotoBold}" FontSize="30"/>
<Label Text="{Binding Message}" HorizontalTextAlignment="Center" TextColor="#bdbcc2" Grid.Row="2" FontSize="14" />
<Button Text="Volver a intentar"
Command="{Binding CloseCommand}"
BackgroundColor="#ee3837" BorderRadius ="25" TextColor="White" HorizontalOptions="FillAndExpand" Opacity="1" FontSize="12" Margin="0,15,0,0"
Grid.Row="3"/>
</Grid>
</ContentView>
Custom dialog invocation
public static void ShowAlert(this IDialogService dialogService, string title, string message)
{
var parameters = new DialogParameters
{
{ "title", title },
{ "message", message }
};
dialogService.ShowDialog("MessageDialog", parameters);
}
EDIT:
I have solved it!
Add the plugin: Prism.Plugin.Popups
And then add the following line of code in App.xaml.cs: containerRegistry.RegisterPopupDialogService();
The documentation is on the following page:
popups.prismplugins.com
Regards!
What you've described is a known bug in Prism 7.2. This issue is fixed in Prism 8, or as you've noted you can simply use the Prism.Plugin.Popups to use the PopupPage variant of the service.

xamarin forms master detail page flow direction in arabic

I have a Master-Detail Page in my project, I've set the phone language to Arabic and everything is working fine the master page is on the right and the icon is on the right. But the thing is the TitleView (toolbaritems) are pushed a little bit to the right when the phone is set to Arabic. I tried this without Master-Detail page project and the TitleView is working fine and it is in the exact place.
With Master Detail Page:
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:AppXamarin.Pages"
x:Class="AppXamarin.Pages.MasterMainPage" NavigationPage.HasNavigationBar="False" NavigationPage.HasBackButton="False" FlowDirection="{x:Static Device.FlowDirection}">
<MasterDetailPage.Master>
<local:MasterPage x:Name ="masterPage" FlowDirection="{x:Static Device.FlowDirection}"/>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage FlowDirection="{x:Static Device.FlowDirection}">
<x:Arguments>
<local:MenuPage></local:MenuPage>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
MenuPage Xaml file:
<NavigationPage.TitleView>
<Grid Grid.Row="0" Grid.Column="0" HorizontalOptions="EndAndExpand" FlowDirection="{x:Static Device.FlowDirection}">
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="cart_Clicked"/>
</Grid.GestureRecognizers>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image x:Name="BadgeIconImage" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Margin="6" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Source="cart">
<Image.HeightRequest>
<OnIdiom Phone="25" Tablet="35"/>
</Image.HeightRequest>
<Image.WidthRequest>
<OnIdiom Phone="25" Tablet="35"/>
</Image.WidthRequest>
</Image>
<Frame x:Name="BadgeFrame" Grid.Row="0" Grid.Column="1" CornerRadius="12" Padding="10,4" HasShadow="false" OutlineColor="Transparent" BackgroundColor="Transparent">
<Label x:Name="BadgeTextLabel" FontSize="12" FontAttributes="Bold" HorizontalOptions="EndAndExpand" TextColor="#FF0000"/>
</Frame>
</Grid>
</NavigationPage.TitleView>
Result:
Without Master Detail Page:
<NavigationPage.TitleView>
<Grid Grid.Row="0" Grid.Column="0" HorizontalOptions="EndAndExpand" FlowDirection="{x:Static Device.FlowDirection}">
<!--<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="cart_Clicked"/>
</Grid.GestureRecognizers>-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image x:Name="BadgeIconImage" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Margin="6" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Source="cart">
<Image.HeightRequest>
<OnIdiom Phone="25" Tablet="35"/>
</Image.HeightRequest>
<Image.WidthRequest>
<OnIdiom Phone="25" Tablet="35"/>
</Image.WidthRequest>
</Image>
<Frame x:Name="BadgeFrame" Grid.Row="0" Grid.Column="1" CornerRadius="12" Padding="10,4" HasShadow="false" OutlineColor="Transparent" BackgroundColor="Transparent">
<Label x:Name="BadgeTextLabel" FontSize="12" FontAttributes="Bold" HorizontalOptions="EndAndExpand" TextColor="#FF0000"/>
</Frame>
</Grid>
<!--</Grid>-->
</NavigationPage.TitleView>
Result:
My understanding tells me you are trying to add toolbar items so you do not use titleView for that:
What you should be doing, on the other hand, is something like below
C#:
this.ToolbarItems.Add(new ToolbarItem()
{
Icon = "BadgeIconImage",
Command = YourCommand,
});
XAML:
<ContentPage.ToolbarItems>
<ToolbarItem Order="Primary" Icon="BadgeIconImage" />
</ContentPage.ToolbarItems>
To understand Xamarin Forms Toolbar check this guide by Adam Pedley
Update
I have a feeling that the padding that you are using on the Frame is what's pushing your View
Padding="10,4"
Check this:
<Frame x:Name="BadgeFrame" Grid.Row="0" Grid.Column="1" CornerRadius="12" Padding="10,4" HasShadow="false" OutlineColor="Transparent" BackgroundColor="Transparent">
Also could be the corner radius.
Yes I did it
manifest :
<application android:label="Sanaap" android:icon="#mipmap/launcher_foreground" android:theme="#style/MainTheme" android:supportsRtl="true">
MainView.xaml
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Sanaap.App.Views.MenuView"
FlowDirection="RightToLeft"
Title="Main">

Problems with Button in custom ViewCell

I have a Button in a ViewCell...
<?xml version="1.0" encoding="UTF-8"?>
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ConnectionCrew.UI.Shared.Appointments.CompletionFormMain">
<ViewCell.View>
<Grid Margin="8, 16, 8, 16">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackLayout BackgroundColor="#bdbdbd" Padding="1">
<Editor x:Name="txtBxShiftNotes" BackgroundColor="White" Grid.Row="0" HeightRequest="100" />
</StackLayout>
<Button x:Name="btnSubmit" VerticalOptions="End" Grid.Row="1" HorizontalOptions="FillAndExpand" Text="Confirm Attendence" BackgroundColor="Lime" TextColor="White" HeightRequest="50" />
</Grid>
</ViewCell.View>
</ViewCell>
Two undesirable things are happening.
1) The bottom of the containing ViewCell is just beneath the button's text - it's as if the baseline of the text is aligned to the bottom of the cell.
2) If I click on the button, its click event doesn't fire and the whole cell flashes. Except if I click just above the text - in which case there is no flashing and the click event is raised.
How can I fix these issues? I'd prefer no flashing, correct alignment and proper hit testing.
I don't know about your problem, but I suggest to:
Add "ColumnDefinition" property to your Grid (Rows_and_Columns)
Add Grid.Row and Grid.Column property to StackLayout control
Remove Grid.Row property from Editor control (it's inside a StackLayout, so StackLayout should have Row and Column property)
Add Grid.Column property to Button control
Post images of your actual problems
Do you have the problem on iOS, Android, UWP?
A repo on GitHub could be useful
I moved the margins to the child elements...
<?xml version="1.0" encoding="UTF-8"?>
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ConnectionCrew.UI.Shared.Appointments.CompletionFormMain">
<ViewCell.View>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackLayout Margin="8, 8, 8, 0" Grid.Row="0" BackgroundColor="#bdbdbd" Padding="1">
<Editor x:Name="txtBxShiftNotes" BackgroundColor="White" HeightRequest="100" />
</StackLayout>
<Button Margin="8, 0, 8, 8" x:Name="btnSubmit" VerticalOptions="CenterAndExpand" Grid.Row="1" HorizontalOptions="FillAndExpand" Text="Confirm Attendence" BackgroundColor="Lime" TextColor="White" HeightRequest="50" />
</Grid>
</ViewCell.View>
</ViewCell>

Resources