TabView

يمكن أن يكون لدينا علامات تبويب باستخدام شل. ومع ذلك ، ماذا يحدث إذا أردنا الحصول على علامات تبويب متداخلة داخل قسم معين (مثال: الشبكة) ؟، _ماذا لو أردنا تخصيص كل علامة تبويب بالكامل؟ _. في هذه الحالات ، سنحتاج إلى عارض مخصص حتى الآن ...

TabView هي طريقة لعرض مجموعة من علامات التبويب والمحتوى الخاص بها. يعد TabView مفيدًا لعرض العديد من المحتويات مع منح المستخدم القدرة على تخصيص كل شيء في الغالب.

ملاحظة: TabView هو عرض عبر الأنظمة الأساسية يتولى الأمر عندما تصل علامات التبويب الأصلية إلى حدودها ، مثل تحديد الموضع مع التخطيطات والتصميم والتصميم غير الموحد مثل الزر المرتفع.

API

بعد ذلك ، قائمة بخصائص TabView والأحداث والحالات المرئية.

الخصائص

خصائص TabView

| الملكية | اكتب | الوصف |
| ---------- |: -------------: |: -------------: |
| TabItemsSource | I لا يحصى | مجموعة تستخدم لإنشاء عناصر علامة التبويب الخاصة بـ TabView. |
| TabViewItemDataTemplate | قالب البيانات | القالب الذي تستخدمه طريقة عرض علامة التبويب لإنشاء رأس عناصر علامة التبويب. |
| TabContentDataTemplate | قالب البيانات | القالب الذي تستخدمه طريقة عرض علامة التبويب لإنشاء محتوى عناصر علامة التبويب. |
| متساوي | منطقي | تمكين أو تعطيل التنقل الدوري لعلامات التبويب. |
| IsLazy | منطقي | تمكين أو تعطيل تحميل علامات التبويب البطيئة. |
| الفهرس المحدد | كثافة العمليات | يحصل أو يحدد علامة التبويب المحددة حاليا. الافتراضي هو 0. |
| TabStripPlacement | TabStripPlacement | موضع TabStrip (أعلى أو أسفل). |
| TabStripBackground | فرشاة | خلفية TabStrip. |
| TabIndicatorBrush | فرشاة | خلفية TabIndicator. |
| TabIndicatorHeight | مزدوج | ارتفاع مؤشر الجدولة. |
| عرض الجدولة | مزدوج | عرض TabIndicator. |
| TabIndicatorPlacement | TabIndicatorPlacement | |
| TabIndicatorView | عرض | محتوى TabIndicator. |
| TabContentBackground | فرشاة | خلفية محتوى علامة التبويب. |
| TabContentHeight | مزدوج | ارتفاع محتوى علامة التبويب. |
| TabStripHeight | مزدوج | ارتفاع TabStrip. |
| TabContentHeight | مزدوج | ارتفاع محتوى علامة التبويب. |
| HasTabStripShadow | منطقي | إظهار أو إخفاء تأثير ظل TabStrip. |
| IsTabTransitionEnabled | منطقي | تمكين أو تعطيل الانتقال بين علامات التبويب. |
| IsSwipeEnabled | منطقي | تمكين أو تعطيل إيماءة التمرير. |

خصائص TabViewItem

| الملكية | اكتب | الوصف |
| ---------- |: -------------: |: -------------: |
| نص | سلسلة | نص علامة التبويب. |
| لون النص | اللون | لون نص علامة التبويب. |
| TextColorSelected | اللون | لون نص علامة التبويب المحددة. |
| حجم الخط | حجم الخط | حجم الخط المستخدم في نص علامة التبويب. |
| FontSizeSelected | حجم الخط | حجم الخط المستخدم في علامة التبويب المحددة. |
| FontFamily | سلسلة | عائلة الخطوط المستخدمة في علامة التبويب. |
| FontFamilySelected | سلسلة | عائلة الخطوط المستخدمة في علامة التبويب المحددة. |
| سمات الخط | سمات الخط | سمات الخط المستخدمة في علامة التبويب. |
| FontAttributesSelected | سمات الخط | سمات الخط المستخدمة في علامة التبويب المحددة. |
| أيقونة | مصدر الصورة | أيقونة علامة التبويب. |
| IconSelected | مصدر الصورة | ImageSource المستخدمة كأيقونة في علامة التبويب المحددة. |
| المحتوى | عرض | محتوى علامة التبويب. هو عرض ، يمكن استخدام أي شيء كمحتوى. |
| BadgeText | منطقي | نص الشارة المستخدم في علامة التبويب. |
| BadgeTextColor | اللون | لون نص الشارة المستخدم في علامة التبويب. |
| BadgeTextColorSelected | اللون | لون نص الشارة المستخدم في علامة التبويب المحددة. |
| BadgeBackgroundColor | اللون | لون الشارة المستخدم في علامة التبويب. |
| BadgeBackgroundColorSelected | اللون | لون الشارة المستخدم في علامة التبويب المحددة. |
| محدد | منطقي | منطقي يشير إلى ما إذا تم تحديد علامة التبويب أم لا. |
| TapCommand | ICommand | الأمر الذي يتم تنفيذه عندما يقوم المستخدم بالنقر فوق علامة تبويب. |
| TapCommandParameter | كائن | معلمة أمر الحنفية. |

الأحداث

أحداث TabView

| حدث | الوصف |
| ---------- |: -------------: |
| تم تغيير التحديد | الحدث الذي يتم رفعه عند تغيير علامة التبويب المحددة. |
| بالتمرير | الحدث الذي يتم رفعه عند التمرير بين علامات التبويب. |

أحداث TabViewItem

| حدث | الوصف |
| ---------- |: -------------: |
| TabTapped | الحدث الذي يتم رفعه عندما يقوم المستخدم بالنقر فوق علامة تبويب. |

فيجوالستاتس

يوفر Visual State Manager (VSM) طريقة منظمة لإجراء تغييرات مرئية على واجهة المستخدم من التعليمات البرمجية.
يقدم VSM مفهوم الحالات المرئية. يمكن أن يكون لـ TabView العديد من المظاهر المرئية المختلفة اعتمادًا على حالتها الأساسية.

يحتوي TabView على أربع حالات VisualStates محددة:

• CurrentTabVisualState
• NextTabVisualState
• PreviousTabVisualState
• 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>

باستخدام VisualStates

يمكن استخدام حالات مرئية مختلفة لتخصيص علامة التبويب الحالية وعلامة التبويب التالية وما إلى ذلك.

<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

يمكنك استخدام XAML أو C # لإنشاء واجهة المستخدم في Xamarin. دعونا نرى كيف يمكننا إنشاء علامات تبويب باستخدام 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 .

باستخدام XAML:

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

باستخدام CSS:

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

الصعوبة: متوسطة