टैब व्यू

हमारे पास शेल का उपयोग करके टैब हो सकते हैं। हालांकि, क्या होता है यदि हम एक विशिष्ट खंड (उदाहरण: ग्रिड) के भीतर नेस्टेड टैब रखना चाहते हैं?, _क्या हम प्रत्येक टैब को पूरी तरह से अनुकूलित करना चाहते हैं?_। इन मामलों में, हमें अब तक एक कस्टम रेंडरर की आवश्यकता होगी...

TabView , टैब के सेट और उनकी संबंधित सामग्री को प्रदर्शित करने का एक तरीका है। TabView कई सामग्री प्रदर्शित करने के लिए उपयोगी है, जबकि उपयोगकर्ता को अधिकतर सब कुछ अनुकूलित करने की क्षमता प्रदान करता है।

नोट: TabView एक क्रॉस-प्लेटफ़ॉर्म दृश्य है जो देशी टैब के अपनी सीमा से टकराने पर कार्य करता है, जैसे कि लेआउट के साथ पोजिशनिंग, स्टाइलिंग और उभरे हुए बटन की तरह गैर-समान स्टाइल।

एपीआई

इसके बाद, TabView गुणों, घटनाओं और विज़ुअलस्टेट्स वाली एक सूची।

गुण

TabView गुण

| संपत्ति | प्रकार | विवरण |
|----------|:----------------:|:----------------:|
| TabItemsSource | आईनेमरेबल | TabView के टैब आइटम जनरेट करने के लिए उपयोग किया जाने वाला संग्रह। |
| TabViewItemDataTemplate | डेटा टेम्पलेट | टैब आइटम का हेडर जेनरेट करने के लिए टैब व्यू द्वारा उपयोग किया जाने वाला टेम्प्लेट। |
| TabContentDataTemplate | डेटा टेम्पलेट | टैब आइटम की सामग्री जेनरेट करने के लिए टैब व्यू टेम्प्लेट का उपयोग करता है। |
| इसचक्रीय | बूल | चक्रीय टैब नेविगेशन सक्षम या अक्षम करें। |
| इसलाज़ी | बूल | आलसी टैब लोड करना सक्षम या अक्षम करें। |
| चयनित सूचकांक | इंट | वर्तमान में चयनित टैब को प्राप्त या सेट करता है। डिफ़ॉल्ट 0 है। |
| टैबस्ट्रिप प्लेसमेंट | टैबस्ट्रिप प्लेसमेंट | TabStrip प्लेसमेंट (ऊपर या नीचे)। |
| टैबस्ट्रिपबैकग्राउंड | ब्रश | टैबस्ट्रिप पृष्ठभूमि। |
| TabIndicatorBrush | ब्रश | TabIndicator बैकग्राउंड। |
| TabIndicatorHeight | डबल | TabIndicator ऊंचाई। |
| TabIndicatorWidth | डबल | TabIndicator चौड़ाई। |
| TabIndicatorPlacement | TabIndicatorPlacement | |
| TabIndicatorView | देखें | TabIndicator सामग्री। |
| TabContentBackground | ब्रश | टैब सामग्री पृष्ठभूमि। |
| TabContentHeight | डबल | टैब सामग्री ऊंचाई। |
| टैबस्ट्रिपहाइट | डबल | टैबस्ट्रिप ऊंचाई। |
| TabContentHeight | डबल | टैब सामग्री ऊंचाई। |
| HasTabStripछाया | बूल | TabStrip छाया प्रभाव दिखाएँ या छिपाएँ। |
| IsTabTransitionEnabled | बूल | टैब के बीच संक्रमण को सक्षम या अक्षम करें। |
| IsSwipeEnabled | बूल | स्वाइप जेस्चर को सक्षम या अक्षम करें। |

TabViewItem गुण

