xamarin - हैमबर्गर मेनू ज़मारिन फॉर्म्स(मास्टरडेटेलपेज)




xamarin.forms xamarin.android (2)

मैं Xamarin का उपयोग करने के लिए काफी नया हूं, अपने Xamarin Forms प्रोजेक्ट में मैंने एक मास्टर-डिटेल पेज बनाया है और लिस्ट व्यू में मैं उस मेनू का प्रतिनिधित्व करता हूं जिसे मैं शीर्षक और आइकन डालना चाहता था, आइकन छवियों के लिए मुझे सभी डिवाइस प्रोजेक्ट्स में प्रत्येक आइकन सम्मिलित करना होगा ?

और मुझे एक छोटी सी समस्या भी है, जब मैं एक मेनू आइटम पर क्लिक करता हूं और चयनित विवरण पृष्ठ पर नेविगेट करता हूं, हैमबर्गर मेनू गायब हो जाता है

MainPageMaster.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XXX"
             Title="Master">
  <StackLayout>
    <ListView x:Name="MenuItemsListView"
              SeparatorVisibility="None"
              HasUnevenRows="true"
              ItemsSource="{Binding MenuItems}">
      <ListView.Header>
        <Grid BackgroundColor="#03A9F4">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="6"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="6"/>
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="15"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="10"/>
          </Grid.RowDefinitions>
          <Label
              Grid.Column="1"
              Grid.Row="1"
              Text="B1 Term"
              HorizontalTextAlignment="Center"
              Style="{DynamicResource SubtitleStyle}"/>
        </Grid>
      </ListView.Header>
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
              <StackLayout VerticalOptions="FillAndExpand"
                             Orientation="Horizontal"
                             Padding="20,10,0,10"
                             Spacing="20">
                            <Image Source="{Binding Icon}"
                         WidthRequest="40"
                         HeightRequest="40"
                         VerticalOptions="Center" />
                            <Label Text="{Binding Title}"
                         FontSize="Medium"
                         VerticalOptions="Center"
                         TextColor="Black"/>
            </StackLayout>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </StackLayout>
</ContentPage>

फ़ाइल .cs

[XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MainPageMaster : ContentPage
    {
        public ListView ListView;

        public MainPageMaster()
        {
            InitializeComponent();

            BindingContext = new MainPageMasterViewModel();
            ListView = MenuItemsListView;
        }

        class MainPageMasterViewModel : INotifyPropertyChanged
        {
            public ObservableCollection<MainPageMenuItem> MenuItems { get; set; }

            public MainPageMasterViewModel()
            {
                MenuItems = new ObservableCollection<MainPageMenuItem>(new[]
                {
                    new MainPageMenuItem { Id = 0, Icon="ic_menu_home.png",Title = "Home", TargetType = typeof(MainPageDetail) },
                    new MainPageMenuItem { Id = 1, Title = "Elenco Clienti", TargetType = typeof(ElencoClientiPage) },
                    new MainPageMenuItem { Id = 2, Title = "Logout", TargetType = typeof(LogOut) }
                });
            }

            #region INotifyPropertyChanged Implementation
            public event PropertyChangedEventHandler PropertyChanged;
            void OnPropertyChanged([CallerMemberName] string propertyName = "")
            {
                if (PropertyChanged == null)
                    return;

                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }
            #endregion
        }
    }

स्क्रीन

इस छवि में, मेरा आइकन दिखाई नहीं दे रहा है, लेकिन मैं Android प्रोजेक्ट में एक छवि जोड़ता हूं



  • मास्टर-विस्तार पृष्ठ बनाना:

एक सामग्री पृष्ठ जोड़ें और कोड को इस प्रकार बदलें:

RootPage.xaml

<?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: your_NameSpace"
              x:Class="your_NameSpace.RootPage">
</MasterDetailPage>

RootPage.xaml.cs

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class RootPage : MasterDetailPage
{
    public RootPage()
    {                        
        InitializeComponent();
    }
}
  • इसका मेनू पेज बनाना:

एक अन्य सामग्री पृष्ठ जोड़ें और कोड को निम्नानुसार बदलें:

MenuPage.xaml (वास्तविक हैमबर्गर मेनू का डिज़ाइन)

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage BackgroundColor="White"
         xmlns="http://xamarin.com/schemas/2014/forms" 
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
         x:Class="your_NameSpace.MenuPage">
<ContentPage.Padding >
    <OnPlatform x:TypeArguments="Thickness" iOS=" 0 , 20 , 0 , 0" />
</ContentPage.Padding>  
<ContentPage.Content>
    <StackLayout BackgroundColor="White" Padding ="10 , 30 , 10, 10">
        <Button Text="Login" BackgroundColor="White" TextColor="DarkGray" HorizontalOptions="StartAndExpand" Command="{Binding GoHomeCommand}" />
        <BoxView HeightRequest="0.5" HorizontalOptions="FillAndExpand" BackgroundColor="Gray"/>            
        <Button Text="Search" BackgroundColor="White" TextColor="DarkGray" HorizontalOptions="StartAndExpand" Command="{Binding GoSecondCommand}" />
        <BoxView HeightRequest="0.5" HorizontalOptions="FillAndExpand" BackgroundColor="Gray"/>
        <Button Text="Browse" TextColor="DarkGray" BackgroundColor="White" HorizontalOptions="StartAndExpand" Command="{Binding GoThirdCommand}"/>
        <BoxView HeightRequest="0.5" HorizontalOptions="FillAndExpand" BackgroundColor="Gray"/>
    </StackLayout>
</ContentPage.Content>

MenuPage.xaml.cs

 [XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MenuPage : ContentPage
{
    public MenuPage()
    {
        BindingContext = new MenuPageViewModel();
        this.Icon = "yourHamburgerIcon.png"; //only neeeded for ios
        InitializeComponent();
    }
}
  • इसका मॉडल वर्ग:

यह वह जगह है जहाँ मेनू पेज के बटन क्लिक कमांड बंधे होते हैं

MenuPageViewModel.cs

 public class MenuPageViewModel
{
    public ICommand GoHomeCommand { get; set; }
    public ICommand GoSecondCommand { get; set; }
    public ICommand GoThirdCommand { get; set; }
    public MenuPageViewModel()
    {
        GoHomeCommand = new Command(GoHome);
        GoSecondCommand = new Command(GoSecond);
        GoThirdCommand = new Command(GoThird);
    }

    void GoHome(object obj)
    {
        App.NavigationPage.Navigation.PopToRootAsync();
        App.MenuIsPresented = false;
    }

    void GoSecond(object obj)
    {
        App.NavigationPage.Navigation.PushAsync(new Home()); //the content page you wanna load on this click event 
        App.MenuIsPresented = false;
    }

    void GoThird(object obj)
    {
        App.NavigationPage.Navigation.PushAsync(new ClinicInformation());
        App.MenuIsPresented = false;
    }
}
  • अपनी एप्लिकेशन क्लास में निम्नलिखित गुण जोड़ें आमतौर पर, आपके एप्लिकेशन वर्ग का नाम App.xaml और App.xaml.cs है

अपने App.xaml.cs पर निम्न जोड़ें:

    public static NavigationPage NavigationPage { get; private set; }
    public static RootPage RootPage;
    public static bool MenuIsPresented
    {
        get
        {
            return RootPage.IsPresented;
        }
        set
        {
            RootPage.IsPresented = value;
        }
    }

यहां रूटपेज आपके मास्टर-डिटेल पेज का एक स्थिर उदाहरण है, नेविगेशनपेज आपका डिटेल पेज है जिसे आप अपने डिटेल पेज को बदलने के लिए बदलते हैं, IsMenuPresentend बूल की तुलना में सही है जब मेन्यूपेज को खुला रखता है और जब झूठ उसी को बंद कर देता है।

  • यह सब करने के बाद अपनी एप्लिकेशन क्लास में इस फ़ंक्शन को जोड़ें और इसे अपने App.Xaml.cs के निर्माता में कॉल करें

     private void CallMain()
     {
        var menuPage = new MenuPage();
        NavigationPage = new NavigationPage(new Home());
        RootPage = new RootPage();
        RootPage.Master = menuPage;
        RootPage.Detail = NavigationPage;
        MainPage = RootPage;
     }
    
  • अपने Android प्रोजेक्ट में निम्न विषय जोड़ें:

मान / styles.xml

<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="MyTheme" parent="MyTheme.Base">
</style>

<style name="DrawerArrowStyle" 
parent="@style/Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
 <item name="color">#FFFFFF</item>
</style>

<style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#003399</item>
<item name="colorPrimaryDark">#003399</item>
<item name="colorControlHighlight">#003399</item>
<item name="colorAccent">#012348</item>
<item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

</resources>
  • मान-v21 नामक एक फ़ोल्डर बनाएँ और XML नाम की एक स्टाइल्स जोड़ें। xml और इसमें निम्न कोड जोड़ें:

     <?xml version="1.0" encoding="utf-8" ?>
     <resources>
     <style name="MyTheme" parent="MyTheme.Base">
     <item name="android:windowContentTransitions">true</item>
     <item name="android:windowAllowEnterTransitionOverlap">true</item>
     <item name="android:textAllCaps">false</item>
     <item name="android:windowAllowReturnTransitionOverlap">true</item>
     <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
     <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
     </style>
     </resources>
    

और अपने सभी एंड्रॉइड गतिविधियों में ऐप थीम के रूप में myTheme नाम का उपयोग करें।

वहाँ आप अपने हैमबर्गर मेनू पूरा हो जाता है मामले में आप किसी भी सवाल है टिप्पणी करने के लिए स्वतंत्र महसूस हो रहा है।

सौभाग्य!

हैप्पी कोडिंग।