We Keep Coding

Binding class property into label

I have an issue with xaml that i can't resolve. I'm not very practice with xaml and binding so i search for help (i work with MAUI.NET). My problem is:
i have this class MemoryInfo:
namespace APEEvo.Mobile.Settings
{
public static class MemoryInfo
{
public static LoginInfo CurrentUserInfo { get; set; }
}
}
the CurrentUserInfo refer to this class:
namespace APEEvo.Commons
{
public class LoginInfo
{
public string UserName { get; set; }
public string UserNameFull { get; set; }
public string Role { get; set; }
}
}
My purpose is to binding directly in a label into the XAML (and not by code) the info of MemoryInfo.CurrentUserInfo.UserNameFull. Something like that:
<Label x:Name="txtUsername" Text="{Binding Mode=TwoWay, Source={x:DynamicResource Settings:MemoryInfo}, Path=LoginInfo.UserNameFull }" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,15,0"/>
So when MemoryInfo.CurrentUserInfo.UserNameFull change into another Page, i can see the modidify in this label.
Thanks for support
I update for more clarity all the xaml:
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:Settings="clr-namespace:APEEvo.Mobile.Settings"
x:Class="APEEvo.Mobile.Components.InfoBar">
<HorizontalStackLayout BackgroundColor="#85ABD5" >
<Grid Margin="5,5">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="90" />
<ColumnDefinition Width="90" />
<ColumnDefinition Width="90" />
</Grid.ColumnDefinitions>
<ImageButton Grid.Column="0" WidthRequest="25" HeightRequest="25" Source="icon_infobar_menu.png" Clicked="ImageButton_Clicked" Margin="0,0,10,0"/>
<ImageButton Grid.Column="1" x:Name="imgLogo" Source="logo_ae1.png" Clicked="ImageButton_Clicked" Margin="0,0,350,0"/>
<Grid Grid.Column="2" >
<HorizontalStackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Image Source="icon_infobar_tablet.png" WidthRequest="25" HeightRequest="25" Margin="0,0,5,0"/>
<Label x:Name="txtMachine" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,15,0"/>
<Line Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
</HorizontalStackLayout>
</Grid>
<Grid Grid.Column="3" >
<HorizontalStackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Image Source="icon_infobar_login.png" WidthRequest="25" HeightRequest="25" Margin="0,0,5,0"/>
<Label x:Name="txtUsername" Text="{Binding Mode=TwoWay, Source={x:Null Settings:MemoryInfo.CurrentUserInfo}, Path=UserNameFullName }" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,15,0"/>
<Line Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
</HorizontalStackLayout>
</Grid>
<Grid Grid.Column="4" >
<HorizontalStackLayout HorizontalOptions="Center" VerticalOptions="Center">
<ImageButton Source="icon_infobar_logout.png" BackgroundColor="Transparent" WidthRequest="25" HeightRequest="25" Margin="0,0,5,0" Clicked="ImageButtonLogout_Clicked"/>
<Label Text="Logout" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,15,0"/>
<Line Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
</HorizontalStackLayout>
</Grid>
<Grid Grid.Column="5" >
<HorizontalStackLayout HorizontalOptions="Center" VerticalOptions="Center">
<ImageButton Source="icon_infobar_info.png" WidthRequest="25" HeightRequest="25" Margin="0,0,5,0" Clicked="ImageButtonHelp_Clicked"/>
<Label Text="Help" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,15,0"/>
<Line Stroke="White" Y1="0" Y2="50" StrokeDashArray="4,4" StrokeDashOffset="2"/>
</HorizontalStackLayout>
</Grid>
<Grid Grid.Column="6" >
<HorizontalStackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Image Source="icon_infobar_clock.png" WidthRequest="25" HeightRequest="25" Margin="0,0,5,0"/>
<Label x:Name = "txtClock" Text="17:22" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,15,0" />
</HorizontalStackLayout>
</Grid>
</Grid>
</HorizontalStackLayout>