| संपत्ति | प्रकार | विवरण |
|----------|:----------------:|:----------------:|
| पाठ | स्ट्रिंग | टैब का पाठ। |
| टेक्स्ट कलर | रंग | टैब का टेक्स्ट रंग। |
| पाठ रंग चयनित | रंग | चयनित टैब का टेक्स्ट रंग। |
| फ़ॉन्ट आकार | फ़ॉन्ट आकार | टैब टेक्स्ट में प्रयुक्त फ़ॉन्ट आकार। |
| FontSizeSelected | फ़ॉन्ट आकार | चयनित टैब में प्रयुक्त फ़ॉन्ट आकार। |
| FontFamily | स्ट्रिंग | टैब में प्रयुक्त फ़ॉन्ट परिवार। |
| FontFamilySelected | स्ट्रिंग | चयनित टैब में प्रयुक्त फ़ॉन्ट परिवार। |
| FontAttributes | FontAttributes | टैब में प्रयुक्त फ़ॉन्ट विशेषताएँ। |
| FontAttributesचयनित | FontAttributes | चयनित टैब में प्रयुक्त फ़ॉन्ट विशेषताएँ। |
| चिह्न | छवि स्रोत | टैब का आइकन। |
| चिह्न चयनित | छवि स्रोत | छवि स्रोत चयनित टैब में आइकन के रूप में उपयोग किया जाता है। |
| सामग्री | देखें | टैब की सामग्री। दृश्य है, सामग्री के रूप में कुछ भी उपयोग कर सकते हैं। |
| बैज टेक्स्ट | बूल | टैब में प्रयुक्त बैज टेक्स्ट। |
| बैज टेक्स्ट कलर | रंग | टैब में प्रयुक्त बैज टेक्स्ट रंग। |
| BadgeTextColorचयनित | रंग | चयनित टैब में प्रयुक्त बैज टेक्स्ट रंग। |
| बैजबैकग्राउंडकलर | रंग | टैब में प्रयुक्त बैज रंग। |
| बैजपृष्ठभूमिरंगचयनित | रंग | चयनित टैब में उपयोग किया गया बैज रंग। |
| चयनित है | बूल | एक बूल जो इंगित करता है कि टैब चुना गया है या नहीं। |
| TapCommand | आईकमांड | जब उपयोगकर्ता किसी टैब को टैप करता है तो वह कमांड निष्पादित होता है। |
| TapCommandParameter | वस्तु | टैप कमांड पैरामीटर। |

आयोजन

टैबव्यू इवेंट्स

| घटना | विवरण |
|----------|:----------------:|
| चयन बदल गया | इवेंट जो तब उठाया जाता है जब चयनित टैब बदल जाता है। |
| स्क्रॉल किया हुआ | टैब के बीच स्वाइप करते समय उठाया गया ईवेंट। |

TabViewItem ईवेंट्स

| घटना | विवरण |
|----------|:----------------:|
| टैबटैप | जब उपयोगकर्ता किसी टैब पर टैप करता है, तो वह इवेंट उठाया जाता है। |

विजुअलस्टेट्स

विजुअल स्टेट मैनेजर (वीएसएम) कोड से यूजर इंटरफेस में दृश्य परिवर्तन करने के लिए एक संरचित तरीका प्रदान करता है।
वीएसएम दृश्य राज्यों की अवधारणा का परिचय देता है। TabView में इसकी अंतर्निहित स्थिति के आधार पर कई अलग-अलग दृश्य दिखावे हो सकते हैं।

TabView में चार विशिष्ट VisualStates हैं :

• करंटटैबविजुअलस्टेट
• अगलाटैबविजुअलस्टेट
• पिछलाटैबविज़ुअलस्टेट
• DefaultTabVisualState

परिदृश्यों

आइए सामान्य परिदृश्यों को कवर करने वाले कुछ नमूने देखें।

मूल टैब

आइए एक बुनियादी उदाहरण देखें:

<TabView 
    TabStripPlacement="Bottom"
    TabStripBackgroundColor="Blue">
    <TabViewItem
        Icon="triangle.png"
        Text="Tab 1">
        <Grid 
            BackgroundColor="Gray">
            <Label
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent1" />
        </Grid>
    </TabViewItem>
    <TabViewItem
        Icon="circle.png"
        Text="Tab 2">
        <Grid>
            <Label    
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent2" />
        </Grid>
    </TabViewItem>
</TabView>

TabItemsSource

TabItemsSource (गतिशील टैब) का उपयोग करना:

<TabView
    TabItemsSource="{Binding Monkeys}"
    TabViewItemDataTemplate="{StaticResource TabViewItemTemplate}"
    TabContentDataTemplate="{StaticResource TabContentTemplate}" />

