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.
Related
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
}
I have a mobile app with Xamarin.Forms and FreshMvvm. Every page uses a control template defined in App.xaml:
<ControlTemplate x:Key="MainPageTemplate">
<Grid BindingContext="{Binding Source={RelativeSource TemplatedParent}}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="9*" />
</Grid.RowDefinitions>
<Image Source="{local:ImageResource MyApp.Images.My_logo.jpg}" Margin="0, 0, 0, 5" Grid.Row="0" />
<Label Text="{Binding ScreenName}" FontSize="Subtitle" TextColor="Black" FontAttributes="Bold" HorizontalOptions="Center" Grid.Row="1" />
<Label Text="{Binding ErrorMessage}" TextColor="Red" Grid.Row="2" />
<ContentPresenter Margin="10, 0, 10, 10" Grid.Row="3" />
</Grid>
</ControlTemplate>
The ScreenName property is defined in the PageModel like this:
protected string _screenName;
public string ScreenName => _screenName;
For some reason, the ScreenName is not showing up on the page that uses the control template. It does if I replace the Binding with a hard-coded text:
<Label Text="Something" ...
When setting your BindingContext to your {RelativeSource TemplatedParent}, your binding context is the page.
To access your ViewModel, you must change your xaml to access your property through the "BindingContext" of your page.
<Label Text="{Binding BindingContext.ScreenName}" FontSize="Subtitle" TextColor="Black" FontAttributes="Bold" HorizontalOptions="Center" Grid.Row="1" />
Im facing a real strange problem, I am developing a xamarin forms app, let me show you the problem:
So I have this listview with items.
click here to see the list
Then i tapped an item, and this fires a Navigation.PushAsync to this page
Then, when i go back to the list, The image size has changed, watch this image
I have tried change the list view to a collection view but the problem is the same. Im deploying this app on android
This is the xaml code
<StackLayout Margin="10,0,10,0">
<ListView x:Name="lvResultadoBusqueda" SelectionMode="Single" ItemSelected="lvResultadoBusqueda_ItemSelected" ItemTapped="lvResultadoBusqueda_ItemTapped" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="#FFFFFF" Padding="0,5,0,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="15"/>
<RowDefinition Height="15"/>
<RowDefinition Height="15"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Frame Padding="0" OutlineColor="#E4E7EC" HasShadow="True" Grid.RowSpan="4" Grid.Column="0">
<Image Source="{Binding urlImagenPortada}" Aspect="Fill"></Image>
</Frame>
<Label Text="{Binding titulo}" Grid.Row="0" Grid.Column="1" FontSize="14" TextColor="#000000" FontAttributes="Bold"></Label>
<Label Text="{Binding autores}" FontSize="12" Grid.Row="1" Grid.Column="1" TextColor="#868b8f"></Label>
<StackLayout Grid.Row="2" Grid.Column="1" Orientation="Horizontal" Spacing="5" BackgroundColor="Transparent">
<Label Text="{Binding valoracionExacta}" FontSize="12" TextColor="#868b8f" BackgroundColor="Transparent"></Label>
<Image Source="star_blue.png" WidthRequest="10" HeightRequest="10" Margin="0,4,0,0"></Image>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
and this is the c# code
private void lvResultadoBusqueda_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
ListView listView = (ListView)sender;
listView.SelectedItem = null;
}
private void lvResultadoBusqueda_ItemTapped(object sender, ItemTappedEventArgs e)
{
var item = e.Item as BuscarCatalogoVM;
if (item != null)
{
Navigation.PushAsync(new Catalogo.DetalleCatalogo(item.idRepositorioDigital));
}
}
I really hope you can help me, thanks !
UPDATE 1: I tried what Ryan told me:
<Frame Padding="0" OutlineColor="#E4E7EC" HasShadow="True" Grid.RowSpan="4" Grid.Column="0">
<Image Source="{Binding urlImagenPortada}" Aspect="AspectFit" HorizontalOptions="FillAndExpand"></Image>
</Frame>
And this is the screenshot :C
UPDATE 2: With the FFImageLoading plugin, I dont have that problem, it works great, but it seems that the DownsampleToViewSize property is not working, when I set it to true, the image does not fit , So I have to put it false and add Aspect="Fill" or Aspect="AspectFill", but this solutions cuts the image of the book
Friend from Peru
Try using Xamarin.FFImageLoading.Forms
https://askxammy.com/optimizing-handling-images-with-ffimageloading/
Also
I share this link for the management of transitions.
https://geeks.ms/jsuarez/2019/05/29/xamarin-forms-ui-challenge-art-news-transiciones-entre-paginas/
You can share the code in git and I'm debugging the project to try to help you.
<Frame Padding="0" OutlineColor="#E4E7EC" HasShadow="True" Grid.RowSpan="4" Grid.Column="0">
<Image Source="{Binding urlImagenPortada}" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Image>
</Frame>
add HorizontalOptions="FillAndExpand" and VerticalOptions="FillAndExpand"
I need to integrate the Dynamic horizontal listview in my project. I found this concept below blog on the website. But I confused this code to integrate into my project. Kindly suggest me an idea to anyone. I need this image type grid or horizontal listview( https://i.stack.imgur.com/OvJZE.png).
Mainpage.xaml.cs
public void SetupUserStack()
{
---------- issue in _itemSelectCommand in my code
cButtonList.Add(new CircleButton(_itemSelectCommand)
{ CircleSize = otherCircleSize, CircleFontSize = 35, Text = initials, BackgroundColor = Color.White, TextColor = ourBlue, BorderColor = ourBlue, BorderWidth = 1.5 });
var b2 = new Button() { Text = lname, TextColor = ourBlue };
//otherGrid.Children.Add(LargeCB, 0, 0);
otherGrid.Children.Add(cButtonList[i], 0, 0);
otherGrid.Children.Add(b2, 0, 1);
UserStack.Children.Add(otherGrid);
}
Blog I refer: horizontal-list-view-with-circular-button-styling-in-xamarin-forms
This is the another way to achieve the same thing. Xamarin forms now support the Bindable Layouts
XAML Code:
<ScrollView
Orientation="Horizontal"
HorizontalScrollBarVisibility="Default">
<StackLayout Margin="20,0,20,0"
Orientation="Horizontal"
BindableLayout.ItemsSource="{Binding LogoImages}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Image
HeightRequest="25"
Margin="0,0,5,0"
Source="{Binding logoImage}">
</Image>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
Here is more information with the example :
Bindable Layouts
Use a collectionView to create a horizontal-list would be easier and faster, for example:
<CollectionView ItemsSource="{Binding Monkeys}"
ItemsLayout="HorizontalList">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="140" />
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2"
Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label Grid.Column="1"
Text="{Binding Name}"
FontAttributes="Bold"
LineBreakMode="TailTruncation" />
//...your layout
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
The Monkeys should be a list that in your ViewModel.
You can check the sample with MVVM structure here:collectionviewdemos
In your linking blog, he creates the grid dynamically with the users.Count and I think it hard to integrate his code to MVVM structure.
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>