Simply Create a Film Ticket Reserving App Utilizing .NET MAUI Popup Management

In at present’s digital world, comfort is essential. Simply as we use apps to pay payments, we additionally favor to e book film tickets on-line. A thoughtfully designed film ticket reserving app can drastically enhance the person expertise by streamlining the method of choosing films, selecting seats, and making funds. This eliminates the effort of ready in line on the ticket counter and makes movie-going easy.

Syncfusion .NET MAUI Popup management is used to show alert messages with personalized buttons or a desired view inside a pop-up. Customers can fully customise the pop-up’s look and performance, together with its header, physique, and footer.

On this weblog, we’ll create a film ticket reserving app utilizing the .NET MAUI Popup management.

Let’s get began!

Word: Earlier than continuing, create a .NET MAUI app and add the Popup management in it utilizing the getting began documentation.

Step 1: Present a modal popup on the startup web page

Let’s design a modal popup to show the message you can e book the tickets. A modal popup is a window that hundreds beneath the mum or dad window surrounded by an overlay that forestalls clicking anyplace else on the display screen other than the management of the modal. This may be achieved utilizing the StaysOpen property. If you set this property, the popup won’t shut while you contact round it. It will likely be closed solely while you faucet the shut icon on the popup.

Confer with the next code instance.

<popup:SfPopup x:Key="BookingNotification"
               x:Title="bookingNotification"
               ShowFooter="False"
               HeaderTitle="E-book Tickets !"
               ShowCloseButton="True"
               HeightRequest="130"
               Message="Click on on the e book button to start out reserving tickets">
</popup:SfPopup>

Confer with the next picture.

Step 2: Deciding on a film to e book a ticket

Within the MoviePage.xaml file, we have to checklist the out there films screened within the theatres. To design this UI, use the Syncfusion .NET MAUI ListView management and customise the template to indicate the film’s picture and names with a E-book button. It will allow customers to simply choose the film of their selection.

Confer with the next code instance.

<syncfusion:SfListView x:Title="listView" ItemsSource="{Binding TheaterInformation}" SelectionMode="None" ItemSize="110">
 <syncfusion:SfListView.ItemTemplate>
   <DataTemplate>
     .....
     .....
     <Button x:Title="bookbutton" Command="{Binding BookingCommand, Supply={x:Reference viewModel}}" CommandParameter="{x:Reference listView}" Textual content="E-book" Opacity="100" CornerRadius="20" VerticalOptions="CenterAndExpand" HorizontalOptions="EndAndExpand" HeightRequest="40" FontSize="14" WidthRequest="70" BackgroundColor="#6750A4" TextColor="White" Margin="10,0,12,10"/>
   </DataTemplate>
 </syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>

Step 3: Selecting time for a film

On clicking the E-book button on a film, you’ll be directed to the main points web page of the chosen film. It’s going to show the showtimes, dates, and theater specifics particulars.

Confer with the next code instance. Right here, we’ll use the .NET MAUI ListView to show the film particulars with a personalized ItemTemplate.

<syncfusion:SfListView x:Title="secondlistView"
                       ItemsSource="{Binding TheaterInformation}"                                       
                       BackgroundColor="White"
                       HeaderSize="72"
                       ItemSize="120">
 <syncfusion:SfListView.HeaderTemplate>
  <DataTemplate>
   <native:CustomHeaderTemplate></native:CustomHeaderTemplate>
  </DataTemplate>
 </syncfusion:SfListView.HeaderTemplate>
</syncfusion:SfListView>

Confer with the next picture.

Step 4: Designing the phrases and situations popup

By choosing a time, you’ll be directed to a popup window displaying the phrases and situations for reserving tickets.

Confer with the next code instance. Right here, the popup is outlined as a modal popup. On this app, you might have the choice to both Settle for or Decline the phrases and situations. It’s necessary to pay shut consideration to the knowledge offered within the popup earlier than making your selection.

The data you see throughout the content material template is offered as textual content content material, which you’ll tailor to suit your design wants. The choice to shut the popup window has been disabled by setting the ShowCloseButton property to false. Nevertheless, you possibly can shut the popup simply utilizing the built-in Decline button.