What you actually ask is "How to bind static property of a static class".
First. Your properties are not observable. The setter should notify that a change has been made. So when this static property is set from somewhere else in the program, it knows that it has to be updated in places, where it is bound to.
Second. Please do not do anything of the above. For 10 years, I had to deal with old projects that were written by sharing data with static structures. It is nightmare to debug problems, and to fix them.
I recommend that you change your design approach.
New user has logged. You are probably returning to the page you had open, and you want to update the UI. Override OnAppearing and make the changes there.
If you really want to share, do it by dependency injecting a singleton.
builder.Services.AddSingleton<ILogin, LoginService>();
Also, sometimes you may want to keep the user logged. Why not use settings to store information that will be accessible from anywhere in your app, and still be reusable after restart of application.
public string FirstName
{
get => settings.Get("FirstName", "");
set => settings.Set("FirstName", value);
}
Edit: In some situations, where I need to pass information that something has happened between separated segments (And to keep them as separate as possible) I use CommunityToolkit.MVVM Messaging.
It is another decent way to avoid use of static classes.

Shadow not showing on CarouselView Item

I have this little test project to explore MAUI. I want to have a CarouselView showing Border Label with a shadow.
My Carousel and its 10 test items are correctly rendered but not the shadow.
Note that I have no shadow at all on Windows, and a cropped shadow on Android (I suspect some layout cropping even though I added some margin).
I added a test item outside of the CarouselView underneath and shadow is working correctly.
Here is a little GIF animation of my test project running on Android :
The code itself :
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
xmlns:vm="clr-namespace:CarouselTest"
x:DataType="vm:CarouselVM"
x:Class="CarouselTest.MainPage"
Title="CAROUSEL TEST">
<ScrollView>
<Grid BackgroundColor="LightCoral">
<Grid.RowDefinitions>
<RowDefinition Height="410"/>
<RowDefinition Height="60"/>
<RowDefinition Height="310"/>
</Grid.RowDefinitions>
<CarouselView ItemsSource="{Binding CarouselTexts}" IndicatorView="indic"
HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="400"
Loop="False" BackgroundColor="PaleGoldenrod">
<CarouselView.ItemTemplate>
<DataTemplate>
<Border Margin="10,0,10,10" Stroke="Gray" HeightRequest="300" WidthRequest="300"
Background="WhiteSmoke" StrokeThickness="4" StrokeShape="RoundRectangle 5">
<Border.Shadow>
<Shadow Brush="Black" Offset="10,10" Radius="20" Opacity="0.9"/>
</Border.Shadow>
<Label Text="{Binding}" TextColor="DarkBlue" FontSize="72" FontAttributes="Bold"
HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
</Border>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView Grid.Row="1" HorizontalOptions="Center" IndicatorSize="22" IndicatorsShape="Circle"
IndicatorColor="Gainsboro" SelectedIndicatorColor="#006EFF"
x:Name="indic" />
<Border Grid.Row="2" Margin="0,0,0,10" Stroke="Gray" HeightRequest="300" WidthRequest="300"
Background="WhiteSmoke" StrokeThickness="4" StrokeShape="RoundRectangle 5">
<Border.Shadow>
<Shadow Brush="Black" Offset="10,10" Radius="20" Opacity="0.9"/>
</Border.Shadow>
<Label Text="TEST" TextColor="Red" FontSize="72" FontAttributes="Bold"
HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
</Border>
</Grid>
</ScrollView>
Thank you.

Add Page Carrousel

I have built a simple and basic app. In order to help people to understand easly the app.
I would like to create a dynamic turorial. My idea is put differents content's pages in a carousel or collection view. And In every content's pages there is an image in background and I will add label and box to explain fonctionalities
Here you will find an example of an image that I will put in background of content page and add label to explain highlighted information
My question are :
I have 3 content pages that I will put backgroud image on it :
home =new HomePage(), Page2 page2 =new Page2() & Page3 page3 =new Page3()
how can i easly add label where I want as the image will be in background ?
how I can put those content pages in carrousel view or collection view ?
Thanks for your help

