विंडोज फोन 8: हम एप्लिकेशन बनाते हैं। मैट्रिक्स। भाग 3. एमवीवीएम

और इसलिए, जैसा कि वादा किया गया था, MVVM पैटर्न का उपयोग करके WP8 प्लेटफॉर्म के लिए मैट्रिक्स एप्लिकेशन का तीसरा भाग। सबसे अधीर के लिए, आप तुरंत जीथब से डाउनलोड कर सकते हैं, साथ ही विंडोज फोन स्टोर से डाउनलोड करके अपने स्मार्टफोन पर इसे आजमा सकते हैं।

समर्थित स्क्रीन एक्सटेंशन HD720P (720x1280), WVGA (480x800), WXGA (768x1280)। एक छोटा सा माइनस है: 480x800 के अलावा एक एक्सटेंशन का उपयोग करते समय, आपको इंस्टॉलेशन के बाद एप्लिकेशन को पुनरारंभ करना होगा, क्योंकि मुझे यह नहीं मिला कि व्यू मॉडल लोड करने से पहले ग्रिड तत्व की ऊंचाई और चौड़ाई कैसे प्राप्त करें। और अब क्रम में।

विंडोज फोन 8: हम एप्लिकेशन बनाते हैं। मैट्रिक्स। भाग 1
विंडोज फोन 8: हम एप्लिकेशन बनाते हैं। मैट्रिक्स। भाग २
विंडोज फोन 8: हम एप्लिकेशन बनाते हैं। मैट्रिक्स। भाग 3. एमवीवीएम


WVGA स्क्रीन (480x800) पर पूरे आवेदन का विस्तारित दृश्य



WVGA स्क्रीन पर एप्लिकेशन की कार्यक्षमता का अवलोकन (480x800)

MVVM के बारे में


हम एमवीवीएम टेम्पलेट के साथ मानक पैनोरमा का उपयोग करते हैं। लेकिन हम सही करेंगे ताकि सब कुछ एक डीबी से बढ़े। ऐसा करने के लिए, एक फ़ोल्डर "मॉडल" और "डीबी" बनाएं। मॉडल में मॉडल की परिभाषाएं होंगी, और सुविधा के लिए डीबी में, इन मॉडलों के मूल्यों के साथ तुलना करने के लिए कक्षाएं, एक डेटाबेस बनाना, इसकी पूर्णता की जांच करना, और निश्चित रूप से डेटाटॉनटेक्स्ट विरासत में मिली कक्षा। हालाँकि, क्लास में DataContext इनहेरिट करता है, SeDataContext एक मॉडल - Model_Matrixes को कनेक्ट नहीं करता है, क्योंकि हम डेटाबेस में इसके मूल्यों को नहीं बचाएंगे। केवल मैट्रिक्स की एक ग्रिड बनाने और उसमें गिरने वाले आउटपुट को बनाने के लिए इसकी आवश्यकता है।

प्रोजेक्ट ट्री




डैडी मॉडल



मॉडल के बारे में संक्षेप में: हम "कोड पहले" दृष्टिकोण के रूप में तालिकाओं का वर्णन करते हैं। प्रत्येक मॉडल डेटाबेस में एक तालिका है। मॉडल की प्रत्येक संपत्ति एक कॉलम है।
"सेट" संपत्ति में: NotifyPropertyChanging और NotifyPropertyChanged - मॉडल में परिवर्तनों की शुरुआत से पहले और परिवर्तनों के बाद क्रमशः होने वाली घटनाएं। आप MSDN पर अधिक पढ़ सकते हैं: INotifyPropertyChanged और INotifyPropertyChanging

डैडी "DB"




अतिरिक्त पुस्तकालय


चूंकि कोई मानक रंग विकल्प नहीं है, इसलिए मुझे ColorPicker तत्व के लिए Coding4fun लाइब्रेरी का उपयोग करना पड़ा। भाषाओं की सूची के लिए मैंने विंडोज फोन टूलकिट लाइब्रेरी का उपयोग किया, जिसमें लिस्टपिकर तत्व शामिल है। दोनों NuGet के माध्यम से स्थापित करना आसान है।

