separate behaviors

Question

I am trying to create two separate functions depending on devices

.Net 8

Maui 8.0.9

 <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"
                                            IconImageSource="delete_icon.png"
                                            BackgroundColor="Red"
                                            Command="{Binding Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}, Path=DeleteTurbineCommand}"
                                            CommandParameter="{Binding Turbine}" />
                             </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>
                 <!-- Use Button for desktop -->
                 <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}"
                                     Text="Delete"
                                     VerticalOptions="Center"
                                     HorizontalOptions="End" />
                         </Grid>
                     </Border>
                 </OnIdiom.Desktop>
             </OnIdiom>
         </DataTemplate>
     </CollectionView.ItemTemplate>
 </CollectionView><CollectionView
    Margin="20"
    ItemsSource="{Binding Turbines}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <OnIdiom x:TypeArguments="View">
                
                <!-- DataTemplate for Mobile (using SwipeView) -->

                <OnIdiom.Phone>
                    <SwipeView>
                        <SwipeView.RightItems>
                            <SwipeItems>
                                <SwipeItem
                                    BackgroundColor="Red"
                                    Command="{Binding Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}, Path=DeleteTurbineCommand}"
                                    CommandParameter="{Binding Turbine}">
                                    <SwipeItem.Icon>
                                        <Label
                                            Text="&#xe900;"  <!-- Example glyph unicode -->
                                            FontFamily="YourCustomFontAlias"
                                            FontSize="20"
                                            VerticalOptions="Center"
                                            HorizontalOptions="Center" />
                                    </SwipeItem.Icon>
                                </SwipeItem>
                            </SwipeItems>
                        </SwipeView.RightItems>
                        <!-- Binding the ContentControl to the Turbine object -->
                        <ContentControl
                            ControlTemplate="{StaticResource TurbineTemplate}"
                            Content="{Binding Turbine}">
                            <ContentControl.ContentTemplate>
                                <DataTemplate>
                                    <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" />
                                </DataTemplate>
                            </ContentControl.ContentTemplate>
                        </ContentControl>
                    </SwipeView>
                </OnIdiom.Phone>

                <!-- DataTemplate for Desktop (with Button) -->

                <OnIdiom.Desktop>
                    <ContentControl
                        ControlTemplate="{StaticResource TurbineTemplate}"
                        Content="{Binding Turbine}">
                        <ContentControl.ContentTemplate>
                            <DataTemplate>
                                <Button
                                    Grid.Column="1"
                                    Command="{Binding Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}, Path=DeleteTurbineCommand}"
                                    CommandParameter="{Binding Turbine}"
                                    Text="Delete"
                                    VerticalOptions="Center"
                                    HorizontalOptions="End" />
                            </DataTemplate>
                        </ContentControl.ContentTemplate>
                    </ContentControl>
                </OnIdiom.Desktop>
            </OnIdiom>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

On Windows doesn't show

on Android I get this error

System.InvalidCastException: 'Specified cast is not valid.'

expected behavior

I want phones to have swipe to delete, and desktop to have a button

Answer 1

Hello,

If you want to use different DataTemplate for different platforms, the most recommended way is to dynamically generate it during rendering through DataTemplateSeclector.

You can refer to the following documents and code snippets:

• Create a DataTemplateSelector

Code:

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
        }
    }

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:vm="clr-namespace:MauiApp91"
             x:Class="MauiApp91.MainPage">
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="PhoneTemplate">
<SwipeView>
...
</SwipeView>

</DataTemplate>
<DataTemplate x:Key="DeskTopTemplate">
<Border>
...
</Border>
</DataTemplate>
<vm:PlatformDatatemplateSelector x:Key="platformDatatemplateSelector"
                                             PhoneTemplate="{StaticResource PhoneTemplate}"
                                             DeskTopTemplate="{StaticResource DeskTopTemplate}"/>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.BindingContext>
<vm:MyViewModel/>
</ContentPage.BindingContext>
 
    <VerticalStackLayout >
<CollectionView
     Margin="20"
     ItemsSource="{Binding Turbines}" ItemTemplate="{StaticResource platformDatatemplateSelector}">
 
        </CollectionView>
 
    </VerticalStackLayout>
 
</ContentPage>

Best Regards,

Alec Liu.

---

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.