flipingm like a card

Question

So I have two pages

CollectionPage and newTurbinePage

What, I want to do is to make this like a card

the front part of the card will be the collectienPage

<ContentPage
    x:Class="METROWIND.Views.TurbinesCollectionPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:editors="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs"
    xmlns:inputLayout="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
    xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:rex="clr-namespace:METROWIND.Resources"
    xmlns:vm="clr-namespace:METROWIND.ViewModel"
    x:Name="TurbinesCollection"
    x:DataType="vm:TurbinesCollectionPageViewModel">
    <ContentPage.Behaviors>
        <mct:EventToCommandBehavior
            Command="{x:Binding PageEnterCommand}"
            CommandParameter="{x:Binding Source={x:Reference TurbineCollection}}"
            EventName="Appearing" />
    </ContentPage.Behaviors>
    <ContentPage.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <rex:TurbineTemplate />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </ContentPage.Resources>
    <Grid
        RowDefinitions="Auto,*"
        RowSpacing="-30">
        <inputLayout:SfTextInputLayout Style="{x:StaticResource TurbineCollectionComboBoxStyle}">
            <editors:SfComboBox
                x:Name="combobox"
                DisplayMemberPath="Turbine.Name"
                ItemsSource="{x:Binding Turbines}"
                Style="{x:DynamicResource TurbinesCollectionComboBoxStyle}">
                <editors:SfComboBox.Behaviors>
                    <mct:EventToCommandBehavior
                        Command="{x:Binding SelectedItemChangeCommand}"
                        CommandParameter="{x:Binding Source={x:Reference combobox}}"
                        EventName="SelectionChanged" />
                </editors:SfComboBox.Behaviors>
            </editors:SfComboBox>
        </inputLayout:SfTextInputLayout>
        <CollectionView
            x:Name="TurbineCollection"
            Grid.Row="1"
            ItemTemplate="{x:StaticResource SelectDataTemplateSelector}"
            ItemsSource="{x:Binding Turbines}"
            Style="{x:StaticResource TurbineCollectionViewStyle}" />
        <Button
            Grid.Row="1"
            Command="{x:Binding AddNewTurbinePopUpCommand}"
            Style="{x:StaticResource OpenPopUpButtonStyle}" />
    </Grid>
</ContentPage>

