מפצל הרשת (GridSplitter)

כפי שראיתם במאמרים הקודמים, לוח הרשת מקל על חלוקת המקום הזמין לתאים נפרדים. בעזרת ההגדרות לשורות ועמודות תוכלו להחליט בקלות כמה מקום תתפוס כל שורה או עמודה, אבל מה אם תרצו לאפשר למשתמש לשנות זאת? כאן נכנס למשחק פקד מפצל הרשת GridSplitter.

משתמשים במפצל הרשת פשוט על ידי הוספה שלו לשורה או עמודה ברשת, עם הקצאה של מספיק מקום בשבילו, למשל חמישה פיקסלים. כך הוא יאפשר למשתמש לגרור אותו מצד לצד או למעלה למטה, תוך כדי שינוי הגודל של השורה או העמודה בכל אחד מצדדיו. הנה דוגמה:

<Window x:Class="WpfTutorialSamples.Panels.GridSplitterSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridSplitterSample" Height="300" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>
        <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
        <TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
    </Grid>
</Window>

כפי שניתן לראות, פשוט יצרתי רשת עם שתי עמודות ברוחב שווה, ועמודה ברוחב חמישה פיקסלים באמצע. כל אחד מהצדדים הוא פשוט פקד טקסט TextBlock כדי להדגים את הנקודה. כפי שניתן לראות מצילומי המסך, מפצל הרשת מתוצג כקו מפריד בין שתי העמודות וברגע שהעכבר נמצא מעליו, הסמן משתנה כדי לשקף את יכולתו לשנות את הגודל שלו.

מפצל רשת אופקי

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

<Window x:Class="WpfTutorialSamples.Panels.GridSplitterHorizontalSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridSplitterHorizontalSample" Height="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="5" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock>
        <GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" />
        <TextBlock Grid.Row="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock>
    </Grid>
</Window>

כפי שניתן לראות, פשוט שיניתי את העמודות לשורות ובמפצל הרשת, הגדרתי גובה במקום רוחב. מפצל הרשת עושה את השאר בעצמו, אך במקרה שהוא לא, ניתן להשתמש עליו בתכונה כיוון שינוי הגודל ResizeDirection כדי לאלץ אותו לעבוד במצב של שורות או עמודות.