Two titleviews in dotnet maui - xaml

Im trying to create a Maui application with a dynamic Tabbar which should also be navigateable (and thus consist of NavigationPages). When I switch to a different tab, everything works fine, but as soon as is switch to an alreay visited tab, two titlebars appear:
One with the style i have defined (upper) and a default titlebar (lower). How can I remove the default titlebar?
Important code:
App.xaml.cs:
MainPage = new NavigationPage(new AppShell());
Page1:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewModels="clr-namespace:foo"
xmlns:converters="clr-namespace:foo.Converters"
x:Class="foo.MainPage"
NavigationPage.HasBackButton="False"
Title="foo"
Loaded="ContentPage_Loaded">
-- Content --
</ContentPage>
Page2:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="foo.Views.fooPage"
Title="foo">
-- Content --
</ContentPage>
NavigationbarStyle:
<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="foo.Resources.Styles.NavigationbarStyle">
<Style TargetType="NavigationPage">
<Setter Property="BarBackground" Value="{DynamicResource NavigationBarBackgroundColor}"/>
<Setter Property="BarTextColor" Value="White"/>
</Style>
</ResourceDictionary>
AppShell (more tabs are added later on):
<Shell
x:Class="foo.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:foo"
xmlns:views="clr-namespace:foo.Views"
Shell.FlyoutBehavior="Disabled">
<TabBar x:Name="MainTabBar">
<ShellContent Title="Home"
Icon="alert_icon_2_neg.png"
ContentTemplate="{DataTemplate views:StartPage}">
</ShellContent>
</TabBar>
</Shell>

Related

How can I display a ContentView in a ContentPage

I created a sftabView, every SfTabItem have a ContentView so I created an other View to display it in this ContentView. so the question is how to make this happened?
This is the ContentView which I wanted to display in the ContentPage
<?xml version="1.0" encoding="utf-8" ?>
<ContentView
xmlns="http://xamarin.com/schemas/2014/forms"
x:Class="App5.Views.Self_Trainig"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
NavigationPage.HasNavigationBar="False">
<ContentView.Resources>
<ResourceDictionary>
............
</ResourceDictionary>
</ContentView.Resources>
<ContentView.Content>
<AbsoluteLayout>
...............
</AbsoluteLayout>
</ContentView.Content>
</ContentView>
and this is my ContentPage:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:tabView="clr-namespace:Syncfusion.XForms.TabView;assembly=Syncfusion.SfTabView.XForms"
x:Class="App5.Views.Accueil">
<ContentPage.Content>
<tabView:SfTabView OverflowMode="DropDown" VisibleHeaderCount="3" BackgroundColor="White">
<tabView:SfTabItem Title="Self Training">
<tabView:SfTabItem.Content>
""the code to display it here""
</tabView:SfTabItem.Content>
</tabView:SfTabItem>
<tabView:SfTabItem Title="Contacts">
<tabView:SfTabItem.Content>
<Grid BackgroundColor="White" x:Name="ContactsGrid" />
</tabView:SfTabItem.Content>
</tabView:SfTabItem>
</tabView:SfTabView>
</ContentPage.Content>
</ContentPage>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:mynamespace=clr-namespace:App5.Views"
...>
...
<tabView:SfTabItem.Content>
<mynamespace:Self_Trainig ... />
</tabView:SfTabItem.Content>
Explanation:
Add an xmlns:... definition for the namespace your ContentView is in.
Add an element with that namespace and the class name of your ContentView. <mynamespace:Self_Trainig ... />
...: After the class name, you can add any needed attributes. Just like any other ContentView.
If you want your view to have "custom" attributes (as opposed to the standard attributes of ContentView such as BackgroundColor), that can be set in each page's XAML, then in your ContentView's code behind, you'll add BindablePropertys. Doing that correctly is beyond the scope of this answer; there are other Q&As on that topic.
is it possible to display the view form the C# code ?
i mean doing
ContentView x:Name="TheView"
and on the C# code doing something like
TheView = Self_Trainig;
i know that code doesn't work but i'm searching that kind of solution

List<Color> in Xaml

I have my List defined in Xaml like this.
<ContentPage.Resources>
<ResourceDictionary>
<local:FileName x:Key="fileName">
<Color>#3599B8</Color>
<Color>#374649</Color>
<Color>#FD625E</Color>
<Color>#F2C80F</Color>
</local:FileName>
</ResourceDictionary>
</ContentPage.Resources>
FileName is defined in code behind like this.
public class FileName : List<Color>
{
}
Instead of directly setting the Color values, i want to define it as resource like this
<Color x:Key="BasicColorSchemeBlue">#3599B8</Color>
and use it.
Any suggestions on how to do this.
Thanks in advance.
GradientColors is an array of Colors.
<?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:local="clr-namespace:GradientTest"
xmlns:s="clr-namespace:System;assembly=mscorlib"
x:Class="GradientTest.GradientTestPage">
<StackLayout Padding="20, 40, 20, 20">
<local:GradientViewRender HorizontalOptions="Center"
WidthRequest="300"
HeightRequest="50"
x:Name="gradientView">
<local:GradientViewRender.GradientColors>
<x:Array Type="{x:Type Color}">
<Color>#5FC900</Color>
<Color>#0FF2C8</Color>
</x:Array>
</local:GradientViewRender.GradientColors>
</local:GradientViewRender>
</StackLayout>
</ContentPage>
I have done like this on a working App.
This goes inside App.xaml:
<Color x:Key="COLOR_NAME">#ffffff</Color>
to access the color from a .cs file, use:
(Color)ResourceFinder.FindResource("COLOR_NAME");
Or use StaticResource or DynamicResource within an xaml file.

