WPF Custom Controls Part 10 scrollable TabControl A

14 בMay 2014

תגובה אחת

את הרעיון שאציג בפוסט זה כל מי שעסק בעיצוב אפליקציות מכיר,

יש לי איזור מסויים שמציג סדרת פקדים שכל אחד מפנה לאיזור אחר (כדוגמא קלאסית נדבר על Tab-control), ואין די מקום להציג את כל הטאבים, אז אפשר לערום את הטאבים לשורה כפולה שזה עיצוב מיושן ואפשר גם לנסות את העיצוב שנציג כאן עם שני לחצני פעולה לשני צידי הטאבים שנותנים לנו לגלגל תוכן נעלם של טאבים חסרים שאין לנו די מקום בתצוגה להכיל אותם.

אז הפתרון הפשוט נובע מהרעיון הפשוט שבWPF כל דבר יכול להכיל כל דבר לכן אם פשוט נעטוף Tab-Control באיזשהו ListBox הוריזונטלי הכל יעבוד.

קוד רלוונטי ייראה כך:

<Window.Resources>

        <Style TargetType="TabItem">

            <Setter Property="Width" Value="50"/>

        </Style>

    </Window.Resources>

    <StackPanel>

    <Grid Margin="0,3,0,-3">

        <ScrollViewer CanContentScroll="True" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" Width="200" Name="sc">

                <TabControl>

                    <TabItem Header="a" />

                    <TabItem Header="b" />

                    <TabItem Header="c" />

                    <TabItem Header="d" />

                    <TabItem Header="e" />

                    <TabItem Header="f" />

                    <TabItem Header="g" />

                    <TabItem Header="h" />

                    <TabItem Header="i" />

                    <TabItem Header="j" />

                    <TabItem Header="k" />

                    <TabItem Header="l" />

                    <TabItem Header="m" />

                    <TabItem Header="n" />

                    <TabItem Header="o" />

                    <TabItem Header="p" />

                </TabControl>

        </ScrollViewer>



איפה הבעיה? קודם כל אין לי גישה לטאבים הפינתיים לפחות כרגע,

מה שצריך לעשות בשלב זב זה לאפשר גלילה של תוכן לימין ולשמאל, מה המטרה ? שבגלילה תעבוד בפורמט של טאב טאב , ולא שאחד יהיה גלוי למחצה,

לכן בשלב ראשון נוסיף שני כפתורים שיפנו לScrollViewer דרך השם ויפעליו את הפונקציה המאוד שימושית

ScrollToHorizontialOffset.

מאחר שאנו יודעים במקרה הזה את רוחב הטאבים יהיה זה פשוט לנהל את הגלילה לפי טאבים. ולכן נממש את הקוד הבא:

public partial class MainWindow : Window

    {

        public static int ScrollStepsCount = 0;

        public MainWindow()

        {

            InitializeComponent();

        }


        private void Button_Click(object sender, RoutedEventArgs e)

        {

            ScrollStepsCount++;

            sc.ScrollToHorizontalOffset(ScrollStepsCount * 50);

        }


        private void Button_Click_1(object sender, RoutedEventArgs e)

        {

            ScrollStepsCount--;

            sc.ScrollToHorizontalOffset(ScrollStepsCount * 50);

                                                                             {


זה טוב ויפה אבל, זאת לא כתיבה נכונה. כי גודל הטאבים יכול להיות דינמי, ופניה דרך codeBehind לא תתאים לעקרונות הפיתוח הנכון.

איך עושים את זה כמו שצריך? בונים Custom Control ..

ואת זה נעשה בפוסט הבא.

הוסף תגובה
facebook linkedin twitter email

Leave a Reply

Your email address will not be published. Required fields are marked *

תגובה אחת

  1. xetra2 בJune 2014 ב 9:05

    יפה מאוד.

    הטמענו את הדוגמא בפרוייקט שלנו, הסטייל קצת דפוק אבל סידרנו את זה

    Reply