分离行为(separate behaviors)

Question

我正在尝试根据设备创建两个单独的函数

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

在 Windows 上不显示

在 Android 上，我收到此错误

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

预期行为

我希望手机有滑动删除功能，桌面有按钮

此问题整理于：https://learn.microsoft.com/en-us/answers/questions/2079284/separate-behaviors

Answer 1

你好，

如果要为不同的平台使用不同的 DataTemplate，最推荐的方法是在渲染过程中通过 DataTemplateSeclector 动态生成它。

您可以参考以下文档和代码片段：

• Create a DataTemplateSelector.

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>

---

如果答案是正确的，请点击“接受答案”并点赞。 如果您对此答案还有其他疑问，请点击“评论”。 注意：如果您想接收相关电子邮件，请按照我们的文档中的步骤启用电子邮件通知 此线程的通知。