I'm using a master-detail page and tabbed page on one screen. I need to display an alert when I navigate to the master-detail page. That an alert should display the complete page of the master-detail and tabbed page. I don't wanna operate any function until I click on the OK button of an alert.
**Master-Detail Page CS Code: **
public partial class MainMasterDetailPage : MasterDetailPage { public MainMasterDetailPage() { InitializeComponent(); NavigationPage.SetHasNavigationBar(this, false); navigationDrawerList.ItemsSource = GetMasterPageLists(); this.IsPresented = false; Detail = new NavigationPage(new DashboardTabbedPage()); } private void OnMenuSelected(object sender, SelectedItemChangedEventArgs e) { var item = (MasterPageList)e.SelectedItem; if (item.Title == "Settings") { // Detail.Navigation.PushAsync(new SettingPage()); // IsPresented = false; } else { string dbPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.Personal), "vssSQLite.db3"); SQLiteConnection db = new SQLiteConnection(dbPath); db.DropTable<LoginSqlLiteM>(); Application.Current.MainPage.Navigation.PushAsync(new MainPage()); } } List<MasterPageList> GetMasterPageLists() { return new List<MasterPageList> { new MasterPageList() { Title = "Settings", Icon = "settings.png" }, new MasterPageList() { Title = "Logout", Icon = "logout.png" }, }; } } }
Master-Detail page XAML code:
<?xml version="1.0" encoding="utf-8" ?> <MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:VSS.MasterPages" xmlns:local1="clr-namespace:VSS.Pages" IsPresented="False" x:Class="VSS.MasterPages.MainMasterDetailPage"> <MasterDetailPage.Master> <ContentPage Title="☰"> <StackLayout BackgroundColor="#ffffff"> <StackLayout Margin="25,10,25,0" Padding="0,15,0,15"> <Image Source="VSSIcon.png" HorizontalOptions="Center" HeightRequest="80" WidthRequest="80"></Image> <Label Text="Sched.ly" TextColor="#1CA9FF" FontSize="Large" HorizontalOptions="CenterAndExpand"></Label> <Label Text="Always on Time " TextColor="#1CA9FF" FontSize="Large" FontAttributes="Italic" HorizontalOptions="CenterAndExpand"></Label> </StackLayout> <ListView x:Name="navigationDrawerList" RowHeight="60" SeparatorVisibility="None" ItemSelected="OnMenuSelected" BackgroundColor="#2196F3"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout VerticalOptions="FillAndExpand" Orientation="Horizontal" Padding="20,10,0,10" Spacing="20"> <Image Source="{Binding Icon}" WidthRequest="30" HeightRequest="30" VerticalOptions="Center" /> <Label Text="{Binding Title}" FontSize="Medium" VerticalOptions="Center" TextColor="White"/> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </StackLayout> </ContentPage> </MasterDetailPage.Master> <MasterDetailPage.Detail> <NavigationPage> <x:Arguments> <local:DashboardTabbedPage/> </x:Arguments> </NavigationPage> </MasterDetailPage.Detail> </MasterDetailPage>
Please find the master-detail and Tabbed page image:
Currently, I'm displaying the alert only inside of the tabbed page...but I want to display the alert for total master-detail page means doesn't wanna allow any action before click on the OK button of alert.
For this, I want to use Absolute layout and display the alert for overall Absolute layout. How can I use this code in the master-detail page?
Alert code for Absolute Layout:
<AbsoluteLayout x:Name="vendorDashboardLayout" HorizontalOptions="CenterAndExpand"> <ContentView x:Name="overlay" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="#C0808080"> <StackLayout HorizontalOptions="Center" VerticalOptions="Center"> <StackLayout x:Name="Alert" BackgroundColor="#D2D7DD" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand" HeightRequest="220" WidthRequest="350" > <StackLayout HorizontalOptions="Fill" > <Frame BackgroundColor="#375587" HeightRequest="20" BorderColor="#015198"> <Label Text="Alert!" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" FontSize="14.5" TextColor="White"> </Label> </Frame> </StackLayout> <StackLayout Margin="10,30,10,20"> <Label x:Name="alertMessage" WidthRequest="330" HeightRequest="100" TextColor="Black" /> </StackLayout> <StackLayout HorizontalOptions="EndAndExpand" Orientation="Horizontal" Margin="10,20,20,20" > <Button Text="OK" BorderRadius="6" BackgroundColor="#375587" TextColor="White" HorizontalOptions="EndAndExpand" Clicked="confirm_Btn" > <Button.WidthRequest> <OnPlatform x:TypeArguments="x:Double"> <On Platform="Android" Value="80" /> <!--<On Platform="iOS" Value="60" />--> </OnPlatform> </Button.WidthRequest> <Button.FontSize> <OnPlatform x:TypeArguments="x:Double"> <On Platform="Android" Value="13" /> <!--<On Platform="iOS" Value="13" />--> </OnPlatform> </Button.FontSize> <Button.HeightRequest> <OnPlatform x:TypeArguments="x:Double"> <On Platform="Android" Value="40" /> <!--<On Platform="iOS" Value="30" />--> </OnPlatform> </Button.HeightRequest> </Button> </StackLayout> </StackLayout> </StackLayout> </ContentView> </AbsoluteLayout>