I am trying to implement Popup dialog or Dialog in Xamarin.Forms but i am unable to find any reference or document to achieve this.
I want to show view on top of current page, something like this...
Currently i am focusing on iOS in Xamarin.Forms... Any code snippet or project reference is appreciated
Popup Page Plugin for Xamarin Forms
The plugin allows you to open any page as a popup.
Nuget: https://www.nuget.org/packages/Rg.Plugins.Popup/
Unfortunately you can't Push to the ModalStack because it replaces the current page and you want to see the current page underneath.
So you have a few options here of create your own if you want complete customization or use a package such as: https://github.com/aritchie/userdialogs. They have a link to examples on that page.
Here is a quick customizable one if you want to roll your own.
<Grid IsVisible={Binding IsDialogShown}" BackgroundColor="Black" Opacity="0.7">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="500" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="1">
.. Controls in here (change this to grid or whatever you want)
</StackLayout>
</Grid>
You can take a look to popup layout in Xamarin Labs
https://forums.xamarin.com/discussion/32373/how-to-implement-a-pop-up-window-in-xamarin-forms
FormsPopup can do the trick using Xamarin Forms
We can achieve dialog like interface using PopupLayout
https://github.com/XLabs/Xamarin-Forms-Labs/blob/master/src/Forms/XLabs.Forms/Controls/PopupLayout.cs
How to use :
http://forums.xamarin.com/discussion/comment/101489/#Comment_101489
Related
I have noticed one issue in Shell Navigation title. When setting ContentPage's Title property it shows same text with Back button also. Used NavigationPage.BackButtonTitle property as well from xaml still its not working.
For Example:
HomePage.xaml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Switch_Bug.HomePage"
NavigationPage.BackButtonTitle="Back"
Title="Home Page">
<VerticalStackLayout>
<Label
Text="Welcome to .NET MAUI!"
VerticalOptions="Center"
HorizontalOptions="Center" />
</VerticalStackLayout>
</ContentPage>
Result:
Expected result:
In iOS, it should Back Button text as "Back" otherwise just show the back button. But it shows the page's title text.
Update 02/02/2023
The main issue is if the title of the page is short then it will show the same with the back button and if the title is long enough then it will work fine.
The same issue was reported on the MAUI git repo as well. https://github.com/dotnet/maui/issues/11691
First of all, I believe BackButtonTitle will only work for iOS since Android does not use "back titles"
Second, the BackButtonTitle might be slightly counterintuitive, but it is the title that will be displayed on a further page that navigates back to the page you defined in on. In your case, setting the BackButtonTitle on your HomePage to "back" does not set the back button on the HomePage to "back"; it will set the back button to "back" on any page that has a back navigation to the HomePage. Hope that makes sense.
NavigationPage.BackButtonTitle is applicable to Navigation.PushAsync in NavigationPage, but not in Shell. There is a corresponding method in Shell’s navigation to change the text of the back button. I did a simple test, and you can modify your code as follows:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Switch_Bug.HomePage"
Title="Home Page">
<VerticalStackLayout>
<Label
Text="Welcome to .NET MAUI!"
VerticalOptions="Center"
HorizontalOptions="Center" />
</VerticalStackLayout>
<Shell.BackButtonBehavior>
<BackButtonBehavior TextOverride="Back" />
</Shell.BackButtonBehavior>
</ContentPage>
For more details, you can refer to the official documentation:.NET MAUI Shell navigation
In my MAUI application I'm using webview to display my existing static html pages. But it is giving me scrollbars horizontally and vertically. I want my html page to adjust itself based on screen-size of device.
I tried to set MaximumHeightRequest & MaximumWidthRequest but it didn't worked for me. I want to have a dynamic solution for this problem.
Are you looking for this https://github.com/dotnet/maui/issues/8241. Look for #MobileDev327 comments
<ContentPage .....>
<ScrollView>
<Grid>
<Grid>
<Label Text="By default, a Grid contains one row and one column" />
</Grid>
<Grid Padding="0,30,0,0">
<WebView x:Name="jsExampleWebView" Source="Map.html"/>
</Grid>
</Grid>
</ScrollView>
Windows
Android Emulator
I am having difficulty in aligning a toolbar item to the far right on the IOS build of a Xamarin application, although, on the Android build, it works perfectly fine and aligns the toolbar item to the far right of the toolbar.
XML code for the toolbar item:
<ContentPage.ToolbarItems x:Uid="ToolbarName">
<ToolbarItem x:Name="Settings" Order="Primary" Icon="cog.png" Priority="0" Clicked="Settings_Clicked" />
</ContentPage.ToolbarItems>
IOS build toolbar:
I do not want to change the XML too much as I am worried that it will then effect the android build.
Any help on the matter would be greatly appreciated.
Thanks.
This is a known issue of the Xamarin ToolbarItems, you could try update you Xamarin Forms version to see if the issue was fixed.
A workaround would be using a NavigationPage.TitleView (source)
<ContentPage>
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal" VerticalOptions="End" Spacing="10" HorizontalOptions="End">
<Image Source="cog.png">
</Image>
</StackLayout>
</NavigationPage.TitleView>
</ContentPage>
I'm creating a WP Mango app. I want to set the default page background to White, irrespective of whether Light or Dark Theme is selected, exactly like the default mail application.
I've followed this article and tried changing the default PhoneBackgroundBrush as:
(Application.Current.Resources["PhoneBackgroundBrush"]as SolidColorBrush).Color = Colors.White;
Any idea what I'm doing wrong or how to achieve that?
I messed with the sample, and simply don't recommend doing this. Do the extra work, create your own resources, and apply them yourself.
This method doesn't show updates in the designer, which will make your UI development difficult.
It also doesn't even work properly -- the background doesn't change. If you read the comments on the blog post, there are other issues with it working with other controls.
So, just do it normally - in your App.xaml (you could also do it in a seperate ResourceDictionary)
<!--Application Resources-->
<Application.Resources>
<SolidColorBrush Color="White" x:Key="WhiteBrush" />
<SolidColorBrush Color="#FFF222" x:Key="UglyYellowBrush" />
</Application.Resources>
then, on a page
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="{StaticResource UglyYellowBrush}">
... </Grid>
You could even do this quickly on all your pages using Find & Replace, provided that you never changed the name 'LayoutRoot'. If you find
<Grid x:Name="LayoutRoot" Background="Transparent">
you can replace with
<Grid x:Name="LayoutRoot" Background="{StaticResource UglyYellowBrush}">
The solution of creating your own style did not work for me. I tried setting the background to a light gray which worked in the design view but when I ran the emulator the standard black background appeared.
I have some problems
1. how do I make my statusbar context menu that consists of 2 choices of menu preferences and addons status
example of context menu i want to make
this is my code :
<popupset>
<menupopup id="intransContextMenu">
<menuitem label="intrans aktif"/>
<menuitem label="preferensi"/>
</menupopup>
</popupset>
<statusbar id="status-bar">
<image src="chrome://inlinetrans/skin/imagesOn_kecil.png" />
<statusbarpanel id="status-bar-intrans"
label="intrans"
context="intransContextMenu"
onclick="alert('okeh cuy')"
tooltiptext="intrans versi 1.0"
/>
</statusbar>
how to add images in the context menu? I have tried but why do I paste a picture that always appears under the label is not on the side of the label as I expected?
example of context menu i want to make
this is my code :
<popup id="contentAreaContextMenu">
<image src="chrome://inlinetrans/skin/imagesOn_kecil.png" />
<menuitem class="inlinetrans" id="inlineContext" oncommand= "hadits_mean.startFind(null);"
label="Cari Terjemahan"/>
</popup>
note :
whether the code used to display the menu by right clicking on the statusbar and allows web pages to be made in one file?
thank you for the answer..
I am not sure if the images are your only problem now? Opening the context menu should work (you are using the context attribute correctly).
Regarding images, have a look at the documentation. For statusbarpanel, you have to set the image attribute:
<statusbar id="status-bar">
<statusbarpanel id="status-bar-intrans"
image="chrome://inlinetrans/skin/imagesOn_kecil.png"
label="intrans"
context="intransContextMenu"
onclick="alert('okeh cuy')"
tooltiptext="intrans versi 1.0"
/>
</statusbar>
You might also want to have a look at the style classes and play with them (to be honest I'm not 100% sure if it is just sufficient to set the image attribute, so if this does not work, try with the style classes).
Similar for the menuitem. You have to set the image attribute and give the element the style class menu-iconic:
<menuitem class="inlinetrans menu-iconic"
id="inlineContext"
oncommand= "hadits_mean.startFind(null);"
label="Cari Terjemahan"
image="chrome://inlinetrans/skin/imagesOn_kecil.png"/>
Note: Afaik the statusbar is going to be removed in Firefox 4 (at least by default it is disabled)!