the back part of the card it will be my new turbine page

 <Shell.TitleView>
     <Grid>
         <Label Style="{x:StaticResource CameraLabelStyle}">
             <Label.GestureRecognizers>
                 <TapGestureRecognizer Command="{x:Binding TakePhotoCommand}" />
             </Label.GestureRecognizers>
         </Label>
     </Grid>
 </Shell.TitleView>

 <Grid
     x:Name="TurbineDataGrid"
     Padding="10"
     ColumnDefinitions="*,*"
     ColumnSpacing="10"
     RowDefinitions="Auto, Auto, Auto, Auto, Auto, Auto, 3*, *"
     RowSpacing="10">

     <!--  Left Column  -->

     <!--  Installation Date Entry  -->
     <Border
         Grid.Row="0"
         Style="{x:StaticResource CommonBorderStyle}">
         <Grid ColumnDefinitions="*,Auto">
             <Button
                 Grid.Column="1"
                 Command="{x:Binding OpenDatePickerCommand}"
                 CommandParameter="{x:Binding Source={x:Reference picker}}"
                 FontFamily="ma"
                 Text="{x:Static constans:MaterialFonts.Calendar_month}" />
             <Entry
                 IsReadOnly="True"
                 Placeholder="{x:Static rex:AppResource.TurbineInstalationDateTime}"
                 Text="{x:Binding Turbine.StringifyInstalationDate}" />
         </Grid>
     </Border>

     <!--  Turbine Name Entry  -->
     <Border
         Grid.Row="1"
         Style="{x:StaticResource CommonBorderStyle}">
         <Entry
             x:Name="TurbineNameEntry"
             Keyboard="Text"
             Placeholder="{x:Static rex:AppResource.TurbineName}"
             Text="{Binding Turbine.Name}" />
     </Border>

     <!--  Turbine Address Entry  -->
     <Border
         Grid.Row="2"
         Grid.Column="0"
         Style="{x:StaticResource CommonBorderStyle}">
         <Grid ColumnDefinitions="*,Auto">
             <Entry
                 Keyboard="Text"
                 Placeholder="{x:Static rex:AppResource.TurbineAddress}"
                 Text="{x:Binding Turbine.Address}"
                 VerticalTextAlignment="Center" />
             <Button
                 Grid.Column="1"
                 Command="{x:Binding GetCurrentLocationCommand}"
                 FontFamily="ma"
                 Text="{x:Static constans:MaterialFonts.My_location}" />
         </Grid>
     </Border>

     <!--  Right Column  -->

     <!--  Turbine Power  -->
     <Border
         Grid.Row="0"
         Grid.Column="1"
         Style="{x:StaticResource CommonBorderStyle}">
         <Entry
             FontAttributes="Bold"
             Keyboard="Numeric"
             Placeholder="{x:Static rex:AppResource.TubinePower}"
             Text="{Binding Turbine.Power}"
             VerticalOptions="Center" />
     </Border>

     <!--  Capacity Factor  -->
     <Border
         Grid.Row="1"
         Grid.Column="1"
         Style="{x:StaticResource CommonBorderStyle}">
         <Entry
             FontAttributes="Bold"
             Keyboard="Numeric"
             Placeholder="{x:Static rex:AppResource.TurbineCapacity}"
             Text="{Binding Turbine.CapacityFator}"
             VerticalOptions="Center" />
     </Border>

     <!--  CO2 Emission Offset  -->
     <Border
         Grid.Row="2"
         Grid.Column="1"
         Style="{x:StaticResource CommonBorderStyle}">
         <Entry
             FontAttributes="Bold"
             Keyboard="Numeric"
             Placeholder="{x:Static rex:AppResource.TurbineEmission}"
             Text="{Binding Turbine.Co2EmissionOffset}"
             VerticalOptions="Center" />
     </Border>

     <!--  Hidden Date Picker  -->
     <picker:SfDateTimePicker
         x:Name="picker"
         Grid.Row="3"
         Grid.ColumnSpan="2"
         Style="{x:DynamicResource DateTimePickerStyle}">
         <picker:SfDateTimePicker.Behaviors>
             <mct:EventToCommandBehavior
                 Command="{Binding CancelDateCommand}"
                 CommandParameter="{Binding Source={x:Reference picker}}"
                 EventName="CancelButtonClicked" />
             <mct:EventToCommandBehavior
                 Command="{Binding ConfirmDateCommand}"
                 CommandParameter="{Binding Source={x:Reference picker}}"
                 EventName="OkButtonClicked" />
         </picker:SfDateTimePicker.Behaviors>
     </picker:SfDateTimePicker>

     <!--  Turbine Images Button  -->
     <Button
         Grid.Row="4"
         Grid.ColumnSpan="2"
         Command="{Binding PickImagesCommand}"
         CommandParameter="{x:Binding Source={x:Reference TurbineDataGrid}}"
         ContentLayout="Left, 5"
         Text="{x:Static rex:AppResource.TurbineImages}">
         <Button.ImageSource>
             <FontImageSource
                 FontFamily="ma"
                 Glyph="{x:Static constans:MaterialFonts.Upload_file}"
                 Color="Black" />
         </Button.ImageSource>
     </Button>

     <!--  Image CollectionView  -->
     <CollectionView
         Grid.Row="6"
         Grid.ColumnSpan="2"
         HorizontalScrollBarVisibility="Never"
         ItemsSource="{Binding Turbine.Images}">
         <CollectionView.ItemsLayout>
             <GridItemsLayout
                 HorizontalItemSpacing="10"
                 Orientation="Horizontal" />
         </CollectionView.ItemsLayout>
         <CollectionView.ItemTemplate>
             <DataTemplate x:DataType="model:FileData">
                 <VerticalStackLayout VerticalOptions="Center">
                     <Image
                         HeightRequest="80"
                         Source="{x:Binding FullPath}"
                         VerticalOptions="Start"
                         WidthRequest="80" />

                     <Label Text="{x:Binding FileName}" />
                 </VerticalStackLayout>
             </DataTemplate>
         </CollectionView.ItemTemplate>
     </CollectionView>

     <!--  Save Button  -->
     <Button
         Grid.Row="7"
         Grid.ColumnSpan="2"
         BackgroundColor="{x:StaticResource Primary}"
         Command="{x:Binding SaveAndCloseCommand}"
         IsEnabled="{x:Binding Turbine.IsValid}"
         Text="{x:Static rex:AppResource.NewTurbine}"
         VerticalOptions="EndAndExpand" />
 </Grid>

Answer 1

Hello,

You could not set two pages to one. For the flipping animation, you could try Basic animation(RotateYTo). See Basic animation - .NET MAUI | Microsoft Learn

await this.Content.RotateYTo(-180, 1000);// on your CollectionPage
await this.Content.FadeTo(0, 500);
 
await Task.Delay(50).ContinueWith((e) =>
{
     MainThread.BeginInvokeOnMainThread(() =>
     {
         var contentpage = new newTurbinePage();
         this.Content = contentpage.Content;
     });
});

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.