<popup:SfPopup x:Key="termsAndConditionsDialog"
               x:Title="termsAndConditionPopup"
               StaysOpen="True"
               ShowCloseButton="False"
               ShowFooter="True"           
               HeaderTitle="Phrases and Circumstances"
               AppearanceMode="TwoButton"
               AcceptCommand="{Binding AcceptCommand}" >
 <popup:SfPopup.ContentTemplate>
  <DataTemplate>
   <Grid 
    Padding="24">
    ……….
    <Label Grid.Column="0" Grid.Row="0" Textual content="1."/>
    <Label Grid.Column="0" Grid.Row="1" Textual content="2."/>
    <Label Grid.Column="0" Grid.Row="2" Textual content="3."/>
    <Label Grid.Column="0" Grid.Row="3" Textual content="4."/>
    <Label Grid.Column="1" Grid.Row="0" Textual content="Kids under the age of 18 can't be admitted for films licensed A."/>
    <Label Grid.Column="1" Grid.Row="1" Textual content="Please carry proof of age for films licensed A." />
    <Label Grid.Column="1" Grid.Row="2" Textual content="Consuming and alcohol is strictly prohibited contained in the premises."/>
    <Label Grid.Column="1" LineBreakMode="WordWrap" Grid.Row="3" Textual content="Please buy tickets for youngsters above the age of three."/>
   </Grid>
  </DataTemplate>
 </popup:SfPopup.ContentTemplate>
</popup:SfPopup>

You’ll get the next popup on choosing a time for a film.

If you settle for the phrases and situations, you’ll proceed by means of the seat choice course of. If you decline, you’ll be navigated to the earlier web page containing the theatre checklist with time.

Step 5: Deciding on seats in your consolation

Let’s implement the code to pick the out there seats in one other popup window.

Confer with the next code instance. Right here, the popup incorporates seats and price particulars up to date within the ContentTemplate. We’ll additionally design the Proceed button within the FooterTemplate to course of the reserving instructions.

<popup:SfPopup x:Key="BookingDialog"
               x:Title="ticketBookingPopup"
               ShowCloseButton="False"
               AnimationMode="None"
               HeaderTitle="Choose your seats"
               AutoSizeMode="Top"
               ShowFooter="True">
 <popup:SfPopup.ContentTemplate>
  <DataTemplate>
   <StackLayout x:Title="seatSelectionPage" Orientation="Vertical">
    
    <StackLayout x:Title="numberOfSeatsLayout" Orientation="Horizontal">
     <Label x:Title="seat1" Textual content="1"></Label>
     <Label x:Title="seat2" Textual content="2"></Label>
     <Label x:Title="seat3" Textual content="3"></Label>
     <Label x:Title="seat4" Textual content="4"></Label>
     <Label x:Title="seat5" Textual content="5"></Label>
     <Label x:Title="seat6" Textual content="6"></Label>
    </StackLayout>
    
    <Label Textual content="Choose your seat class"/>
    
    <StackLayout x:Title="seatClassLayout">
     <StackLayout Orientation="Horizontal" Margin="0,10,0,10">
      <Label Textual content="Silver"/>
      <Label Textual content="$19.69"/>
      <Label Textual content="Out there"/>
     </StackLayout>
     
     <StackLayout Orientation="Horizontal" Margin="0,10,0,10">
      <Label Textual content="Premier"/>
      <Label Textual content="$23.65"/>
      <Label Textual content="Unavailable"/>
     </StackLayout>
    
    </StackLayout>
   </StackLayout>
  </DataTemplate>
 </popup:SfPopup.ContentTemplate>
 
<popup:SfPopup.FooterTemplate>
  <DataTemplate>
   <Button Textual content="Proceed" FontSize="14" Command="{Binding ProceedCommand, Supply={x:Reference viewModel}}" CommandParameter="{StaticResource confirmationDialog}"/>
  </DataTemplate>
 </popup:SfPopup.FooterTemplate>
</popup:SfPopup>

Confer with the next picture.

Upon selecting the seats, you possibly can proceed to e book the tickets.

Step 6: Designing a popup for reserving affirmation

Right here, we’ll design a popup window to show the success message for the ticket reserving affirmation. Confer with the next code instance.

<popup:SfPopup x:Key="confirmationDialog"
               x:Title="confirmationDialog"
               AcceptButtonText="OK"                                     
               HeaderTitle="Thank You !">
 <popup:SfPopup.ContentTemplate>
  <DataTemplate>
   <StackLayout Padding="25,5,0,5"
                BackgroundColor="Clear">
    <Label Textual content="Tickets booked efficiently"/>
   </StackLayout>
  </DataTemplate>
 </popup:SfPopup.ContentTemplate>
</popup:SfPopup>

Confer with the next picture.

GitHub reference

For extra particulars, discuss with making a film ticket reserving app utilizing the .NET MAUI Popup management GitHub demo.

Supercharge your cross-platform apps with Syncfusion’s strong .NET MAUI controls.

Strive It Free

Conclusion

Thanks for studying! This weblog exhibits making a film ticket reserving app utilizing Syncfusion .NET MAUI Popup management. Check out the steps on this weblog and go away your suggestions within the feedback part under!

The prevailing prospects can obtain the newest model of Important Studio from the License and Downloads web page. In case you are new, attempt our 30-day free trial to discover our unbelievable options. 

It’s also possible to contact us by means of our help boards, help portal, or suggestions portal. We’re at all times comfortable to help you!

Associated blogs