reusable template

Eduardo Gomez Romero 845

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.) 32,386 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 845

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 845

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.) 32,386 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 845

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.) 32,386 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 845 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.

Accepted answer

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 32,386 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.

Update

I understand that you want to use the DataTemplateSelector to choose the template, please refer to the following:

public class ChooseDataTemplateSelector : DataTemplateSelector
  {
      public DataTemplate PhoneTemplate { get; set; }
 
      public DataTemplate DeskTopTemplate { get; set; }
 
      protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
      {
          return (DeviceInfo.Current.Idiom == DeviceIdiom.Desktop)? DeskTopTemplate : PhoneTemplate;
      }
  }

The page (Xaml)

<ContentPage ...
             xmlns:local ="XXX">
 
    <ContentPage.Resources>
<DataTemplate x:Key="PhoneTemplate">
<SwipeView >
 ...// your view on phone
</SwipeView>
</DataTemplate>
<DataTemplate x:Key="DeskTopTemplate">
<Border>
// your view on desktop
</Border>
</DataTemplate>
<local:ChooseDataTemplateSelector x:Key="SelectDataTemplateSelector"
                                          PhoneTemplate="{StaticResource PhoneTemplate}"
                                          DeskTopTemplate="{StaticResource DeskTopTemplate}" />
</ContentPage.Resources>
 
    <CollectionView
     Margin="20"
     ItemsSource="{Binding Turbines}" ItemTemplate="{StaticResource SelectDataTemplateSelector}">
</CollectionView>
 
</ContentPage>

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.

Eduardo Gomez Romero 845

Ok so I did a little bit of clean up

Custom control

<VerticalStackLayout
    x:Class="METROWIND.Controls.TurbineBasicData"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Name="BasicData">

    <VerticalStackLayout
        Padding="10"
        BindingContext="{x:Reference BasicData}">

        <Label Text="{Binding TurbineName}" />
        <Label Text="{Binding TurbineAddres}" />
        <Label Text="{Binding TurbineCreationDate}" />

    </VerticalStackLayout>

</VerticalStackLayout>

But I still think we need to create data templates

<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: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:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:vm="clr-namespace:METROWIND.ViewModel"
    x:Name="TurbinesCollection"
    x:DataType="vm:TurbinesCollectionPageViewModel">

    <ContentPage.Behaviors>
        <toolkit:EventToCommandBehavior
            Command="{Binding PageEnterCommand}"
            CommandParameter="{Binding Source={x:Reference TurbineCollection}}"
            EventName="Appearing" />
    </ContentPage.Behaviors>

    <Grid>
        <CollectionView
            x:Name="TurbineCollection"
            Margin="20"
            HorizontalOptions="Center"
            ItemsSource="{Binding Turbines}">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="model:TurbinePin">
                    <Grid>
                        <SwipeView
                            Threshold="300">
                            <SwipeView.RightItems>
                                <SwipeItems Mode="Execute">
                                    <SwipeItem
                                        BackgroundColor="{AppThemeBinding Dark={x:StaticResource SwipeDark},
                                                                          Light={x:StaticResource SwipeLight}}"
                                        Command="{Binding DeleteTurbineCommand, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}"
                                        CommandParameter="{Binding Source={x:Reference borderContainer}}">
                                        <SwipeItem.IconImageSource>
                                            <FontImageSource
                                                FontFamily="ma"
                                                Glyph="{x:Static constant:MaterialFonts.Delete}" />
                                        </SwipeItem.IconImageSource>
                                    </SwipeItem>
                                </SwipeItems>
                            </SwipeView.RightItems>
                            <Border Style="{StaticResource CommonBorderStyle}">

                                <controls:TurbineBasicData
                                    TurbineAddres="{Binding Turbine.Address}"
                                    TurbineCreationDate="{Binding Turbine.LocalizedInstalationDateTime}"
                                    TurbineName="{Binding Turbine.Name}" />

                            </Border>
                        </SwipeView>

                        <Border
                            x:Name="borderContainer"
                            IsVisible="{OnIdiom Desktop=True,
                                                Phone=False}"
                            Style="{StaticResource CommonBorderStyle}">

                            <Grid
                                x:Name="GridContainer"
                                ColumnDefinitions="*,*"
                                RowDefinitions="*,*,*">

                                <controls:TurbineBasicData
                                    TurbineAddres="{Binding Turbine.Address}"
                                    TurbineCreationDate="{Binding Turbine.LocalizedInstalationDateTime}"
                                    TurbineName="{Binding Turbine.Name}" />

                                <Button
                                    Grid.RowSpan="3"
                                    Grid.Column="1"
                                    Command="{Binding DeleteTurbineCommand, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}"
                                    CommandParameter="{Binding .}"
                                    HeightRequest="{Binding Height, Source={x:Reference GridContainer}}"
                                    IsVisible="{Binding IsDeleteButtonVisible, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}"
                                    Style="{x:StaticResource DeleteButtoStyle}">
                                    <Button.ImageSource>
                                        <FontImageSource
                                            FontFamily="ma"
                                            Glyph="{x:Static constant:MaterialFonts.Delete}"
                                            Color="Black" />
                                    </Button.ImageSource>
                                </Button>
                            </Grid>
                            <Border.GestureRecognizers>
                                <PointerGestureRecognizer PointerEnteredCommand="{Binding MouseEnterCommand, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}" />
                                <PointerGestureRecognizer PointerExitedCommand="{Binding MouseLeaveCommand, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}" />
                            </Border.GestureRecognizers>
                        </Border>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

        <Button Command="{Binding AddNewTurbinePopUpCommand}" Style="{x:StaticResource AddNewTurbinePopUpStyle}" />
    </Grid>
