Silverlight – TreeView नियंत्रणाची सुरुवात

मुंबई, भारत १२ जुलै, २०२६ ALN: या लेखात खालील तंत्रज्ञानांसाठी उपयुक्त माहिती आहे: सिल्वरलाईट 4

लेखाच्या उदाहरण कोड डाउनलोड करण्यासाठी येथे क्लिक करा

परिचय

जर आपल्याला हायेरार्किकल संबंध असलेले डेटा दर्शवायचे असेल तर TreeView नियंत्रणाचा वापर केला जातो. हे नियंत्रण सिल्वरलाईटचा एक भाग आहे. या लेखात मी मूलभूत वापरासाठी आवश्यक पायऱ्या दर्शवणार आहे. पुढील लेखात मी MVVM पॅटर्नसह याचा वापर कसा करावा हे दर्शवणार आहे.

भाग 1 - TreeView नियंत्रणाची भर

आगामी उदाहरणात, आपण मूलभूत डेटा संरचना निश्चित करू, TreeView नियंत्रण स्क्रीनवर जोडू आणि तयार केलेल्या नियंत्रणाद्वारे डेटा दर्शवू.

प्रकल्पाची तयारी

सिल्वरलाईट अनुप्रयोग प्रकाराचा प्रकल्प तयार करा.

System.Windows.Controls.dll नावाच्या फाइलसाठी संदर्भ जोडा.

MainPage.xaml फाइल

MainPage.xaml फाइल उघडा. फाइलच्या सुरुवातीला खालील namespaces ची व्याख्या जोडा.

xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
xmlns:dataHierarcy="clr-namespace:System.Windows;assembly=System.Windows.Controls"

ज्यामुळे:

• पहिला पथ TreeView नियंत्रण समाविष्ट करतो.
• दुसरा पथ “HierarchicalDataTemplate” नियंत्रण समाविष्ट करतो. या नियंत्रणाद्वारे आपण श्रेणी आणि उपश्रेणी यांच्यातील संबंध निश्चित करू.

आता आपण नियंत्रण जोडू शकता. XAML मध्ये खालील कोड कॉपी करा.

<Grid x:Name="LayoutRoot" Background="White">
 <StackPanel>
 <controls:TreeView x:Name="mainTreeView">
 <controls:TreeView.ItemTemplate>
 <dataHierarcy:HierarchicalDataTemplate ItemsSource="{Binding Children}"> 
 <TextBlock Text="{Binding Name}"></TextBlock> 
 </dataHierarcy:HierarchicalDataTemplate> 
 </controls:TreeView.ItemTemplate>
 </controls:TreeView>
 </StackPanel>
</Grid>

ज्यामुळे:

• पहिला ओळ – या ओळीत असलेले नियंत्रण आधीच फाइलमध्ये असावे. त्यात दुसऱ्या ते दहाव्या ओळी कॉपी करा.
• पाचवी ते सातवी ओळ – या ओळीत आपण डेटा दर्शवण्यासाठी वापरण्यात येणारी टेम्पलेट निश्चित करतो. “HierarchicalDataTemplate” प्रकाराच्या टेम्पलेटद्वारे श्रेणी आणि उपश्रेणी यांच्यातील संबंध निश्चित करणे शक्य आहे. या उदाहरणात, आपण ऑब्जेक्टच्या उपश्रेणी “Children” मध्ये आहेत.
• सहावी ओळ – या ओळीत आपण श्रेणी आणि उपश्रेणींचा दृश्य टेम्पलेट निश्चित करतो (हे एकच टेम्पलेट आहे). या उदाहरणात, आपण “Name” गुणधर्माचा डेटा दर्शवतो.

आम्ही UI पूर्ण केले आहे, आता डेटा संरचना निश्चित करण्याकडे वळूया.

CategoryItem.cs फाइल

CategoryItem.cs नावाची फाइल तयार करा आणि त्यात खालील कोड कॉपी करा:

public class CategoryItem
{
 public string Name { get; set; }
 public List Children { get; set; }
 public bool IsNew { get; set; }
 
 public CategoryItem(string name, params CategoryItem children)
 {
 this.Name = name;
 this.IsNew = false;
 this.Children = new List(children);
 }
 
 public CategoryItem(string name, bool isNew, params CategoryItem children)
 {
 this.Name = name;
 this.IsNew = isNew;
 this.Children = new List(children);
 }
}

MainPage.xaml.cs फाइल

MainPage.xaml.cs फाइल उघडा. त्यात खालील कोड कॉपी करा:

public partial class MainPage : UserControl
{
 public MainPage 
 {
 InitializeComponent ;
 mainTreeView.ItemsSource = createCategoriesData ;
 }
 
 private System.Collections.IEnumerable createCategoriesData 
 {
 List result = new List 
 {
 new CategoryItem("Mobiles",
 new CategoryItem("Apple",
 new CategoryItem("Iphone 4"),
 new CategoryItem("Iphone 5", true)),
 new CategoryItem("Samsung",
 new CategoryItem("Galaxy S1"),
 new CategoryItem("Galaxy S2", true))),
 new CategoryItem("Tablets",
 new CategoryItem("Asus",
 new CategoryItem("Asus Transformer")),
 new CategoryItem("Acer")
 };
 return result;
 }
}

ज्यामुळे:

• डेटा संरचना “CategoryItem” दर्शवणारी वर्ग अनेक गुणधर्म समाविष्ट करू शकते. आपण या गुणधर्मांना नियंत्रणाद्वारे बाइंडिंग करू शकता.
• सातवी ओळ – या उदाहरणात, मी डेटा संरचना नियंत्रणात “साधा” प्रकार वापरला आहे. मी उदाहरण साधे करण्यासाठी हे केले. मी डेटा प्रारंभ करण्यासाठी Constructor मध्ये “ItemSource” ला कॉल केला आहे.
• दहावी ओळ – स्थिर डेटा संरचना तयार करते. वास्तविक अनुप्रयोगांमध्ये डेटा डेटा स्रोतावरून लोड केला जाईल. पुढील लेखात मी कसा डेटा संरचना तयार करायचा हे दर्शवणार आहे.

आम्ही पूर्ण केले. प्रकल्प चालवा. तुम्हाला असे काहीतरी दिसले पाहिजे:

भाग 2 – TreeView नियंत्रणावर अतिरिक्त क्रिया करणे

या विभागात TreeView नियंत्रणासह सामान्य क्रियांची वर्णन आहे.

निवडलेल्या घटकावर क्रिया करणे

निवडलेल्या घटकावर कॉल करून “SelectedItem” गुणधर्म प्राप्त करा.

डेटा संरचनेतील ऑब्जेक्टसाठी TreeViewItem प्राप्त करणे

TreeView नियंत्रण प्रत्येक ऑब्जेक्टसाठी TreeViewItem ऑब्जेक्ट तयार करते. या ऑब्जेक्टद्वारे आपण घटक विस्तृत करू शकता (IsExpanded गुणधर्म), त्याच्या डिझाइनवर प्रभाव टाकू शकता इत्यादी.

mainTreeView.UpdateLayout ;
TreeViewItem treeViewItem = mainTreeView.ItemContainerGenerator.ContainerFromItem(mainTreeView.SelectedItem) as TreeViewItem;
if (treeViewItem != null)
{ 
 // तुम्हाला हवे ते करा
}

ज्यामुळे:

• पहिला ओळ – वृक्षाची दृश्यता अद्ययावत असल्याची खात्री करण्यासाठी आहे. कारण नोंदणी न करता ऑब्जेक्ट तयार केला जाणार नाही.
• तिसरी ओळ – आम्ही “ItemContainerGenerator” गुणधर्माचा वापर करून रूपांतरण करतो.
• पाचवी ओळ – ऑब्जेक्ट परत आला की नाही याची नेहमी तपासणी करणे महत्त्वाचे आहे. ऑब्जेक्ट परत येऊ नये याची अनेक कारणे आहेत:
• आवश्यक ऑब्जेक्ट अस्तित्वात नाही किंवा स्क्रीनवर दर्शविला जात नाही.
• नियंत्रण अद्याप लोड झालेले नाही, म्हणजे तुम्ही “Loaded” इव्हेंटच्या आधी क्रिया केली आहे.
• ऑब्जेक्ट स्क्रीनवर दर्शविला जात आहे पण दृश्य अद्ययावत झालेले नाही. यासाठी आपण “UpdateLayout” ला कॉल करतो.

निवडलेल्या घटकावर इव्हेंटसाठी रजिस्टर करणे

निवडलेल्या घटकात बदल झाल्यास सूचना प्राप्त करण्यासाठी “SelectedItemChanged” इव्हेंटसाठी रजिस्टर करा.

वृक्षातील विविध स्तरांमध्ये भिन्न डिझाइन

प्रथम स्तरातील घटक आणि उपघटकांमध्ये भिन्न डिझाइन तयार करण्यासाठी खालील उदाहरणाचा वापर करा. XAML मधील कोड खालीलप्रमाणे बदला:

<controls:TreeView x:Name="mainTreeView">
 <controls:TreeView.ItemTemplate>
 <dataHierarcy:HierarchicalDataTemplate ItemsSource="{Binding Children}">
 <dataHierarcy:HierarchicalDataTemplate.ItemTemplate>
 <DataTemplate>
 <TextBlock FontStyle='Italic' Text='{Binding Path=Name}' />
 </DataTemplate>
 </dataHierarcy:HierarchicalDataTemplate.ItemTemplate>
 <TextBlock Text='{Binding Path=Name}' FontWeight='Bold' />
 </dataHierarcy:HierarchicalDataTemplate>
 </controls:TreeView.ItemTemplate>
</controls:TreeView>

ज्यामुळे:

• या उदाहरणात, पहिल्या स्तरातील घटक ठळकपणे दर्शवले जातात आणि इतर उपघटक तिरपे दर्शवले जातात.
• चौथी ते आठवी ओळ – या ओळीत “HierarchicalDataTemplate” च्या “ItemTemplate” गुणधर्माची व्याख्या केली आहे.
• दहावी ओळ – या ओळीत वर्तमान घटकाचे टेम्पलेट निश्चित केले आहे.

कोड पुन्हा चालवल्यानंतर अनुप्रयोग असे दिसले पाहिजे:

समारोप

या लेखात, आपण TreeView नियंत्रणाद्वारे हायेरार्किकल डेटा कसा दर्शवायचा हे पाहिले. दुर्दैवाने, सिल्वरलाईटमध्ये येणारे नियंत्रण क्षमतांमध्ये मर्यादित आहे आणि व्यावसायिक अनुप्रयोगांमध्ये, विशेषतः MVVM तत्त्वांनुसार विकसित केलेल्या अनुप्रयोगांमध्ये समाकलित करणे कठीण आहे. पुढील लेखात, मी याला MVVM अनुप्रयोगांमध्ये कसे समायोजित करायचे ते दर्शवणार आहे.

लेखाच्या उदाहरण कोड डाउनलोड करण्यासाठी येथे क्लिक करा

बाह्य दुवे:

दुवा 1 (इंग्रजी) – हा दुवा TreeView च्या वापरासाठी एक व्यापक मूलभूत मार्गदर्शक समाविष्ट करतो. मार्गदर्शकात “Expression Blend” वापरून नियंत्रण कसे तयार करावे, नियंत्रणाची शैली कशी बदलावी इत्यादी दर्शवले आहे.

दुवा 2 (इंग्रजी) – माहिती ऑब्जेक्टसाठी TreeViewItem शोधणे, घटकावर माऊस क्लिक ऐकणे यासारख्या प्रगत क्रिया करण्यासाठी मार्गदर्शक.