reusable contentview .NET MAUI - xaml

Simply, I have a contentview such as;
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="myapp.customstacklayout">
<StackLayout>
<StackLayout>
<StackLayout x:Name="header">
<!-- some title things here, such as a header label etc-->
</StackLayout>
<StackLayout x:Name="content">
<!--Contents should be added here when reused-->
</StackLayout>
<StackLayout x:Name="footer">
<!-- some footer things here, such as a summary label etc-->
</StackLayout>
</StackLayout>
<!--Not here-->
</StackLayout>
</ContentView>
and i want to reuse it in a ContentPage such as;
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:mycontrols="clr-namespace:myapp"
x:Class="myapp.mainpage">
<StackLayout>
<mycontrols:customstacklayout>
<Button Text="TestButton"/>
<Entry Text="TestEntry"/>
<Label Text="TestLabel"/>
.... and etc..
</mycontrols:customstacklayout>
</StackLayout>
</ContentPage>
to create such a reusable item, i think, in xaml, there has to be something for contentview to point which IView item the children should be added in
Any idea or a piece of code for that?
Thanks in advance.
Ender
EDIT: i changed my contentview xaml for using ControlTemplate. Added Resources and a contentPresenter at the point where i want to show the children added. But still can not see the children
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="myapp.customstacklayout">
<ContentView.Resources x:Key="template">
<ControlTemplate>
<StackLayout>
<StackLayout>
<StackLayout x:Name="header">
<!-- some title things here, such as a header label etc-->
</StackLayout>
<StackLayout x:Name="content">
<!--Contents should be added here when reused-->
<ContentPresenter/>
</StackLayout>
<StackLayout x:Name="footer">
<!-- some footer things here, such as a summary label etc-->
</StackLayout>
</StackLayout>
<!--Not here-->
</StackLayout>
</ControlTemplate>
</ContentView.Resources>
</ContentView>

Well, if you want to create a reusable ContentView .NET MAUI, you can create Control Templates with Content Presenter and then reuse it in the page you want.
You can refer to below detailed steps on how to use it.
1. Create a custom control: CustomControl.xaml that inherits from ContentView with a custom BindableProperty like below:
XAML:
<ContentView.ControlTemplate>
<ControlTemplate>
<Frame>
<VerticalStackLayout>
<Label Text="{TemplateBinding Title}"/>
<ContentPresenter/>
</VerticalStackLayout>
</Frame>
</ControlTemplate>
</ContentView.ControlTemplate>
Code-behind:
public partial class CustomControl : ContentView
{
public static readonly BindableProperty TitleProperty =
BindableProperty.Create(nameof(Title), typeof(string), typeof(CustomControl) );
public CustomControl()
{
InitializeComponent();
}
public string Title
{
get => GetValue(TitleProperty) as string;
set => SetValue(TitleProperty, value);
}
}
2. You can reuse it multiples in the MainPage.xaml like below:
<?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:controls="clr-namespace:MauiAppCustomDemo.Controls"
x:Class="MauiAppCustomDemo.MainPage">
<ScrollView>
<VerticalStackLayout
Spacing="25"
Padding="30,0"
VerticalOptions="Center">
<controls:CustomControl Title="Hello World">
<VerticalStackLayout>
<Label Text="Label 1"/>
<Label Text="Label 2"/>
</VerticalStackLayout>
</controls:CustomControl>
<controls:CustomControl Title="Hello again">
<HorizontalStackLayout>
<Label Text="Label 3"/>
<Label Text="Label 4"/>
</HorizontalStackLayout>
</controls:CustomControl>
</VerticalStackLayout>
</ScrollView>
</ContentPage>
Microsoft Official reference link:https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/controltemplate?view=net-maui-7.0

Related

Xamarin MasterDetailPage ContentPropertyAttribute

I'm trying to learn Xamarin and I was doing a simple MasterDetailPage to run on iOS. After running the code I got this error:
Can not set the content of MasterDetailPage as it doesn't have a ContentPropertyAttribute
Below is my XAML file code snippet:
<?xml version="1.0" encoding="utf-8"?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:MasterDetailLearing" x:Class="MasterDetailLearing.MainPage">
<!-- Place new controls here -->
<Label Text="Welcome to Xamarin.Forms!" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
<MasterDetailPage.Master>
<ContentPage Padding="10" BackgroundColor="Gray" Title="Master">
<ContentPage.Content>
<StackLayout Margin="5,30,5,5">
<Label Text="Master Page"></Label>
</StackLayout>
</ContentPage.Content>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<ContentPage Padding="10">
<ContentPage.Content>
<StackLayout Margin="5,30,5,5">
<Label Text="Detail Page"></Label>
</StackLayout>
</ContentPage.Content>
</ContentPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
a MasterDetail page only has Master and Detail children. You cannot include any other content as a direct child. So your Label needs to be in either the Master or the Detail, it cannot be a direct child of the page.

