reusable template

Eduardo Gomez Romero 465

In my collectionView, I have this

 <CollectionView
     Margin="20"
     ItemsSource="{Binding Turbines}">
     <CollectionView.ItemTemplate>
         <DataTemplate x:DataType="model:TurbinePin">
             
             <!-- Use SwipeView for mobile -->
             
             <OnIdiom x:TypeArguments="View">
                 <OnIdiom.Phone>
                     <SwipeView>
                         <SwipeView.RightItems>
                             <SwipeItems>
                                 <SwipeItem Text="Delete"
                                            BackgroundColor="Red"
                                            Command="{Binding Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}, Path=DeleteTurbineCommand}"
                                            CommandParameter="{Binding Turbine}">
                                     <SwipeItem.IconImageSource>
                                         <FontImageSource Glyph="{x:Static constant:MaterialFonts.Delete}"
                                                          FontFamily="ma" />
                                     </SwipeItem.IconImageSource>
                                 </SwipeItem>
                             </SwipeItems>
                         </SwipeView.RightItems>

                         <Border>
                             <Border.StrokeShape>
                                 <RoundRectangle CornerRadius="8" />
                             </Border.StrokeShape>
                             <Grid Padding="10"
                                   ColumnDefinitions="*,30"
                                   RowDefinitions="*,*">
                                 <Label Text="{Binding Turbine.Name}" />
                                 <Label Grid.Row="1"
                                        Text="{Binding Turbine.Address}" />
                                 <Label Grid.RowSpan="2"
                                        Grid.Column="1"
                                        FontFamily="ma"
                                        FontSize="Medium"
                                        HorizontalTextAlignment="End"
                                        Text="{x:Static constant:MaterialFonts.Info}"
                                        VerticalTextAlignment="Center" />
                             </Grid>
                         </Border>
                     </SwipeView>
                 </OnIdiom.Phone>

                 <OnIdiom.Desktop>

                     <Border>
                         <Border.StrokeShape>
                             <RoundRectangle CornerRadius="8" />
                         </Border.StrokeShape>
                         <Grid Padding="10"
                               ColumnDefinitions="*,30"
                               RowDefinitions="*,*">
                             <Label Text="{Binding Turbine.Name}" />
                             <Label Grid.Row="1"
                                    Text="{Binding Turbine.Address}" />
                             <Label Grid.RowSpan="2"
                                    Grid.Column="1"
                                    FontFamily="ma"
                                    FontSize="Medium"
                                    HorizontalTextAlignment="End"
                                    Text="{x:Static constant:MaterialFonts.Info}"
                                    VerticalTextAlignment="Center" />
                             
                             <!-- Delete button for desktop -->

                             <Button Grid.Column="1"
                                     Command="{Binding Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}, Path=DeleteTurbineCommand}"
                                     CommandParameter="{Binding Turbine}"
                                     VerticalOptions="Center"
                                     HorizontalOptions="End">
                                 <Button.ImageSource>
                                     <FontImageSource Glyph="{x:Static constant:MaterialFonts.Delete}"
                                                      FontFamily="ma" />
                                 </Button.ImageSource>
                             </Button>
                         </Grid>
                     </Border>
                 </OnIdiom.Desktop>
             </OnIdiom>
         </DataTemplate>
     </CollectionView.ItemTemplate>
 </CollectionView>

As you can see I am duplicating this

                        <Border>
                             <Border.StrokeShape>
                                 <RoundRectangle CornerRadius="8" />
                             </Border.StrokeShape>
                             <Grid Padding="10"
                                   ColumnDefinitions="*,30"
                                   RowDefinitions="*,*">
                                 <Label Text="{Binding Turbine.Name}" />
                                 <Label Grid.Row="1"
                                        Text="{Binding Turbine.Address}" />
                                 <Label Grid.RowSpan="2"
                                        Grid.Column="1"
                                        FontFamily="ma"
                                        FontSize="Medium"
                                        HorizontalTextAlignment="End"
                                        Text="{x:Static constant:MaterialFonts.Info}"
                                        VerticalTextAlignment="Center" />
                             </Grid>

I am also duplicating the deleteCommand and the fontImageSource

the only diferene is that in phones, I have a swipe and desktop a button with an icon

so how can I reduce this ode as much as posible

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 31,161 Reputation points Microsoft Vendor

2024-09-26T06:40:50.2733333+00:00

You could try to create a ControlTemplate, refer to Control templates - .NET MAUI | Microsoft Learn

