WPF DataGrid। टेम्पलेट के लिए लड़ो

सभी को नमस्कार!

मुझे उम्मीद है कि अपने लेख के माध्यम से मैं डेटाग्रिड के एक्सएमएल प्रतिनिधित्व को अपने कोड संग्रह के साथ जोड़ने के मुद्दे को स्पष्ट करूंगा। इसके लिए, एक विशिष्ट उदाहरण का उपयोग करना सबसे अच्छा है। इसलिए, हमें तालिका में कुछ संरचना के तत्वों की सूची रखने की आवश्यकता है। मान लें कि तत्व स्वयं कोड में इस प्रकार दिखते हैं:

class Element { public Element (string firstName, string lastName, string phoneNumber, DateTime date) { this.firstName = firstName; this.lastName = lastName; this.phoneNumber = phoneNumber; this.date = date; } public string FirstName { get { return this.firstName; } set { this.firstName = value; } } public string LastName { get { return this.lastName; } set { this.lastName = value; } } public string PhoneNumber { get { return this.phoneNumber; } set { this.phoneNumber = value; } } public DateTime Date { get { return this.date; } set { this.date = value; } } private string firstName; private string lastName; private string phoneNumber; private DateTime date; } 

तदनुसार, उनकी सूची इस तरह दिखाई देगी:

 List<Element> elements = new List<Element>(); 

अब DataGrid पर चलते हैं। चूंकि यह सभी समान WPF है, आप इसे अपने हाथों से फ़ॉर्म पर खींच सकते हैं। आइडीई इसके लिए कोड लिखें।

 <DataGrid x:Name="dataGrid" Margin="10,103,0,15" CellEditEnding="dataGrid_CellEditEnding" Grid.RowSpan="2" Grid.ColumnSpan="2" HorizontalAlignment="Left" Width="728" AutoGenerateColumns="False"/> 

यहां, मैं मैन्युअल रूप से केवल AutoGenerateColumns = "गलत" सेट करता हूं, क्योंकि भविष्य में हम टेबल कॉलम को स्वयं संपादित करेंगे।

इसके बाद, हमें डेटा को तालिका में बांधने की आवश्यकता है, तत्व के प्रत्येक क्षेत्र के साथ तालिका के स्तंभ के अनुरूप होना चाहिए।

 <DataGrid.Columns> <DataGridTextColumn Header="" Binding="{Binding Path=FirstName}"/> <DataGridTextColumn Header="" Binding="{Binding Path=LastName}"/> <DataGridTemplateColumn Header="" SortMemberPath="PhoneNumber"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <TextBox Text="{Binding Path=PhoneNumber}"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> <DataGridTemplateColumn.CellEditingTemplate> <DataTemplate> <TextBox Text="{Binding Path=PhoneNumber}" /> </DataTemplate> </DataGridTemplateColumn.CellEditingTemplate> </DataGridTemplateColumn> <DataGridTemplateColumn Header="" SortMemberPath="Date"> <DataGridTemplateColumn.CellTemplate> <DataTemplate > <TextBlock Text="{Binding Path=Date, StringFormat='dd/MM/yyyy'}"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> <DataGridTemplateColumn.CellEditingTemplate> <DataTemplate> <DatePicker SelectedDate="{Binding Date}"/> </DataTemplate> </DataGridTemplateColumn.CellEditingTemplate> </DataGridTemplateColumn> </DataGrid.Columns> 

दो प्रकार के कॉलम DataGridTextColumn और DataGridTemplateColumn का उपयोग यहां किया जाता है। आप हर जगह उनके प्रकारों के बारे में पढ़ सकते हैं। यहां समझने वाली मुख्य बात यह है कि DataGridTemplateColumn की मदद से आप कोई भी टेम्पलेट सेट कर सकते हैं। यही है, इस स्तंभ की कोशिकाओं में किसी भी नियंत्रण (बटन, कैलेंडर आदि) को जगह देना संभव होगा। उदाहरण के लिए, तीसरे कॉलम में एक टेक्स्टबॉक्स है:

 <DataGridTemplateColumn Header="" SortMemberPath="PhoneNumber"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <TextBox Text="{Binding Path=PhoneNumber}"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> 