कस्टम टैब

प्रत्येक टैब की उपस्थिति को अनुकूलित किया जा सकता है:

<ControlTemplate
    x:Key="TabItemTemplate">
    <Grid>
    ...
    </Grid>
</ControlTemplate>

<TabView>
    <TabViewItem
        Text="Tab 1"
        ControlTemplate="{StaticResource TabItemTemplate}">
    </TabViewItem>
</TabView>

चक्रीय टैब

क्या आप टैब के बीच चक्रीय रूप से नेविगेट करना चाहते हैं?

<TabView
    IsCyclical="True">
    ...
</TabView>

धीरे लोड हो रहा है

आलसी टैब लोड हो रहा है:

<TabView
    IsLazy="True">
    ...
</TabView>

टैब ट्रांज़िशन और TabViewItem एनिमेशन

प्रत्येक टैब के बीच संक्रमण को अनुकूलित करने के लिए Xamarin.Forms एनिमेशन का उपयोग कर सकते हैं, प्रकट होने या गायब होने पर टैब को एनिमेट कर सकते हैं, या दिखाई देने या गायब होने पर बैज को चेतन भी कर सकते हैं।

<TabView>
    <TabView.TabTransition>
        <local:CustomTabTransition />
    </TabView.TabTransition>
    <TabViewItem
        Text="Tab 1">      
            <TabViewItem.TabAnimation>
                <local:CustomTabViewItemAnimation />
            </TabViewItem.TabAnimation>
        <Grid 
            BackgroundColor="LawnGreen">
            <Label
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent1" />
        </Grid>
    </TabViewItem>
    ...
</TabView>

विजुअलस्टेट्स का उपयोग करना

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

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="TabViewStates">
            <VisualState x:Name="CurrentTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="1" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="PreviousTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.7" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="NextTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.7" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="DefaultTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.9" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Label Text="{Binding Index}" HorizontalOptions="Center" VerticalOptions="End" />
</Grid>

C . का उपयोग करके टैब बनाएं

Xamarin.Forms में UI बनाने के लिए आप XAML या C# का उपयोग कर सकते हैं। आइए देखें कि हम C# का उपयोग करके कैसे टैब बनाएंगे।

var tabView = new Tabs
{
    TabStripPlacement = TabStripPlacement.Bottom,
    TabStripBackgroundColor = Color.Blue,
    TabStripHeight = 60,
    TabIndicatorColor = Color.Yellow,
    TabContentBackgroundColor = Color.Yellow
};

var tabViewItem1 = new TabViewItem
{
    Icon = "triangle.png",
    Text = "Tab 1",
    TextColor = Color.White,
    TextColorSelected = Color.Yellow,
};

var tabViewItem1Content = new Grid
{
    BackgroundColor = Color.Gray
};

var label1 = new Label
{
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Text = "TabContent1"
};

tabViewItem1Content.Children.Add(label1);

tabViewItem1.Content = tabViewItem1Content;

tabView.TabItems.Add(tabViewItem1);

var tabViewItem2 = new TabViewItem
{
    Icon = "circle.png",
    Text = "Tab 2",
    TextColor = Color.White,
    TextColorSelected = Color.Yellow
};

var tabViewItem2Content = new Grid
{
    BackgroundColor = Color.OrangeRed
};

var label2 = new Label
{
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Text = "TabContent2"
};

tabViewItem2Content.Children.Add(label2);

tabViewItem2.Content = tabViewItem2Content;

tabView.TabItems.Add(tabViewItem2);

शैलियों का उपयोग करना

XAML शैलियों या CSS का उपयोग करके टैब सामग्री, टैब पट्टी, टैब आइटम आदि की उपस्थिति को अनुकूलित कर सकते हैं।

एक्सएएमएल का उपयोग करना:

<Style
    x:Key="TabItemStyle"
    TargetType="TabViewItem">
    <Setter
        Property="FontSize"
        Value="12" />
    <Setter
        Property="TextColor"
        Value="#979797" />
</Style>

सीएसएस का उपयोग करना:

.customTabItem {
    font-size: medium;
    text-color: red;
}

कठिनाई: मध्यम

अधिक जानकारी

https://github.com/xamarin/Xamarin.Forms/issues/10773 पर आधारित