MainPage.xaml


अब आवेदन और बंधन के रूप पर विचार करें।
MainPage.xaml
 <phone:PhoneApplicationPage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:Controls="clr-namespace:Coding4Fun.Toolkit.Controls;assembly=Coding4Fun.Toolkit.Controls" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" x:Class="SE_Matrix_2d_v_14.MainPage" mc:Ignorable="d" SupportedOrientations="Portrait" Orientation="Portrait" shell:SystemTray.IsVisible="False"> <!-- Resources d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}" --> <phone:PhoneApplicationPage.Resources> <!-- SettingsSymbols --> <DataTemplate x:Key="Resources_SettingsSymbols"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="30"/> <RowDefinition Height="70"/> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Text="{Binding NameForTranslate}" /> <TextBox x:Name="TextBox_Param_Value" Tag="{Binding ID}" InputScope="Number" Grid.Row="1" Width="300" HorizontalAlignment="Left" Text="{Binding Param_Value, Mode=TwoWay}" TextChanged="Event_TextBox_TextChanged_SettingSymbols" LostFocus="Event_TextBox_LostFocus_SettingsSymbols" /> </Grid> </DataTemplate> <!-- SettingsColor --> <DataTemplate x:Key="SettingsColor"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="25"/> <RowDefinition Height="100"/> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Text="{Binding NameForTranslate}" /> <Rectangle Grid.Row="1" Fill="{Binding Value, Mode=TwoWay}" Tag="{Binding ID}" HorizontalAlignment="Left" Height="75" Margin="0,10,0,0" Stroke="Transparent" VerticalAlignment="Top" Width="420" Tap="Event_Rectangle_Tap_ChangeColor"/> </Grid> </DataTemplate> <!-- Matrix --> <DataTemplate x:Key="Matrix"> <TextBlock x:Uid="{Binding Matrix_Name}" Text="{Binding Matrix_Text, Mode=TwoWay}" FontSize="{Binding Matrix_FontSize}" Foreground="{Binding Matrix_Foreground}" /> </DataTemplate> <!-- ListPicker --> <DataTemplate x:Key="ListPickerItemTemplate"> <TextBlock Text="{Binding NameForTranslate}" /> </DataTemplate> <DataTemplate x:Key="ListPickerFullItemTemplate"> <TextBlock Text="{Binding NameForTranslate}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" /> </DataTemplate> </phone:PhoneApplicationPage.Resources> <phone:PhoneApplicationPage.FontFamily> <StaticResource ResourceKey="PhoneFontFamilyNormal"/> </phone:PhoneApplicationPage.FontFamily> <phone:PhoneApplicationPage.FontSize> <StaticResource ResourceKey="PhoneFontSizeNormal"/> </phone:PhoneApplicationPage.FontSize> <phone:PhoneApplicationPage.Foreground> <StaticResource ResourceKey="PhoneForegroundBrush"/> </phone:PhoneApplicationPage.Foreground> <!-- LayoutRoot   ,     --> <Grid x:Name="LayoutRoot" Background="Transparent"> <phone:Panorama> <phone:Panorama.Background> <ImageBrush ImageSource="/SE_Matrix_2d_v_14;component/Assets/PanoramaBackground.png"/> </phone:Panorama.Background> <!--  Panorama --> <phone:PanoramaItem Header="SE "> <phone:LongListSelector Margin="0,0,0,5" ItemsSource="{Binding ItemSourceMatrix}" x:Name="LongListSelector_Matrix" Loaded="Event_LongListSelector_OnLoaded_Matrix" ItemTemplate="{StaticResource Matrix}" GridCellSize="20, 20" LayoutMode="Grid" FontSize="10" Padding="10,0,-5,0" Tap="Event_LongListSelector_Tap_StartMatrix" Background="{Binding Path=ItemSourceMatrixBackground, Mode=TwoWay}" /> </phone:PanoramaItem> <!--  Panorama--> <phone:PanoramaItem Header=" "> <Grid> <Grid.RowDefinitions> <RowDefinition Height="30"/> <RowDefinition Height="60"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <phone:LongListSelector Margin="0,0,-22,0" Grid.Row="2" ItemsSource="{Binding ItemSourceSettingsSymbols}" x:Name="LongListSelector_SettingsSymbols" ItemTemplate="{StaticResource Resources_SettingsSymbols}" /> <toolkit:ListPicker x:Name="sightingTypesPicker" ExpansionMode="FullScreenOnly" FullModeHeader="  " ItemsSource="{Binding ItemSourceLanguage}" FullModeItemTemplate="{StaticResource ListPickerFullItemTemplate}" ItemTemplate="{StaticResource ListPickerItemTemplate}" Grid.Row="1" HorizontalAlignment="Left" SelectedItem="{Binding Path=ItemSourceLanguageSelected, Mode=OneWay}" BorderThickness="0" Height="60" Margin="0" VerticalAlignment="Top" Width="300" SelectionChanged="Event_ListPicker_SelectionChanged" /> <TextBlock Grid.Row="0" Text="  " /> </Grid> </phone:PanoramaItem> <!--   --> <phone:PanoramaItem Header=" "> <Grid VerticalAlignment="Center" HorizontalAlignment="Center"> <Grid.RowDefinitions> <RowDefinition Height="60"/> <RowDefinition Height="60"/> <RowDefinition Height="60"/> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Text="SE  1.0" FontSize="{StaticResource PhoneFontSizeLarge}"></TextBlock> <TextBlock Grid.Row="1" Text="se8se@hotmail.com" FontSize="{StaticResource PhoneFontSizeLarge}"></TextBlock> <TextBlock Grid.Row="2" FontSize="{StaticResource PhoneFontSizeLarge}"> SE, 2013</TextBlock> </Grid> </phone:PanoramaItem> <!--  Panorama --> <phone:PanoramaItem Header=" "> <Grid> <Grid.RowDefinitions> <RowDefinition Height="400"/> <RowDefinition Height="20"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Controls:ColorPicker x:Name="ColorPicker" Grid.Row="0" Height="400" VerticalAlignment="Top"/> <phone:LongListSelector Margin="0,0,-22,0" Grid.Row="2" ItemsSource="{Binding ItemSourceSettingsColors}" x:Name="LongListSelector_SettingsColor" ItemTemplate="{StaticResource SettingsColor}" /> </Grid> </phone:PanoramaItem> </phone:Panorama> </Grid> </phone:PhoneApplicationPage> 