महत्वपूर्ण: हेडर को पंजीकृत करने के लिए मत भूलना, क्योंकि ऑटो-समापन हमारे लिए अक्षम है। और DataGridTemplateColumn के लिए भी SortMemberPath को पंजीकृत करना आवश्यक है, ताकि वह यह जान सके कि किस क्षेत्र को डेटा सॉर्ट करना है।

बाइंडिंग पर चलते हैं। यह स्वयं डेटा बाइंडिंग है। हम इसे बाइंडिंग पथ = फोननंबर का उपयोग करके निर्दिष्ट करते हैं। यहां पर विचार करने वाली मुख्य बात यह है कि यह वर्ग विधि का नाम है जो फ़ील्ड का मान लौटाता है (फोननंबर नहीं, लेकिन फोननंबर, वर्ग विवरण देखें)।
और एक बात। सामान्य अवस्था (CellTemplate) और संपादन स्थिति (CellEditingTemplate) में कोशिकाओं के लिए विभिन्न प्रकार के टेम्पलेट (DataTemplate) दर्ज करना संभव है। सामान्य अवस्था में सेल के चौथे कॉलम में यह एक टेक्स्टबॉक्स है, और एडिटिंग स्टेट डेटपिकर में:

 <DataGridTemplateColumn Header="" SortMemberPath="Date"> <DataGridTemplateColumn.CellTemplate> <DataTemplate > <TextBlock Text="{Binding Path=Date, StringFormat='dd/MM/yyyy'}"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> <DataGridTemplateColumn.CellEditingTemplate> <DataTemplate> <DatePicker SelectedDate="{Binding Date}"/> </DataTemplate> </DataGridTemplateColumn.CellEditingTemplate> </DataGridTemplateColumn> 

यह भी ध्यान देने योग्य है कि तिथियों के साथ काम करते समय, पाठ क्षेत्र में एक स्ट्रिंगफार्मेट गुण होता है जिसे प्रारूपित किया जा सकता है। यह महत्वपूर्ण है कि महीने के सही प्रदर्शन के लिए "एमएम" बड़ा होना चाहिए।

अब, विशिष्ट डेटा को तालिका में बाँधने के लिए, C # पर कोड पर वापस जाएँ।
तत्वों के साथ सरणी भरने के बाद, इसे डेटा स्रोत के रूप में निर्दिष्ट किया जाना चाहिए:

 dataGrid.ItemsSource = elements; 

इस प्रकार, तत्वों के किसी भी परिवर्तन को तालिका में प्रदर्शित किया जाएगा और, इसके विपरीत, तालिका में किए गए किसी भी परिवर्तन से तत्वों में परिवर्तन होगा। लेकिन तत्वों में परिवर्तन करते समय, आपको विधि को कॉल करना होगा

 dataGrid.Items.Refresh(); 

।
और C # बंडल के एक और अच्छे उदाहरण के रूप में - XML, मैं केवल संख्याओं के साथ फ़ोन नंबर कक्षों की जांच करने का एक उदाहरण दूंगा। ऐसा करने के लिए, तीसरे कॉलम में कोड का टुकड़ा थोड़ा संपादित करें:

 <DataGridTemplateColumn.CellTemplate> <DataTemplate> <TextBox Text="{Binding Path=PhoneNumber}" TextChanged="phN_TextChanged"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> 

यह देखा जा सकता है कि टेक्स्टबॉक्स टैग में मैंने टेक्स्ट परिवर्तन इवेंट के लिए एक हैंडलर सौंपा। अब यह केवल कोड में इस हैंडलर को पंजीकृत करना बाकी है:

  private void phN_TextChanged(object sender, TextChangedEventArgs e) { int result = 0; TextBox txtx = sender as TextBox; if (txtx !=null) { if (!int.TryParse(txtx.Text, out result)) { txtx.Text = txtx.Text.Substring(0, txtx.Text.Length - 1); txtx.CaretIndex = txtx.Text.Length; } } } 

संख्याओं की जाँच नियमित अभिव्यक्तियों के माध्यम से भी की जा सकती है।

सभी को अच्छी रिलीज!