</ContentPage>

for phones, I am using the swipview and for desktop, the button

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 32,386 Reputation points Microsoft Vendor

2024-10-08T06:01:07.5866667+00:00

I still think we need to create data templates

Creating two templates and load different template for phone and desktop, right?

Eduardo Gomez Romero 845

Yes because on phones, I will have the swipeview, and desktop no. I already tried

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 this is my Updated collection

                    <Grid>
                        <SwipeView
                            IsVisible="{OnIdiom Phone=True,
                                                Desktop=False}"
                            Threshold="300">
                            <SwipeView.RightItems>
                                <SwipeItems Mode="Execute">
                                    <SwipeItem
                                        BackgroundColor="{AppThemeBinding Dark={x:StaticResource SwipeDark},
                                                                          Light={x:StaticResource SwipeLight}}"
                                        Command="{Binding DeleteTurbineCommand, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}"
                                        CommandParameter="{Binding Source={x:Reference borderContainer}}">
                                        <SwipeItem.IconImageSource>
                                            <FontImageSource
                                                FontFamily="ma"
                                                Glyph="{x:Static constant:MaterialFonts.Delete}" />
                                        </SwipeItem.IconImageSource>
                                    </SwipeItem>
                                </SwipeItems>
                            </SwipeView.RightItems>
                            <Border Style="{StaticResource CommonBorderStyle}">
                                <controls:TurbineData
                                    TurbineAddres="{Binding Turbine.Address}"
                                    TurbineCreationDate="{Binding Turbine.LocalizedInstalationDateTime}"
                                    TurbineName="{Binding Turbine.Name}" />
                            </Border>
                        </SwipeView>

//Now the desktop psrt

                        <Border
                            x:Name="borderContainer"
                            IsVisible="{OnIdiom Desktop=True,
                                                Phone=False}"
                            Style="{StaticResource CommonBorderStyle}">

                            <Grid
                                x:Name="GridContainer"
                                ColumnDefinitions="*,*">

                                <controls:TurbineData
                                    Grid.ColumnSpan="2"
                                    TurbineAddres="{Binding Turbine.Address}"
                                    TurbineCreationDate="{Binding Turbine.LocalizedInstalationDateTime}"
                                    TurbineName="{Binding Turbine.Name}" />

                                <Button
                                    Grid.RowSpan="3"
                                    Grid.Column="1"
                                    BackgroundColor="#fef2f3"
                                    Command="{Binding DeleteTurbineCommand, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}"
                                    CommandParameter="{Binding .}"
                                    CornerRadius="0"
                                    HeightRequest="{Binding Height, Source={x:Reference GridContainer}}"
                                    HorizontalOptions="End"
                                    IsVisible="{Binding IsDeleteButtonVisible, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}"
                                    VerticalOptions="Center">
                                    <Button.ImageSource>
                                        <FontImageSource
                                            FontFamily="ma"
                                            Glyph="{x:Static constant:MaterialFonts.Delete}"
                                            Color="Black" />
                                    </Button.ImageSource>

                                </Button>
                            </Grid>
                            <Border.GestureRecognizers>
                                <PointerGestureRecognizer PointerEnteredCommand="{Binding MouseEnterCommand, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}" />
                                <PointerGestureRecognizer PointerExitedCommand="{Binding MouseLeaveCommand, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}" />
                            </Border.GestureRecognizers>
                        </Border>
                    </Grid>

the last time I tried, I did not know where to get the context

Eduardo Gomez Romero 845 Reputation points

2024-10-08T07:56:23.1066667+00:00

So I get casting error
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 32,386 Reputation points Microsoft Vendor

2024-10-09T09:11:33.5466667+00:00

I updated the answer. For more details, please refer to the official sample and read Data templates - .NET MAUI | Microsoft Learn
Eduardo Gomez Romero 845 Reputation points

2024-10-09T11:17:25.39+00:00

you sir are a genius thanks, I only had to put x:DataType="{x:Null}", to get rid of the errors

1 additional answer

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

Share via

reusable template

1 additional answer

Your answer