यह कोड पृष्ठ की शुरुआत में एक चित्र बनाता है। कोई ट्रिक नहीं है, मानक XAML, लेकिन यदि आपके कोई प्रश्न हैं, तो पूछें। मुझे मदद करने में खुशी होगी।

डैडी "ViewModels"


हमें अपने आवेदन का दिल मिल गया। जिसके लिए सब कुछ शुरू किया गया था। तो, केवल दो वर्ग हैं।



डैडी "हेल्पर्स"



MainPage.xaml.cs


कोई नई बात नहीं। मूल रूप से, केवल ध्यान केंद्रित करने या खोने की घटनाएं।
MainPage.xaml.cs
 using System; using System.Net; using System.Collections.Generic; using System.Linq; using System.Windows; using System.Windows.Controls; using System.Windows.Navigation; using Microsoft.Phone.Controls; using Microsoft.Phone.Shell; using SE_Matrix_2d_v_14.Models; using System.Windows.Shapes; using System.Diagnostics; using System.Reflection; using System.Windows.Media; namespace SE_Matrix_2d_v_14 { public partial class MainPage : PhoneApplicationPage { //  public MainPage() { InitializeComponent(); //       listbox   this.DataContext = App.ViewModel; } //     ViewModel protected override void OnNavigatedTo(NavigationEventArgs e) { if (!App.ViewModel.IsDataLoaded) { App.ViewModel.LoadData(); } App.ViewModel.SaveChangesToDB(); } private bool _updateSettings = false; public bool UpdateSettings { get { return _updateSettings; } set { _updateSettings = value; } } /// <summary> ///          0,     true,  ///             /// </summary> private void Event_TextBox_TextChanged_SettingSymbols(object sender, TextChangedEventArgs e) { TextBox paramToUpdate = sender as TextBox; if (paramToUpdate.Text.Length > 0) { UpdateSettings = true; } } /// <summary> ///  UpdateSettings == true,         ,   /// </summary> private void Event_TextBox_LostFocus_SettingsSymbols(object sender, RoutedEventArgs e) { TextBox paramToUpdate = sender as TextBox; if (UpdateSettings == true) { UpdateSettings = false; Model_SettingsSymbols updateInTable = new Model_SettingsSymbols { ID = Convert.ToInt32(paramToUpdate.Tag), Param_Value = Convert.ToInt32(paramToUpdate.Text) }; App.ViewModel.UpdateSettingsSymbolsByID(updateInTable); } } /// <summary> ///      ,    /// </summary> private void Event_LongListSelector_OnLoaded_Matrix(object sender, RoutedEventArgs e) { LongListSelector paramToUpdate = sender as LongListSelector; Model_SettingsSymbols updateHeightInTable = new Model_SettingsSymbols { Param_Name = "Param_WindowHeight", Param_Value = Convert.ToInt32(paramToUpdate.ActualHeight) }; App.ViewModel.UpdateSettingsSymbolsByName(updateHeightInTable); Model_SettingsSymbols updateWigthInTable = new Model_SettingsSymbols { Param_Name = "Param_WindowWidth", Param_Value = Convert.ToInt32(paramToUpdate.ActualWidth) }; App.ViewModel.UpdateSettingsSymbolsByName(updateWigthInTable); } /// <summary> ///    ,    -        . /// </summary> private async void Event_LongListSelector_Tap_StartMatrix(object sender, System.Windows.Input.GestureEventArgs e) { App.ViewModel.Start(); } /// <summary> ///         -         /// </summary> private void Event_Rectangle_Tap_ChangeColor(object sender, System.Windows.Input.GestureEventArgs e) { Rectangle paramToUpdate = sender as Rectangle; Model_Colors updateInTable = new Model_Colors { ID = Convert.ToInt32(paramToUpdate.Tag), Value = ColorPicker.Color.ToString() }; App.ViewModel.UpdateSettingsColorByID(updateInTable); } /// <summary> ///          /// </summary> private void Event_ListPicker_SelectionChanged(object sender, SelectionChangedEventArgs e) { Module_Languages selectedItem = ((sender as ListPicker).SelectedItem as Module_Languages); Module_Languages updateInTable = new Module_Languages { ID = selectedItem.ID }; App.ViewModel.UpdateSettingsColorByID(updateInTable); } } } 


निष्कर्ष


कोड की मात्रा में वृद्धि हुई है, लेकिन पठनीयता और व्यापकता बढ़ी है। इस मामले में MVVM अधिक सुविधाजनक है। हालाँकि, अनुप्रयोग प्रदर्शन (मैट्रिक्स में अधिकतम संख्या में साँप, जिस पर कोई ब्रेकिंग नहीं है) में थोड़ा कमी आई है।

निम्नलिखित लेखों में, हम कुछ मामूली बग्स को ठीक करेंगे, डबल-क्लिक करके फुल-स्क्रीन मैट्रिक्स वृद्धि जोड़ेंगे, और Xamarin: Android और IOS का उपयोग करके एप्लिकेशन को अन्य प्लेटफार्मों पर स्थानांतरित करना शुरू करेंगे।

पुनश्च


चूंकि आप माइनस हैं, तो कम से कम संकेत दें कि क्यों। यह दिलचस्प है!

Source: https://habr.com/ru/post/In201240/


All Articles