I am very new to Xamarin, so please excuse me for my simple questions.
Like the alert window on the screen, I want to open a second window that can be resized and positioned. Despite all my calls, I couldn't get it.
An absolute style div for those who know html.
Thanks in advance to friends who can give me an idea of how I can do it.
I think what you're looking for is a "Popup". It can be done by hand, but I recommend using a library like this one. It lets you customize your Popups however you want by creating custom pages for them, like this:
<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
x:Class="MyProject.MyPopupPage">
<!--You can set an animation in the xaml file or in the csharp code behind-->
<pages:PopupPage.Animation>
<animations:ScaleAnimation
PositionIn="Center"
PositionOut="Center"
ScaleIn="1.2"
ScaleOut="0.8"
DurationIn="400"
DurationOut="300"
EasingIn="SinOut"
EasingOut="SinIn"
HasBackgroundAnimation="True"/>
</pages:PopupPage.Animation>
<!--You can use any elements here which are extended from Xamarin.Forms.View-->
<StackLayout
VerticalOptions="Center"
HorizontalOptions="Center"
Padding="20, 20, 20, 20">
<Label
Text="Test"/>
</StackLayout>
</pages:PopupPage>
If you want Popups that cover the whole screen, you can use modal pages, which are built into Xamarin. Check it here.
Related
The "new" and recommended way to display a modal page with the Xamarin.Forms Shell uri-based navigation is to set this tag in the XAML file (source): Shell.PresentationMode="ModalAnimated"
and to navigate to it by using a standard route and invoking it with the function Shell.Current.GoToAsync("routeToMyPage").
However, this displays the modal page without a toolbar. Without Shell navigation, I would have wrapped this page in a NavigationPage, but since the pages are initialized through reflection (at least that's what it looks like - don't quote me on this), I don't know how to do that.
Adding a ToolbarItem in the page's XAML code doesn't solve this, neither does the Shell.NavBarIsVisible="True" property, and adding a Button in the Shell.TitleView tag doesn't display a toolbar either.
Is there a way to display the default navigation toolbar without rendering a custom one myself?
Here is the XAML code I used to try to have the Toolbar displayed:
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Shell.PresentationMode="ModalAnimated"
Shell.NavBarIsVisible="True"
x:Class="StackOverflow.Views.MyModalPage">
<ContentPage.ToolbarItems >
<ToolbarItem Text="Hi"/>
</ContentPage.ToolbarItems>
<Shell.TitleView>
<Button Text="Toolbar Button"/>
</Shell.TitleView>
<ContentPage.Content>
</ContentPage.Content>
</ContentPage>
Edit: I have created a small sample project to showcase my issue: https://github.com/Kuurse/StackOverflowExample
You can first create the NavigationPage root page in the app class:
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new NavigationPage(new MainPage());
}
}
Then set like this in your mainpage.xaml:
<?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="StackOverflow.Views.MyModalPage"
NavigationPage.HasNavigationBar="True">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Hi"/>
</ContentPage.ToolbarItems>
</ContentPage>
By the way, do you want to display only the default navigation toolbar?
I have a Xamarin.CommunityToolkit - Popup. I don't want to predefine its size. I want it to size according to the content dynamically. Is there any way to achieve this?
Here is my XAML code:
<?xml version="1.0" encoding="UTF-8"?>
<xct:Popup xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
x:Class="SampleProject.Views.SamplePopup">
<StackLayout>
<Label Text="Hello Xamarin.Forms!" />
<Button Text="Close Popup" Clicked="ClosePopup" />
</StackLayout>
</xct:Popup>
The current implementation doesn't support such feature, as Amjad mentioned in his comment there was a similar feature request in the past but it was closed as things were migrating to the new repo .NET MAUI community toolkit.
If you are interested you can open a discussion explaining or pointing to the link of that feature request.
I have a ContentPage which is assigned to the Xamarin.Forms.Shell class as a ShellContent and require the back button to be displayed in the navigation bar of the ContentPage.
The XAML source of the ContentPage in concern is as follows:
<?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="UI_test.TestPage">
<Shell.NavBarIsVisible>True</Shell.NavBarIsVisible>
<Shell.BackButtonBehavior>
<BackButtonBehavior IsEnabled="True" />
</Shell.BackButtonBehavior>
<Shell.FlyoutBehavior>Disabled</Shell.FlyoutBehavior>
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
I found that that assigning a custom value to the attributes TextOverride and IconOverride of the <BackButtonBehavior> tag will display the back button, but I am looking for a way to display the platform's default back button (rather than a custom one) as the above ContentPage does not display as back button in its navigation bar as seen in the screenshot below.
Thanks in advance.
Your project seems to contain one page only, It won't appear if no navigation has been made, and it makes sense. If you do a Shell.GotoAsync(..) or Shell.Navigation.PushAsync(..) to navigate to another page it will then appears (the default native back button) allowing to go back to the previous page in the navigation stack.
I'm new to Xamarin and would like to know where to start with this.
I have a need to make a Xamarin Forms custom Entry. That Entry needs an Icon and a border with rounded corners and a place holder label. This is a mock up of what is needed:"
The Behavior is that the Text "Input" will show the placeholder text until the user starts typing then the "Label" will appear with the text form the place holder. So the "Label" will be hidden until the user starts typing.
(with placeholder text)
So is it possible to build this Entry without a custom entry renderer? How would would put the label in a custom renderer if needed.
I would apprentice any help in getting started with this.
You could roll this yourself, but someone else has already done all the hard work for you. Take a look at the Xfx.Controls library. The XfxEntry looks to be exactly what you're looking for. All you need to do is:
Grab the nuget package, and install it in your main and platform projects.
Make sure that you initialize the library in your Android and iOS projects.
At the top of the xaml page it's going to be used in, import the library in with something like xmlns:xfx="clr-namespace:Xfx;assembly=Xfx.Controls".
Use the control, with something like:
<xfx:XfxEntry Placeholder="Email"
Text="{Binding Email}" />
After that you would need to create your own custom control and place the control in it. To get the rounded corners, you'll want your control to inherit from frame. This might look something like
<Frame x:Class="App1.MyCustomEntry"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xfx="clr-namespace:Xfx;assembly=Xfx.Controls"
BorderColor="LightBlue"
CornerRadius="15" HorizontalOptions="FillAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="8*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="email.png" />
<xfx:XfxEntry Grid.Column="1" Placeholder="Email*" />
</Grid>
Notice the BorderColor and CornerRadius properties. Also, if you just add a new content view, you'll need to change the code behind file to inheriate from Frame: public partial class MyCustomEntry : Frame.
From there, it's a simple matter of inserting the control into your page:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App1"
x:Class="App1.MainPage">
<local:MyCustomEntry VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>
This should give you something like:
You can tweak the layout options as needed.
When I open the Binding url in a web view the video plays just the audio not the visuals on the emulator and my phone.
When I open the Binding url on my pc and phone it works fine.
Any idea how to fix it?
<?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="WiscOnline.Mobile.ViewLearningItem"
Title="{Binding LearningItem.Name}">
<WebView x:Name="webView"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Source="{Binding CurrentSource}" />
<StackLayout>
<Label Text="{Binding LearningItem.ViewUrl}" FontSize="19"></Label>
</StackLayout>
<WebView Source="{Binding LearningItem.ViewUrl}" ></WebView>
</ContentPage>
This issue is with Android and it's WebView and not specifically with Xamarin. Different versions of Android will support different WebView features. Video playback is particularly bad in a WebView.
A better option would be to use the native video player for each platform or to at least use the native video player on Android.
You could either use a handy plugin/component for this like this one (I have not ever tried that one but saw it was recommended by others) or you could try and roll one yourself by using the native Android VideoView.
A Xamarin Forms thread about this very issue and using the VideoView can be found here.