The key point is how to pass parameters with TemplateBinding because I noticed that you set the binding for the labels. Would you mind sharing more code snippets about the ViewModel, so that I can determine the logic to set binding?

Eduardo Gomez Romero 465

ok so I made a Datatemplate file

public class PlatformDatatemplateSelector : DataTemplateSelector
    {
        public DataTemplate PhoneTemplate { get; set; }
        public DataTemplate DeskTopTemplate { get; set; }
        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
        {
#if WINDOWS
            return DeskTopTemplate;
#else
            return PhoneTemplate;
#endif
        }
    }

and here is my page

<ContentPage
    x:Class="METROWIND.Views.TurbinesCollectionPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:constant="clr-namespace:METROWIND.Constants"
    xmlns:controls="clr-namespace:METROWIND.Controls"
    xmlns:editors="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs"
    xmlns:inputLayout="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
    xmlns:local="clr-namespace:METROWIND"
    xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:model="clr-namespace:METROWIND.Models"
    xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker"
    xmlns:rex="clr-namespace:METROWIND.Resources"
    xmlns:syncfusion="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup"
    xmlns:vm="clr-namespace:METROWIND.ViewModel"
    x:Name="TurbinesCollection"
    x:DataType="vm:TurbinesCollectionPageViewModel">

    <ContentPage.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="PhoneTemplate">
                <SwipeView>
                    <SwipeView.RightItems>
                        <SwipeItems>
                            <SwipeItem
                                BackgroundColor="#CB202B"
                                Text="Delete">
                                <SwipeItem.IconImageSource>
                                    <FontImageSource
                                        FontFamily="ma"
                                        Glyph="{x:Static constant:MaterialFonts.Delete}" />
                                </SwipeItem.IconImageSource>
                            </SwipeItem>
                        </SwipeItems>
                    </SwipeView.RightItems>
                    <Border>
                        <Border.StrokeShape>
                            <RoundRectangle CornerRadius="8" />
                        </Border.StrokeShape>
                        <Grid
                            Padding="10"
                            RowDefinitions="*,*,*">
                            <Label Text="{Binding Turbine.Name}" />
                            <Label
                                Grid.Row="1"
                                Text="{Binding Turbine.Address}" />
                            <Label
                                Grid.Row="2"
                                Text="{Binding Turbine.LocalizedInstalationDateTime}" />
                        </Grid>
                        <Border.GestureRecognizers>
                            <TapGestureRecognizer
                                Command="{Binding Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}, Path=OnPinMarkerClickedCommand}"
                                CommandParameter="{Binding Turbine}" />
                        </Border.GestureRecognizers>
                    </Border>
                </SwipeView>

            </DataTemplate>
            <DataTemplate x:Key="DesktopTemplate">
                <Border>
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="8" />
                    </Border.StrokeShape>
                    <Grid
                        Padding="5"
                        ColumnDefinitions="*,60"
                        RowDefinitions="*,*,*">
                        <Label Text="{Binding Turbine.Name}" />
                        <Label
                            Grid.Row="1"
                            Text="{Binding Turbine.Address}" />
                        <Label
                            Grid.Row="2"
                            Text="{Binding Turbine.LocalizedInstalationDateTime}" />
                        <Button
                            Grid.RowSpan="3"
                            Grid.Column="1"
                            BackgroundColor="#CB202B"
                            HorizontalOptions="End"
                            VerticalOptions="FillAndExpand">
                            <Button.ImageSource>
                                <FontImageSource
                                    FontFamily="ma"
                                    Glyph="{x:Static constant:MaterialFonts.Delete}" />
                            </Button.ImageSource>
                        </Button>
                    </Grid>
                    <Border.GestureRecognizers>
                        <TapGestureRecognizer
                            Command="{Binding Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}, Path=OnPinMarkerClickedCommand}"
                            CommandParameter="{Binding Turbine}" />
                    </Border.GestureRecognizers>
                </Border>
            </DataTemplate>

            <local:PlatformDatatemplateSelector
                x:Key="platformDatatemplateSelector"
                DesktopTemplate="{x:StaticResource DesktopTemplate}"
                PhoneDataTemplate="{x:StaticResource PhoneTemplate}" />

        </ResourceDictionary>
    </ContentPage.Resources>

what I do not understands is that in both cases, I will use this the seme thing.

a border, with a grid and some data

the only main difference is, that on dektop, I have a new colum with a button and that it