Xamarin Forms - How to display content from one xaml inside another

I'm used to Android development, and am having some difficulty accomplishing what I would think is a simple task.
I have a MasterDetailPage (called ContainerView.xaml).
The Master is my navigation bar (called NavbarView.xaml).
The Details is supposed to be a page with a fixed title bar, and a "view" I can can swap per user choices.
The Details page is called MainView.xaml.
The Title I'd like to display at the top and is called TitleBarView.xaml.
Then I have a number of content pages such as Page1View.xaml.
in my ContainerView.xaml:
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.ContainerView"
IsGestureEnabled="True"
MasterBehavior="Popover"
Title="MasterDetail Page">
<MasterDetailPage.Master>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
</MasterDetailPage.Detail>
</MasterDetailPage>
in my NavbarView.xaml - this is the Master
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.NavBarView"
Title="Nav Bar">
<ContentPage.Content>
<StackLayout Orientation="Vertical">
<Label Text="{Binding Item1}"/>
<Button Text="Options" Command="{Binding Option1Command}"/>
</StackLayout >
</ContentPage.Content>
</ContentPage>
in my MainView.xaml - this is the details
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.MainView"
Title="Main View">
<ContentPage.Content>
// what to put here to show the TitleBarView.xaml?
// what to put here to show my content xaml pages?
</ContentPage.Content>
</ContentPage>
in my TitleBarView.xaml
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.TitleBarView">
<ContentView.Content>
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Item1}"/>
<Button Text="Options" Command="{Binding OptionsCommand}"/>
</StackLayout>
</ContentView.Content>
</ContentView>
and a generic content view, of course there will be many others I want to switch between
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.Page1View">
<ContentView.Content>
<StackLayout Orientation="Vertical">
<Label Text="{Binding Info}"/>
<Button Text="Log In" Command="{Binding GoToPage2Command}"/>
</StackLayout >
</ContentView.Content>
</ContentView>
I am using the MVVM model and have this code, but can't seem to get just the basics working.
The Master page displays fine.
If the Details page is just a simple page, it works, but I can't figure out how to insert the TitleBar and swap out the "Content".
ContainerView containerPage = new ContainerView();
ContainerViewModel containerVM = new ContainerViewModel();
containerPage.BindingContext = containerVM;
NavBarView navigationBar = new NavBarView();
navigationBar.Title = "Navigation Bar"; // required, otherwise I get an exception.
NavBarViewModel navigationBarVM = new NavBarViewModel();
navigationBar.BindingContext = navigationBarVM;
MainView mainView = new MainView();
mainView.Title = "MainView";
MainViewModel mainViewVM = new MainViewModel();
mainView.BindingContext = mainViewVM;
TitleBarView titleBar = new TitleBarView();
TitleBarViewModel titleBarVM = new TitleBarViewModel();
titleBar.BindingContext = titleBarVM;
Page1View page1 = new Page1View();
Page1ViewModel page1VM = new Page1ViewModel();
page1.BindingContext = page1VM;
mainView.Content = new StackLayout()
{
Orientation = StackOrientation.Vertical,
Children =
{
new Label { Text = "I'm Content!" },
new Label { Text = "I'm Content!" },
//titleBar.Content,
//loginView.Content
}
};
containerPage.MasterBehavior = MasterBehavior.Popover;
containerPage.Master = navigationBar;
containerPage.Detail = new NavigationPage(mainView);
I'm sure I'm missing a fundamental concept. Any help would be appreciated
Xaml can instantiate any control, defined in code or in Xaml, so in case of TitleBarView, you can instantiate it in any Xaml by
<xmlnsprefix:TitleBarView />
The problem is to set the right xmlnsprefix. Every xaml file define a few xmlns and you can add your own, like this:
xmlns:local="clr-namespace:MyApp"
and it'll mean that the Xml namespace 'local' will reference the clr namespace 'MyApp' in the current assembly.
So you MainView becomes:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyApp"
x:Class="MyApp.MainView"
Title="Main View">
<ContentPage.Content>
<local:TitleBarView />
</ContentPage.Content>
</ContentPage>

Content page property not set with implicit style

