Tab Order

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

WPF इस व्यवहार को सीधे बॉक्स से बाहर का समर्थन करता है, और इससे भी बेहतर: यह स्वचालित रूप से एक क्षेत्र से दूसरे क्षेत्र में जाने पर उपयोग किए जाने वाले आदेश को स्थापित करेगा, इसलिए सामान्य तौर पर, आपको इस बारे में चिंता करने की आवश्यकता नहीं है। हालाँकि, कभी-कभी आपके विंडो / डायलॉग के डिजाइन के कारण WPF एक टैब ऑर्डर का उपयोग करता है जिसे आप विभिन्न कारणों से सहमत नहीं हो सकते हैं। इसके अलावा, आप यह तय कर सकते हैं कि कुछ नियंत्रण टैबिंग ऑर्डर का हिस्सा नहीं होने चाहिए। मुझे एक उदाहरण के साथ यह स्पष्ट करने की अनुमति दें:

इस Dialog में एक ग्रिड होता है,जोकि बीच में विभाजित होता है, जिसमें स्टैकपैनल प्रत्येक तरफ होता है, जिसमें लेबल और टेक्स्टबॉक्स होते हैं। डिफ़ॉल्ट टैब ऑर्डर व्यवहार विंडो के पहले Control के साथ शुरू होता है और फिर अगले Control पर जाने से पहले, उसके भीतर पाए जाने वाले प्रत्येक child control के माध्यम से टैब होता है। चूंकि Dialog में खड़ी उन्मुख स्टैकपैनल्स होते हैं, इसका मतलब है कि हम StackPanel नंबर दो पर जाने से पहले जिसमें Last nameऔर Zip code के लिए फ़ील्ड हैं First name फ़ील्ड में शुरू करेंगे और फिर Street nameफ़ील्ड पर जाएँगे और फिर City फ़ील्ड, । जब दूसरे स्टैकपैनल से बाहर निकलते हैं, तो अंत में दो बटन पर पहुंच जाएंगे।

हालाँकि, इस Dialog के लिए, यह वह व्यवहार नहीं है जो मैं चाहता हूँ। इसके बजाय मैं First name से Last name टैब करना चाहता हूं (इसलिए मूल रूप से लंबवत के बजाय क्षैतिज रूप से आगे बढ़ रहे हैं ), और जब फ़ॉर्म में टैब करते हैं, उसके शीर्ष पर, मैं City फ़ील्ड दर्ज नहीं करना चाहता हूं क्योंकि यह स्वचालित रूप से इस काल्पनिक Dialog में Zip code के आधार पर भरा जाएगा और इसलिए इसे readonly बनाया गया है। इस सब को पूरा करने के लिए, मैं दो properties का उपयोग करूंगा: TabIndex और IsTabStop। TabIndex का उपयोग ऑर्डर को परिभाषित करने के लिए किया जाता है, जबकि IsTabStop संपत्ति WPF को विंडो के माध्यम से टैब करते समय एक Control को छोड़ने के लिए मजबूर करेगी। यहाँ Dialog बनाने के लिए उपयोग किया जाने वाला मार्कअप है:

<Window x:Class="WpfTutorialSamples.Control_concepts.TabOrderSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfTutorialSamples.Control_concepts"
    mc:Ignorable="d"
    Title="TabOrderSample" Height="250" Width="400">
    <Grid Margin="20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="20" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <StackPanel>
        <Label>First name:</Label>
        <TextBox TabIndex="0" />
        <Label>Street name:</Label>
        <TextBox TabIndex="2" />
        <Label>City:</Label>
        <TextBox TabIndex="5" IsReadOnly="True" IsTabStop="False" Background="Gainsboro" />
    </StackPanel>
    <StackPanel Grid.Column="2">
        <Label>Last name:</Label>
        <TextBox TabIndex="1" />
        <Label>Zip Code:</Label>
        <TextBox TabIndex="4" />
    </StackPanel>
    <Button Grid.Row="1" HorizontalAlignment="Right" Width="80">Add</Button>
    <Button Grid.Row="1" Grid.Column="2" HorizontalAlignment="Left" Width="80">Cancel</Button>
    </Grid>
</Window>

ध्यान दें कि मैं कैसे प्रत्येक प्रासंगिक Control को TabIndex property में एक नंबर देता हूं, और फिर शहर के लिए उपयोग किए गए TextBox के लिए IsTabStop का उपयोग करता हूं - यह एक Dialog में टैब क्रम को नियंत्रित करने के लिए इतना आसान है!

सारांश

एक Dialog के टैब क्रम को नियंत्रित करना बहुत महत्वपूर्ण है, सौभाग्य से हमारे लिए, WPF एक उचित टैब क्रम को स्वचालित रूप से परिभाषित करने का एक बहुत अच्छा काम करता है। हालाँकि, कुछ मामलों में, TabIndex और IsTabStop properties का उपयोग करके ऊपर जाने और नियंत्रण करने की समझ होगी, जैसा कि ऊपर दिए गए उदाहरण में दिखाया गया है।