How do I make the status bar transparent and show the content behind it on Android using .NET MAUI?
I've seen this post, is there a way to recreate this using C#?
Similar to Google Maps:
Try this , in MauiProgram.cs
.ConfigureLifecycleEvents(events =>
{
#if ANDROID
events.AddAndroid(android => android.OnCreate((activity, bundle) => MakeStatusBarTranslucent(activity)));
static void MakeStatusBarTranslucent(Android.App.Activity activity)
{
activity.Window.SetFlags(Android.Views.WindowManagerFlags.LayoutNoLimits, Android.Views.WindowManagerFlags.LayoutNoLimits);
activity.Window.ClearFlags(Android.Views.WindowManagerFlags.TranslucentStatus);
activity.Window.SetStatusBarColor(Android.Graphics.Color.Transparent);
}
#endif
});
Install version 1.3.0+ of CommunityToolkit.Maui, Gerald also has a video about it on YT:
And then in your ContentPage do something like:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:mct="clr-namespace:CommunityToolkit.Maui.Behaviors;assembly=CommunityToolkit.Maui"
x:Class="MauiToolkitStatusBarBehaviorSample.MainPage">
<Page.Behaviors>
<mct:StatusBarBehavior StatusBarColor="Transparent" StatusBarStyle="LightContent" />
</Page.Behaviors>
For other pages, you might want to set it up again since this behaviour is somewhat global and might effect other pages.
Related
I am trying to learn how to create mobile apps using MAUI and have seen many MVVM examples which I find incomplete. For this reason, I thought I should try to learn MAUI using CodeBehind first before moving onto MVVM. I have completey the MAUI section from the Microsoft Learn website, but it didn't cover displaying websocket data in XAML.
I have the following:
XAML:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="CodeBehindTicker.MainPage">
<ScrollView>
<VerticalStackLayout>
<Label
Text="Ticker value"
x:Name="lblTicker" />
<Button
x:Name="btnGetTicker"
Text="Get Ticker"
Clicked="btnGetTicker_Clicked"/>
</VerticalStackLayout>
</ScrollView>
</ContentPage>
CodeBehind:
using Binance.Net.Clients;
using Binance.Net.Objects;
namespace CodeBehindTicker;
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
private void btnGetTicker_Clicked(object sender, EventArgs e)
{
var socketClient = new BinanceSocketClient(new BinanceSocketClientOptions { });
socketClient.SpotStreams.SubscribeToBookTickerUpdatesAsync("BTCUSDT", data => {
lblTicker.Text = data.Data.BestAskPrice.ToString();
Console.WriteLine(data.Data.BestAskPrice.ToString());
});
socketClient.UnsubscribeAllAsync();
}
}
When I click the button, the websocket data displays in realtime in the console output, but the label only displays the very first data returned and does not automatically update as the data in the console output updates instantly.
Any idea why? For now, I just want to stick to basic CodeBehind without using MVVM.
My guess is since you are using A WebSocket which probably has some async code the text is not changed on the main thread.
All you need to do is something like this:
MainThread.BeginInvokeOnMainThread(() =>
lblTicker.Text = data.Data.BestAskPrice.ToString());
Hope this helps
I want to display very simple Toolbar using xamarin on iOS, but I can't see the toolbar on display.
I use this code:
<?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="Test.MainPage">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Example Item"
IconImageSource="https://img.icons8.com/cute-clipart/64/000000/menu.png"
Order="Primary"
Priority="0" />
</ContentPage.ToolbarItems>
</ContentPage>
There are no errors in the code and the display is empty..
What needs to change to see the toolbar ?
Are you putting your page in NavigationPage? By default ContentPage does not have Navigation bar (Toolbar), you must put your page in NavigationPage, after that Navigation bar will show up with its functionality.
have a look at here : Xamarin.Forms Navigation
So I assume you should do something like this
public App ()
{
MainPage = new NavigationPage (new MainPage());
}
I need the same as
Does XAML have a conditional compiler directive for debug mode?
but in Xamarin xaml; i've tried the proposed solution but i get this error:
Type mc:Choice not found in xmlns http://schemas.openxmlformats.org/markup-compatibility/2006
I've tried to use xcc https://github.com/firstfloorsoftware/xcc, but it seems not working with .netstandard 2.0 / Xamarin.Forms 4.5
Its little different in XAML of Xamarin. There is Design time namespacing in Xamarin.
You would use markup-compatibility xml name space and mark design namespace as Ignorable
<?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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:ref="clr-namespace:XamUtilities.Views;assembly=XamUtilities"
mc:Ignorable="d"
x:Class="Sample.MainPage">
<ContentPage.Content>
<d:Label Text="This will be displayed only in previewer"/>
<Label Text="This will be displayed in actual app"/>
</ContentPage.Content>
</ContentPage>
In code behind also you can set values
[DesignTimeVisible (true)]
public partial class MainPage : ContentPage
{
public MainPage ()
{
InitializeComponent ();
if (DesignMode.IsDesignModeEnabled)
{
// Previewer only code
//add your bindings in here
}
}
}
I am new to Xamarin (came from C# and WPF)
I build a Xamarin form application using the template provided (VS created it for me)
I add Xamarin.Forms.Map from the nuget and added it to a page like 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:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="XamarinTest.Views.MapPage"
Title="Map"
>
<!--Title="{Binding Title}"-->
<ContentPage.ToolbarItems>
<!--<ToolbarItem Text="Add" Clicked="AddItem_Clicked" />-->
</ContentPage.ToolbarItems>
<StackLayout Spacing="10">
<maps:Map x:Name="map" />
</StackLayout>
</ContentPage>
Now the application doesn't work and I am getting an error which says the code can not be debugged using this debugger. (I am using UWP platform)
When I commented out the map, it would work and there is no problem.
I tested it on Android and I am getting similar errors when reference to map exist.
What is the problem and how I can fix it?
Thanks to comments, I found that I need to initialize the map in each implementation.
For example UWP we should have this line in MainPage.xaml.cs
Xamarin.FormsMaps.Init("INSERT_AUTHENTICATION_TOKEN_HERE");
This is a good document on how to initialise map on different platforms:
Xamarin.Forms Map Initialization and Configuration
I'm trying to create a music player in Xamarin Forms. Now at the bottom of my page there always is a bar with the music player controls. Instead of always adding the tag and creating a new PlayerBar in each view, I thought it would be useful to create a RootPage with the PlayerBar created once inside and above it a NavigationPage that spans the rest of the view.
In XAML it would look a bit like 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:views="clr-namespace:PodBase.Views"
xmlns:controls="clr-namespace:PodBase.Controls"
x:Class="PodBase.Views.RootPage">
<ContentPage.Content>
<Grid>
<NavigationPage>
<x:Arguments>
<views:MainPage/>
</x:Arguments>
</NavigationPage>
<controls:PlayerControl/>
</Grid>
</ContentPage.Content>
</ContentPage>
However when I try it out I get an error saying NavigationPage cannot be added to IGridList. Are there any other options I can use to work this out?
This is not possible. A Page can only be at the root. Inside you can have one VisualElement and within that VisualElement you can nest as many things as you like.
To achieve this kind of behavior, either inherit from the NavigationPage and add the player control at the bottom. Or, you will have to mimic your own navigation page behavior.