Using Prism.Forms 6.2 and Xamarin.Forms 2.3.3.118 pre-1 when I set the content page padding in the application resource file it is not followed globally only for the content page padding. All other resource properties are flowing correctly. Here is my code for the app.xaml:
<?xml version="1.0" encoding="utf-8"?>
<prism:PrismApplication xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyNamespace.App"
xmlns:prism="clr-namespace:Prism.Unity;assembly=Prism.Unity.Forms"
xmlns:local="clr-namespace:MyNamespace;assembly=MyNamespace">
<prism:PrismApplication.Resources>
<!-- Application resource dictionary -->
<ResourceDictionary>
<converter:DebuggingConverter x:Key="localDebuggingConverter"/>
<local:ItemTappedEventArgsToItemTappedConverter x:Key="SelectedItemConverter" />
<Style TargetType="Label">
<Setter Property="FontSize" >
<Setter.Value>
<!--iOS default is 17 and is not the same size as android 14. If FontSize is left at default it will be larger on iOS than android-->
<OnPlatform x:TypeArguments="x:Double"
iOS="14"
Android="14">
</OnPlatform>
</Setter.Value>
</Setter>
<Setter Property="VerticalOptions" Value="Center">
</Setter>
</Style>
<Style TargetType="ContentPage">
<Setter Property="Padding">
<Setter.Value>
<OnPlatform x:TypeArguments="Thickness"
iOS="5, 28, 5, 5"
Android="5, 8, 5, 5"
WinPhone="5, 8, 5, 5" />
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</prism:PrismApplication.Resources>
</prism:PrismApplication>
Here is my xaml view:
<?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:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
xmlns:local="clr-namespace:MyNamespace;assembly=MyNamespace"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="MyNamespace.Views.ChooseProfileView">
<!--<ContentPage.Padding>
If I set the content padding this way it is rendered correctly. When this is commented out as it is now the padding is not set by the application resource (implicit style).
<OnPlatform x:TypeArguments="Thickness"
iOS="5, 28, 5, 5"
Android="5, 8, 5, 5"
WinPhone="5, 8, 5, 5" />
</ContentPage.Padding> -->
<ContentPage.Content>
<!-- whatever content. The padding set here is displayed correctly-->
</ContentPage.Content>
</ContentPage>
Any ideas what is wrong?
TargetType in style is set to ContextPage but the real type is ChooseProfileView.
Xamarin.Forms.Style.TargetType Property
Developers should be aware that implicit styles are only applied to the specific type that is described by Style.TargetType, and not to types that inherit from it.

How to change ListView selected item's background color?

My ListView structure in xaml file is written below. In this listview, I am adding some list items. When I click on any item from this items the background color of selected item will be orange by default. I wish this selected iem's background to be black. How can I achieve this in xaml?
<ListView x:Name="LstMenu"
HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Vertical"`enter code here`
Padding="10">
<Label Text="{Binding ListItems}"
FontSize="15"
TextColor="White"
HorizontalTextAlignment="Start"
VerticalTextAlignment="Center" />
</StackLayout>
<Grid BackgroundColor="Black"
HeightRequest="1"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I really wish there was a great cross-platform solution to this issue, but to date I haven't found one. Here's a link to a nearly identical question from the Xamarin.Forms Forums. Using an Android project as an example, I typically achieve the effect you are looking for by adding a styles.xml file to the Resources directory:
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<color name="CustomHighlight">#android:color/transparent</color>
<style name="Theme.Splash" parent="android:Theme">
<item name="android:windowBackground">#drawable/androidsplash</item> <!-- must be lowercase -->
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsTranslucent">false</item>
<item name="android:windowIsFloating">false</item>
<item name="android:backgroundDimEnabled">true</item>
</style>
<style name="CustomTheme" parent="android:Theme.Holo">
<item name="android:icon">#android:color/transparent</item>
<item name="android:colorPressedHighlight">#color/CustomHighlight</item>
<item name="android:colorLongPressedHighlight">#color/CustomHighlight</item>
<item name="android:colorFocusedHighlight">#color/CustomHighlight</item>
<item name="android:colorActivatedHighlight">#color/CustomHighlight</item>
<item name="android:activatedBackgroundIndicator">#color/CustomHighlight</item>
<!--<item name="android:colorActivatedHighlight">#android:color/transparent</item>-->
</style>
<style name="ProgressBarStyle" parent="#android:style/Widget.ProgressBar.Horizontal"/>
</resources>
Note that I am using a sytem defined color (transparent) in this case, but you could reference or define any color you like.Then add a reference to the style in your MainActivity.cs file:
[Activity(Label = Constants.CompanyName,
Theme = "#style/CustomTheme",
Icon = "#drawable/icon",
MainLauncher = false,
ScreenOrientation = ScreenOrientation.Portrait,
ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity
{
// your code here
}
I don't have a handy sample for Windows or iOS, but the concept is the same; override a default style in the platform specific project.