You can create carousel like this:
<StackLayout Grid.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<CarouselView x:Name="cvTutorial" ItemsSource="{Binding Tutorials}" HorizontalScrollBarVisibility="Never" ItemsUpdatingScrollMode="KeepItemsInView" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" PeekAreaInsets="10" IsScrollAnimated="True" PositionChanged="cvTutorial_PositionChanged">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="0" Padding="0" HorizontalOptions="End">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ffimageloading:CachedImage BackgroundColor="Transparent" Grid.Row="0" x:Name="tutorialImg" Source="{Binding ImageUrl}" Aspect="AspectFit" HorizontalOptions="FillAndExpand"
Margin="{DynamicResource 50,40,50,00}" HeightRequest="350"/>
<StackLayout Grid.Row="1" HorizontalOptions="Center" VerticalOptions="End" Padding="0,30,0,0" Spacing="15">
<Label Style="{StaticResource RobotoBoldSize24WhiteLabelStyle}" HorizontalTextAlignment="Center" Text="{Binding Title}" Padding="10,10,10,0" />
<Label Style="{StaticResource RobotoRegularSize16LightGrayLabelStyle}" HorizontalTextAlignment="Center" Text="{Binding Subtitle}" HorizontalOptions="Center"
Padding="50,10,50,10" />
</StackLayout>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<Grid x:Name="indicatorGrid" ColumnSpacing="3" HorizontalOptions="Center" VerticalOptions="Start" Padding="{DynamicResource MarginPadding00_20_00_40}"
ColumnDefinitions = "25,25,25">
<pancake:PancakeView x:Name="Dot_1" Grid.Column="0" Style="{StaticResource SelectedIndicatorStyle}" />
<pancake:PancakeView x:Name="Dot_2" Grid.Column="1" Style="{StaticResource UnselectedIndicatorStyle}" />
<pancake:PancakeView x:Name="Dot_3" Grid.Column="2" Style="{StaticResource UnselectedIndicatorStyle}"/>
</Grid>
</StackLayout>
Check working sample - https://rb.gy/mlmh0q

Xamarin Forms How can I inject a ContentPage into Frame element?

I need to inject a ContentPage into Frame element ?
Is this possible to be done ?
I have update my description and I have added the below code
XAML Code
<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer"
DrawerWidth ="400"
Position="Right"
BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}"
DrawerHeaderHeight="160">
<navigationdrawer:SfNavigationDrawer.ContentView>
<Grid x:Name="mainContentView" BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackLayout BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}" Orientation="Horizontal">
<controls:IconButton Text="{i18n:TransIcn HamburgerMenu}" FontSize="30" x:Name="SyncIcon" HorizontalOptions="Start" Clicked="hamburgerButton_Clicked" BackgroundColor="Transparent" TextColor="#FFFFFF" ></controls:IconButton>
<Label x:Name="headerLabel" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="" FontSize="16"/>
</StackLayout>
<ScrollView Grid.Row="1" Margin="0" Padding="0">
<Frame x:Name="contentViewFrame" >
</Frame>
</ScrollView>
</Grid>
</navigationdrawer:SfNavigationDrawer.ContentView>
<navigationdrawer:SfNavigationDrawer.DrawerHeaderView>
<Grid BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}">
<Grid.RowDefinitions>
<RowDefinition Height="120"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<!--<Image Source="icon.png" HeightRequest="110" BackgroundColor="#1aa1d6" VerticalOptions="Center" HorizontalOptions="Center"/>-->
<Label Text="James Pollock" Grid.Row="1" HorizontalTextAlignment="Center" HorizontalOptions="Center" FontSize="20" TextColor="White"/>
</Grid>
</navigationdrawer:SfNavigationDrawer.DrawerHeaderView>
<navigationdrawer:SfNavigationDrawer.DrawerContentView>
<ListView x:Name="listView"
FlowDirection="RightToLeft"
ItemsSource="{Binding Items}"
BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}"
ItemSelected="listView_ItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Margin="0,8,0,0" BackgroundColor="{DynamicResource DashboardItemsDarkSurface}">
<Label Text="{Binding IconText}" HorizontalOptions="Start" FontSize="30" Style="{StaticResource EventaIconStyle}" ></Label>
<Label Text="{Binding Title}" HorizontalOptions="Start" Style="{StaticResource MainHeaderLabel}"></Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</navigationdrawer:SfNavigationDrawer.DrawerContentView>
<navigationdrawer:SfNavigationDrawer.DrawerFooterView>
<Grid BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}" >
<StackLayout VerticalOptions="Center"
`enter code here` HorizontalOptions="Center">
<Label Text="Footer View"/>
</StackLayout>
</Grid>
</navigationdrawer:SfNavigationDrawer.DrawerFooterView></navigationdrawer:SfNavigationDrawer>
Please Let me know if you need more information.
The issue is that I cannot add a ContentPage Object into the ContentView item so could please provide me with some workarounds that I might go for ?

