يمكن أن يكون لدينا علامات تبويب باستخدام شل. ومع ذلك ، ماذا يحدث إذا أردنا الحصول على علامات تبويب متداخلة داخل قسم معين (مثال: الشبكة) ؟، _ماذا لو أردنا تخصيص كل علامة تبويب بالكامل؟ _. في هذه الحالات ، سنحتاج إلى عارض مخصص حتى الآن ...
TabView هي طريقة لعرض مجموعة من علامات التبويب والمحتوى الخاص بها. يعد TabView مفيدًا لعرض العديد من المحتويات مع منح المستخدم القدرة على تخصيص كل شيء في الغالب.
ملاحظة: 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 | منطقي | تمكين أو تعطيل إيماءة التمرير. |
| الملكية | اكتب | الوصف |
| ---------- |: -------------: |: -------------: |
| نص | سلسلة | نص علامة التبويب. |
| لون النص | اللون | لون نص علامة التبويب. |
| TextColorSelected | اللون | لون نص علامة التبويب المحددة. |
| حجم الخط | حجم الخط | حجم الخط المستخدم في نص علامة التبويب. |
| FontSizeSelected | حجم الخط | حجم الخط المستخدم في علامة التبويب المحددة. |
| FontFamily | سلسلة | عائلة الخطوط المستخدمة في علامة التبويب. |
| FontFamilySelected | سلسلة | عائلة الخطوط المستخدمة في علامة التبويب المحددة. |
| سمات الخط | سمات الخط | سمات الخط المستخدمة في علامة التبويب. |
| FontAttributesSelected | سمات الخط | سمات الخط المستخدمة في علامة التبويب المحددة. |
| أيقونة | مصدر الصورة | أيقونة علامة التبويب. |
| IconSelected | مصدر الصورة | ImageSource المستخدمة كأيقونة في علامة التبويب المحددة. |
| المحتوى | عرض | محتوى علامة التبويب. هو عرض ، يمكن استخدام أي شيء كمحتوى. |
| BadgeText | منطقي | نص الشارة المستخدم في علامة التبويب. |
| BadgeTextColor | اللون | لون نص الشارة المستخدم في علامة التبويب. |
| BadgeTextColorSelected | اللون | لون نص الشارة المستخدم في علامة التبويب المحددة. |
| BadgeBackgroundColor | اللون | لون الشارة المستخدم في علامة التبويب. |
| BadgeBackgroundColorSelected | اللون | لون الشارة المستخدم في علامة التبويب المحددة. |
| محدد | منطقي | منطقي يشير إلى ما إذا تم تحديد علامة التبويب أم لا. |
| TapCommand | ICommand | الأمر الذي يتم تنفيذه عندما يقوم المستخدم بالنقر فوق علامة تبويب. |
| TapCommandParameter | كائن | معلمة أمر الحنفية. |
| حدث | الوصف |
| ---------- |: -------------: |
| تم تغيير التحديد | الحدث الذي يتم رفعه عند تغيير علامة التبويب المحددة. |
| بالتمرير | الحدث الذي يتم رفعه عند التمرير بين علامات التبويب. |
| حدث | الوصف |
| ---------- |: -------------: |
| TabTapped | الحدث الذي يتم رفعه عندما يقوم المستخدم بالنقر فوق علامة تبويب. |
يوفر Visual State Manager (VSM) طريقة منظمة لإجراء تغييرات مرئية على واجهة المستخدم من التعليمات البرمجية.
يقدم VSM مفهوم الحالات المرئية. يمكن أن يكون لـ TabView العديد من المظاهر المرئية المختلفة اعتمادًا على حالتها الأساسية.
يحتوي TabView على أربعة VisualStates محددة:
دعنا نرى بعض العينات التي تغطي السيناريوهات الشائعة.
دعنا نرى مثالًا أساسيًا:
<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 (علامات التبويب الديناميكية):
<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>
يمكن استخدام الرسوم المتحركة 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>
يمكنك استخدام 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;
}
بناءً على https://github.com/xamarin/Xamarin.Forms/issues/10773
هل يمكننا رؤية عينة C # في MVU؟
سيكون من المفيد حقًا لبعض سيناريوهات الاستخدام (على سبيل المثال لي) إذا تم تمديد سلوك TabView بحيث ، إذا كانت الشاشة واسعة بما يكفي ، فإن علامات التبويب "ستفكك" ، أي أنها ستعرض محتويات جميع علامات التبويب عبر الشاشة. يتيح ذلك "تصميمًا سريع الاستجابة" أنيقًا يعمل بشكل جيد مع الأجهزة اللوحية.
على الهاتف ، أو الكمبيوتر اللوحي المثبت في الوضع الرأسي ، يرى المستخدم منظرًا مبوبًا مع ظهور جزء واحد على الشاشة ، ويمكن الوصول إلى الأجزاء الأخرى عبر إيماءة "علامة تبويب التبديل" ؛ ولكن عندما يتم تدوير الجهاز اللوحي إلى الوضع الأفقي (أو إذا كان على جهاز سطح مكتب بشاشة عريضة بدرجة كافية) ، فإن الشاشة تعرض جميع الأجزاء في نفس الوقت ، بجانب بعضها البعض ، عبر الشاشة.
الرجاء أن يكون الرمز من النوع View بدلاً من ImageSource. نريد إظهار الإشعارات (عادةً كنقاط صغيرة في الزاوية العلوية لأيقونة علامة التبويب)
الرجاء أن يكون الرمز من النوع View بدلاً من ImageSource. نريد إظهار الإشعارات (عادةً كنقاط صغيرة في الزاوية العلوية لأيقونة علامة التبويب)
MhAllan أعتقد أنه سيتم إنجازه باستخدام خصائص TabViewItem ، BadgeText ، BadgeTextColor ، BadgeTextColorSelected ، BadgeBackgroundColor & BadgeBackgroundColorSelected.
لاحظت أن BadgeText تحتوي على نوع خاطئ مدرج ، وأنا متأكد من أنه من المفترض أن يكون String ، وليس Bool.
irongut ، شكرًا على الملاحظة. أعتقد أن هذا تصميم خاطئ أيضًا. لا ينبغي أن يكون هناك شيء مثل BadgeText.
إذا فكرنا في إطار عمل يمكنه تلبية المتطلبات المستقبلية ، فلا ينبغي تقييد المطورين بأنواع مثل String أو ImageSource. إذا فعلنا ذلك ، فسنحصل قريبًا على مشكلات مثل هذه: Make Badge Corner Rounded ، Made Badge Bigger ، Smaller ، Shadow ، Left to the Icon ، Up ، Down ، Right ، أمام الرمز ، خلف الرمز ، Animated ... إلخ. وسيصاب الناس بالإحباط لأنهم لا يستطيعون تخصيصها بسهولة. عند كتابة هذا ، أقوم حاليًا بعمل شارة إعلام تدور حول المحور X مرتين قبل أن تستقر. ترى كيف يمكن أن يكون التخصيص غريب؟
يعد SfTabview منMhAllan Syncfusion مثالًا جيدًا على كيفية القيام بذلك بشكل أكثر ديناميكية.
شكرًا ، لكن من يريد إلقاء نظرة على عمل علقة يتم بيعه بآلاف الدولارات عندما تكون أنظمة التشغيل ولغات البرمجة والأطر الرائعة مجانية.
لم أقصد أن استخدام Syncfusion. كان مجرد القول إنه مثال جيد لرؤية وإلهام كيف فعلوا ذلك. إلى جانب ذلك ، فإنها تقدم مجانًا للعملاء الأفراد الذين يدفعون فقط للشركات الكبيرة التي تزيد إيراداتها عن مليون دولار. صدقوني أنهم يتقدمون بخطوتين على Xamarin نفسه. لا يمكننا حتى الحصول على Collection / ListView مناسبة هنا لأشهر ولسنوات.
أوافق على أن TabViewItem ككل يجب أن يكون أكثر أو أقل مجرد ContentView حيث يمكننا وضع أي طريقة عرض نريدها داخل عناصر علامة التبويب. إن عملية القيام بذلك ، تقصرنا على تنفيذ طرق عرض علامات التبويب بالطريقة التي تصورتها ، وليس بالطريقة التي نريدها بها. إذا كنت تريد عرض علامة تبويب "سهل الاستخدام" بمظهر افتراضي ، فيمكنك فقط إنشاء فئة SimpleTabItemView
، والتي يمكن للأشخاص استخدامها كعرض لعناصر علامة التبويب الخاصة بهم ، مع السماح لنا بتنفيذ الشكل والمظهر من خلال وجهات نظرنا المخصصة.
أوافق على أن TabViewItem ككل يجب أن يكون أكثر أو أقل مجرد ContentView حيث يمكننا وضع أي طريقة عرض نريدها داخل عناصر علامة التبويب. إن عملية القيام بذلك ، تقصرنا على تنفيذ طرق عرض علامات التبويب بالطريقة التي تصورتها ، وليس بالطريقة التي نريدها بها. إذا كنت تريد عرض علامة تبويب "سهل الاستخدام" بمظهر افتراضي ، فيمكنك فقط إنشاء فئة
SimpleTabItemView
، والتي يمكن للأشخاص استخدامها كعرض لعناصر علامة التبويب الخاصة بهم ، مع السماح لنا بتنفيذ الشكل والمظهر من خلال وجهات نظرنا المخصصة.
أعتقد أنه من الجيد وجود بعض القيود من أجل التشغيل المستقر
أعتقد أنه من الجيد وجود بعض القيود من أجل التشغيل المستقر
لا يزال بإمكانك الحصول على عرض علامة التبويب الافتراضي من أجل "عملية مستقرة" سهلة الاستخدام. لا يوجد سبب لتقييد العرض بالكامل.
يتم نقل هؤلاء إلى Xamarin Community Toolkit في الوقت الحالي
التعليق الأكثر فائدة
irongut ، شكرًا على الملاحظة. أعتقد أن هذا تصميم خاطئ أيضًا. لا ينبغي أن يكون هناك شيء مثل BadgeText.
إذا فكرنا في إطار عمل يمكنه تلبية المتطلبات المستقبلية ، فلا ينبغي تقييد المطورين بأنواع مثل String أو ImageSource. إذا فعلنا ذلك ، فسنحصل قريبًا على مشكلات مثل هذه: Make Badge Corner Rounded ، Made Badge Bigger ، Smaller ، Shadow ، Left to the Icon ، Up ، Down ، Right ، أمام الرمز ، خلف الرمز ، Animated ... إلخ. وسيصاب الناس بالإحباط لأنهم لا يستطيعون تخصيصها بسهولة. عند كتابة هذا ، أقوم حاليًا بعمل شارة إعلام تدور حول المحور X مرتين قبل أن تستقر. ترى كيف يمكن أن يكون التخصيص غريب؟