flipingm like a card

Eduardo Gomez Romero 825 Reputation points
2024-10-28T23:58:36.9066667+00:00

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>

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,581 questions
0 comments No comments
{count} votes

Accepted answer
  1. Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 32,306 Reputation points Microsoft Vendor
    2024-10-29T07:48:56.17+00:00

    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.

    0 comments No comments

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.