there is no way, to make the code smaller?

also my vm is here

x:DataType="vm:TurbinesCollectionPageViewModel">

I am using dependency injection

public partial class TurbinesCollectionPage : ContentPage {
    public TurbinesCollectionPage(TurbinesCollectionPageViewModel turbinesCollectionPageViewModel) {
        InitializeComponent();
        BindingContext = turbinesCollectionPageViewModel;
    }
}

Eduardo Gomez Romero 465

I forgot to pass the vm

      public partial class TurbinesCollectionPageViewModel(GeoapifyService geoapifyService, TurbinesService turbinesService)
       : ChargingStationsMapPageViewModel(turbinesService) {

becouse I am inheriting, everything comes from my charting station vm

 public partial class ChargingStationsMapPageViewModel : ObservableObject {
     private readonly TurbinesService _turbinesService;
     private Microsoft.Maui.Controls.Maps.Map? MapView;
     public ObservableCollection<TurbinePin>? Turbines { get; set; }
     public ICommand? OnPinMarkerClickedCommand { get; }
     [ObservableProperty]
     bool isOptionsOpen;
     [ObservableProperty]
     bool isExpanded;
     public ChargingStationsMapPageViewModel(TurbinesService turbinesService) {
         OnPinMarkerClickedCommand = new Command<object>(OnPinMarkerClicked);
         _turbinesService = turbinesService;
         var SortedTurbinePins = _turbinesService.GetTurbinePins(OnPinMarkerClickedCommand)
             .OrderBy(t => t.Turbine!.InstalationDateTime);
         Turbines = new ObservableCollection<TurbinePin>(SortedTurbinePins);
     }

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 31,161 Reputation points Microsoft Vendor

2024-09-27T07:50:02.9266667+00:00

I mean create a custom control with the control template not the Datatemplate you provided. PlatformDatatemplateSelector is a great option, but you still think it's complex, right?

Eduardo Gomez Romero 465

Yes, and I do not know where to get the binding context for the turbine

I was trying, but it did not work

 <ContentPage.Resources>
     <ResourceDictionary>
         <DataTemplate
             x:Key="PhoneTemplate"
             x:DataType="model:TurbinePin">
             <SwipeView>
                 <SwipeView.RightItems>
                     <SwipeItems>
                         <SwipeItem
                             BackgroundColor="#CB202B"
                             Text="Delete">
                             <SwipeItem.IconImageSource>
                                 <FontImageSource
                                     FontFamily="ma"
                                     Glyph="{x:Static constant:MaterialFonts.Delete}" />
                             </SwipeItem.IconImageSource>
                         </SwipeItem>
                     </SwipeItems>
                 </SwipeView.RightItems>
                 <Border>
                     <Border.StrokeShape>
                         <RoundRectangle CornerRadius="8" />
                     </Border.StrokeShape>
                     <Grid
                         Padding="10"
                         RowDefinitions="*,*,*">
                         <Label Text="{Binding Turbine.Name}" />
                         <Label
                             Grid.Row="1"
                             Text="{Binding Turbine.Address}" />
                         <Label
                             Grid.Row="2"
                             Text="{Binding Turbine.LocalizedInstalationDateTime}" />
                     </Grid>
                     <Border.GestureRecognizers />
                 </Border>
             </SwipeView>

         </DataTemplate>
         <DataTemplate
             x:Key="DesktopTemplate"
             x:DataType="model:TurbinePin">
             <Border>
                 <Border.StrokeShape>
                     <RoundRectangle CornerRadius="8" />
                 </Border.StrokeShape>
                 <Grid
                     Padding="5"
                     ColumnDefinitions="*,60"
                     RowDefinitions="*,*,*">
                     <Label Text="{Binding Turbine.Name}" />
                     <Label
                         Grid.Row="1"
                         Text="{Binding Turbine.Address}" />
                     <Label
                         Grid.Row="2"
                         Text="{Binding Turbine.LocalizedInstalationDateTime}" />
                     <Button
                         Grid.RowSpan="3"
                         Grid.Column="1"
                         BackgroundColor="#CB202B"
                         HorizontalOptions="End"
                         VerticalOptions="FillAndExpand">
                         <Button.ImageSource>
                             <FontImageSource
                                 FontFamily="ma"
                                 Glyph="{x:Static constant:MaterialFonts.Delete}" />
                         </Button.ImageSource>
                     </Button>
                 </Grid>
                 <Border.GestureRecognizers>
                     <TapGestureRecognizer />
                 </Border.GestureRecognizers>
             </Border>
         </DataTemplate>

         <local:PlatformDatatemplateSelector
             x:Key="platformDatatemplateSelector"
             DesktopTemplate="{x:StaticResource DesktopTemplate}"
             PhoneDataTemplate="{x:StaticResource PhoneTemplate}" />

     </ResourceDictionary>
 </ContentPage.Resources>

 <Grid>
     <CollectionView
         Margin="20"
         HorizontalOptions="Center"
         ItemsSource="{Binding Turbines}">
         <CollectionView.ItemTemplate>
             <local:PlatformDatatemplateSelector />
         </CollectionView.ItemTemplate>
     </CollectionView>

I get System.NullReferenceException: 'Object reference not set to an instance of an object.'

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 31,161 Microsoft Vendor

I mean create a custom control to package the reusable Border like the following:

Xaml

<?xml version="1.0" encoding="utf-8" ?>
<Border xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ReuseCollectionview.CustomBorder">
 
    <Grid Padding="10"
                                   ColumnDefinitions="*,30"
                                   RowDefinitions="*,*">
<Label Text="{Binding Turbine.Name}" />
<Label Grid.Row="1"
                                        Text="{Binding Turbine.Address}" />
<Label Grid.RowSpan="2"
                                        Grid.Column="1"
                                        FontFamily="ma"
                                        FontSize="Medium"
                                        HorizontalTextAlignment="End"
                                        Text="{x:Static constant:MaterialFonts.Info}"
                                        VerticalTextAlignment="Center" />
</Grid>
 
</Border>

code

public partial class CustomBorder : Border
{
	public CustomBorder()
	{
		InitializeComponent();
	}
}

Did you try this before? (I still investigate how to pass the binding from the page to the custom border. )

Eduardo Gomez Romero 465 Reputation points

2024-10-02T10:49:54.6033333+00:00

this will work, but how to get the binding, and also, we can make and if component, to check if we are in desktop or mobile, but I am still having problems with my template
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

2 answers

Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 31,161 Microsoft Vendor

Hello,

I double-check the xaml code snippets you provided. On the view on phone, you added the swipe view (and a grid) without the delete button. On the view on desktop, there is Grid wrapping the label.

The structure of views varies greatly, and the reusable part is the following:

 <Label Text="{Binding Turbine.Name}" />
                     <Label
                         Grid.Row="1"
                         Text="{Binding Turbine.Address}" />
                     <Label
                         Grid.Row="2"
                         Text="{Binding Turbine.LocalizedInstalationDateTime}" />

It's not very necessary to recuse the template. If you still want to recuse these three labels, you should create a custom control with bindable properties. And you could refer to the following code:

Custom Grid

<Grid xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ReuseCollectionview.CustomGrid"
      x:Name="this">
 
    <Grid BindingContext="{x:Reference this}"
        Padding="10"
                                   ColumnDefinitions="*,30"
                                   RowDefinitions="*,*">
<Label Text="{Binding Name}" />
<Label Grid.Row="1"
                                        Text="{Binding Address}" />
<Label Grid.RowSpan="2"
                                        Grid.Column="1"
                                        FontFamily="ma"
                                        FontSize="Medium"
                                        HorizontalTextAlignment="End"
                                        Text="x:Static constant:MaterialFonts.Info"
                                        VerticalTextAlignment="Center" />
</Grid>
 
</Grid>

public partial class CustomGrid : Grid
{
    public static readonly BindableProperty NameProperty = BindableProperty.Create(nameof(Name), typeof(string), typeof(CustomGrid), string.Empty);
    public static readonly BindableProperty AddressProperty = BindableProperty.Create(nameof(Address), typeof(string), typeof(CustomGrid), string.Empty);
    public string Name
    {
        get => (string)GetValue(NameProperty);
        set => SetValue(NameProperty, value);
    }
 
    public string Address
    {
        get => (string)GetValue(AddressProperty);
        set => SetValue(AddressProperty, value);
    }
 
    public CustomGrid()
	{
		InitializeComponent();
	}
}

usage

<local:CustomGrid Name="{Binding Turbine.Name}" Address="{Binding Address}"></local:CustomGrid>

If you want to wrapper the whole view (Swipe view/Grid) or the whole DataTemplate, please feel free to let me know, we can work together to figure it out.

Best Regards,

Wenyan Zhang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

reusable template

2 answers

Your answer