As they have been mentioning in the comments about a content VIEW vs content page, that should work for you with a slight bit of alteration. When I wrote my first Xamarin app, I had several other applications over time that have had nested controls in controls and did not want to find myself in similar.
So, what I did was to create simple user controls with all the stuff I needed on them. So when I was creating a page, I would just add my user control where it physically needed to be placed. This way, should I need to alter the layout of that one user control, it doesn't change the functionality the rest of the way through. Binding was the same because the binding context was the same level, regardless of the VISUAL depth of controls.
So, if you were to create a new Navigation drawer user control of its own context, then slap that in your content page should work for you.

How to turn off a Group header in SfListView?

I have a problem.I want to turn off a Group header in SfListView.I read on the forums to turn off IsStickyGroupHeader,I did it but IsStickyGroupHeader="False" does not work.Maybe I understand something wrong.Please help me.Thank you
<syncfusion:SfListView
x:Name="listView"
Grid.Row="0"
ItemSize="40"
IsStickyGroupHeader="False"
ItemsSource="{Binding contactsinfo}"
SelectionMode="None">
<syncfusion:SfListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout
Grid.Column="1"
HorizontalOptions="StartAndExpand"
Orientation="Vertical"
VerticalOptions="Center">
<Label
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
LineBreakMode="WordWrap"
Text="{Binding ContactName}"
TextColor="#474747"
VerticalOptions="Center"
VerticalTextAlignment="Center" />
</StackLayout>
</Grid>
<StackLayout BackgroundColor="LightGray" HeightRequest="1" />
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>

You can hide the GroupHeader by using the GroupHeaderSize as 0. Please refer to the following code snippets,
<ListView:SfListView
x:Name="listView"
Grid.Row="0"
ItemSize="40"
GroupHeaderSize="0"
ItemsSource="{Binding ContactsInfo}"
SelectionMode="None">
You can also refer to our user guidance document regarding the same,
UG link: https://help.syncfusion.com/xamarin/listview/grouping#height-customization
Also, if you are using SfListView.AutoFitMode as Height or DynamicHeight, then the items size will be calculated based on the template elements. Hence, you can customize the GroupHeaderTemplate with Height 0.
<ListView:SfListView
x:Name="listView"
Grid.Row="0"
AutoFitMode="DynamicHeight"
ItemsSource="{Binding ContactsInfo}"
SelectionMode="None">
<ListView:SfListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell Height="0"/>
</DataTemplate>
</ListView:SfListView.GroupHeaderTemplate>
Refer the following documentation regarding the same,
UG link: https://help.syncfusion.com/xamarin/listview/grouping#group-header-customization