Vertical text align on side menu xamarin.forms

I have been trying to centralize the text- "Hello Janine Alexander" on this side menu but to no avail. I have tried YAlign="Center" and also VerticalTextAlignment="Center" but neither have moved it even an inch down. Any help will be appreciated. I do think its in the navigation bar resulting in it not moving vertically down.How do i fix this
Here is the complete xaml code:
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="loyaltyworx1.Profile">
<MasterDetailPage.Master>
<ContentPage Title="Menu"
BackgroundColor="#2196F3">
<StackLayout Orientation="Vertical">
<Label x:Name="lblMessage" FontSize="Medium" HorizontalOptions="Center" TextColor="White" />
<!--
This StackLayout you can use for other
data that you want to have in your menu drawer
-->
<StackLayout BackgroundColor="#2196F3"
HeightRequest="150">
<Label Text=""
FontSize="20"
VerticalOptions="CenterAndExpand"
TextColor="White"
HorizontalOptions="Center"/>
</StackLayout>
<ListView x:Name="navigationDrawerList"
RowHeight="60"
SeparatorVisibility="None"
BackgroundColor="White"
ItemSelected="OnMenuItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Main design for our menu items -->
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="20,10,0,10"
Spacing="20">
<Image Source="{Binding Icon}"
WidthRequest="40"
HeightRequest="40"
VerticalOptions="Center"
/>
<Label Text="{Binding Title}"
FontSize="Medium"
VerticalOptions="Center"
TextColor="#343f42"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
It looks like you're adding it to the Navigation bar of the MasterDetailPage. If so, you're not going to be able to move it down. What I did on my app was to remove the navigationbar in the MasterDetailPage and in the content page I added the label with binding to add the name of the logged in user.
MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyApp"
x:Class="MyApp.MainPage"
NavigationPage.HasNavigationBar="False">
<MasterDetailPage.Master>
<local:MasterPage x:Name ="masterPage"/>
</MasterDetailPage.Master>
</MasterDetailPage>
MasterPage.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.MasterPage"
Padding="0,10,0,0"
Icon="hamburger.png"
Title="Menu">
<ContentPage.Content>
<StackLayout>
<StackLayout Orientation="Horizontal" Padding="10,10,0,0">
<Label Text="" FontSize="40" FontFamily="FontAwesome" />
<Label x:Name="Username" Text="{Binding UserFullName}" VerticalOptions="CenterAndExpand"/>
</StackLayout>
.....
Screen shot
If that's not the issue please add the code that is wrapping the label to get a better idea of what could be happening.

Xamarin Forms - My ContentPresenter won't show its Content

I'm still getting used to Xamarin Forms, so I have the following control called PopupFrame:
PopupFrame.cs
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class PopupFrame : ContentView
{
public static readonly BindableProperty PopupContentProperty =
BindableProperty.Create(nameof(PopupContent), typeof(View), typeof(PopupFrame));
public View PopupContent
{
get { return (View)GetValue(PopupContentProperty); }
set { SetValue(PopupContentProperty, value); }
}
public PopupFrame()
{
InitializeComponent();
}
}
PopupFrame.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="TestApp.Core.Controls.PopupFrame">
<Frame>
<StackLayout>
<Label Text="--- TEST TITLE ---" />
<ContentPresenter Content="{TemplateBinding PopupContent}" />
</StackLayout>
</Frame>
</ContentView>
In my view:
<popCtl:PopupFrame HorizontalOptions="Center"
VerticalOptions="Center">
<popCtl:PopupFrame.PopupContent>
<ListView x:Name="ListUsers">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Label Text="{Binding Name}"
HorizontalOptions="CenterAndExpand"
VerticalOptions="Center" />
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</popCtl:PopupFrame.PopupContent>
</popCtl:PopupFrame>
So what's happening is that When the ContentView control shows, only the Label (with the text -- TEST TITLE -- is displayed, but not the ListView).
I've also tried replacing the ContentPreseter with a ContentView, but same result: my ListView doesn't not show. And I made sure that data does in fact exist in the ItemsSource of the ListView (set in code-behind).
Is my ContentView setup wrong??
TemplateBinding can only be used to bind from inside a control-template. In order for your binding to work - you can use ReferenceExtension to refer to parent control.
For ex, update your binding as following:
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TestApp.Core.Controls.PopupFrame"
x:Name="_parent">
<Frame>
<StackLayout>
<Label Text="--- TEST TITLE ---" />
<ContentPresenter
Content="{Binding Path=PopupContent, Source={x:Reference _parent}}" />
</StackLayout>
</Frame>
</ContentView>

How to create Footer which can be used for all the xamarin Form pages?

I am creating an app in which i want the footer which will be common for all xaml pages.I tried solution given on this link xamarin forum
but it is showing error for partial class bcoz I'm using xamarin xaml form page while inheriting the class PageToInherit.If I just use page (only .cs file) then there is no error.
public partial class TodoList : PageToInherit
{
public TodoList()
{
InitializeComponent();
this.Title = "TodoList page";
Button button = new Button();
button.Text = "BUTTON 1";
MainStackLayout.Children.Add(button);
Content = MainStackLayout;
}
}
I think you can take a look to TemplatedPage
Create a ControlTemplate
<?xml version="1.0" encoding="utf-8" ?>
<Application
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Mobile.App">
<Application.Resources>
<ResourceDictionary>
<ControlTemplate x:Key="MainPageTemplate">
<StackLayout>
<Label Text="Header Content" FontSize="24" />
<ContentPresenter />
</StackLayout>
</ControlTemplate>
</ResourceDictionary>
</Application.Resources>
</Application>
Apply the ControlTemplate
<?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="Mobile.MainPage"
ControlTemplate="{StaticResource MainPageTemplate}">
<Label Text="Main Page Content" FontSize="18" />
</ContentPage>
Use TemplateBinding
<ControlTemplate x:Key="MainPageTemplate">
<StackLayout>
<Label Text="{TemplateBinding BindingContext.HeadingText}" FontSize="24" />
<ContentPresenter />
</StackLayout>
</ControlTemplate>
Here the Blog
For those who are still looking for this.
Use ContentView for creating reusable xaml views.
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="xxx.FooterView">
<ContentView.Content>
<RelativeLayout VerticalOptions="End" HorizontalOptions="Fill" HeightRequest="42" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}">
<Label HeightRequest="42" VerticalTextAlignment="Center" Text="Copyright © 2017. All rights reserved." HorizontalTextAlignment="Center" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}" />
</RelativeLayout>
</ContentView.Content>
</ContentView>
and use it in your page like any control
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="xxx.Page1" xmlns:local="clr-namespace:xxx;assembly=xxx" >
<local:FooterView VerticalOptions="End" HeightRequest="45"/>
//other views and layouts
</ContentPage>
Hope it helps.

Databinding in XAML for MasterDetailPage in Xamarin.Forms

So far, most examples using Xamarin.Forms are using C# for building up the UI. I prefer using XAML for the UI, and databind it to ViewModels.
I'm having trouble using the Xamarin.Forms.MasterDetailPage in combination with XAML, and I can't seem to port the C# example to XAML + ViewModels.
This is the XAML I got so far:
<?xml version="1.0" encoding="UTF-8" ?>
<MasterDetailPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:NSContacten;assembly=NSContacten"
x:Class="MasterDetailExample.Main"
Title="Master Detail Example">
<MasterDetailPage.Master BindingContext="{Binding Menu}">
<ContentPage Padding="5, 25">
<StackLayout Orientation="Vertical">
<Label Text="Master" HorizontalOptions="Center" />
<Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail BindingContext="{Binding Detailpage}">
<ContentPage Padding="5, 25">
<StackLayout Orientation="Vertical">
<Label Text="Detail" HorizontalOptions="Center" />
<Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
The component works: I do see the 'Master' and 'Detail' labels. The bound labels (on the BindingContext objects) are not displayed.
I've used loads of different combinations, but I'm still stuck: How does this work? Is my binding incorrect (should it be on the "ContentPage"), can't I bind to the .Master and .Detail properties etc.? How should the "Menu" and "Detailpage" bindings look like?
It would be a huge help if anyone could help me out! The next step would be that the .Detail will be changed when a button is pressed in the .Master . Thanks in advance!
Your Xaml is almost ok, but:
The {BindingContext} are invalid on the properties and should be on the ContentPage elements
MasterDetailPage.Master require a Page.Title to be set, or it throws.
Here's the correct Xaml working for me:
<?xml version="1.0" encoding="UTF-8" ?>
<MasterDetailPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:NSContacten;assembly=NSContacten"
x:Class="MasterDetailExample.Main"
Title="Master Detail Example">
<MasterDetailPage.Master>
<ContentPage Padding="5, 25" BindingContext="{Binding Menu}" Title="Master">
<StackLayout Orientation="Vertical">
<Label Text="Master" HorizontalOptions="Center" />
<Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<ContentPage Padding="5, 25" BindingContext="{Binding Detailpage}">
<StackLayout Orientation="Vertical">
<Label Text="Detail" HorizontalOptions="Center" />
<Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
I tested it with an anonymous type as the page view model:
public MyMDPage ()
{
InitializeComponent ();
BindingContext = new {
Menu = new { Subtitle = "I'm Master" },
Detailpage = new { Subtitle = "I'm Detail" }
};
}
and this works just fine. In your case, you probably want concrete types instead of anonymous ones for your view model, but you get the idea.