آموزش WPF (مقدماتی تا پیشرفته)

[Mahdi.Kiani]

کنترل WrapPanel :

کنترل WrapPanel نیز یکی از کنترل های کانتینر می باشد. این کنترل در طراحی واسط کاربری شما نقش زیادی نمی تواند بازی کند. در واقع مواردی که از این کنترل می توان استفاده کرد محدود و در بعضی از کاربرد های خاص به کار می رود.

کنترل WrapPanel عناصر فرزند خود را به دوصورت می تواند تراز بندی کنید. این امر بستگی به خاصیت Orientation از این کنترل دارد. اگر این خاصیت بر روی Horizontal باشد ( حالت پیش فرض horizontal می باشد)، عناصر به صورت سطری و در داخل اولین سطر از این کنترل قرار میگیرند. چنانچه مقدار فضای مورد نیاز برای کنترل های فرزند، بیش از فضای موجود بر روی یک سطر باشد، عناصر فرزند به صورت اتواتیک به سطر بعدی شیفت داده می شوند. این عمل آن قدر تکرار می گردد تا تمامی عناصر بر روی کنترل WrapPanel قرار داده شوند.
به کد زیر توجه کنید :

<Window x:Class="WrapPanel.HorizontalWrapPanel"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="HorizontalWrapPanel" Height="300" Width="300">

  

        <WrapPanel>

            <Button Margin="3" MinWidth="32" MaxWidth="32" MinHeight="32">

            <Button.Background>

                <ImageBrush ImageSource="./Images/add-file.png"></ImageBrush>

            </Button.Background>

            </Button>

        <Button Margin="3" MinWidth="32" MaxWidth="32" MinHeight="32">

            <Button.Background>

                <ImageBrush ImageSource="./Images/copy.png"></ImageBrush>

            </Button.Background>

        </Button>

        <Button Margin="3" MinWidth="32" MaxWidth="32" MinHeight="32">

            <Button.Background>

                <ImageBrush ImageSource="./Images/cut.png"></ImageBrush>

            </Button.Background>

        </Button>

        <Button Height="32" MaxWidth="32" MinHeight="32" MinWidth="32" Width="32">

            <Button.Background>

                <ImageBrush ImageSource="./Images/zoom+.png" />

            </Button.Background>

        </Button>

        <Button Height="32" MaxWidth="32" MinHeight="32" MinWidth="32" Width="32">

            <Button.Background>

                <ImageBrush ImageSource="./Images/zoom-.png" />

            </Button.Background>

        </Button>

        <Button Height="32" MaxWidth="32" MinHeight="32" MinWidth="32" Width="32">

            <Button.Background>

                <ImageBrush ImageSource="./Images/search.png" />

            </Button.Background>

        </Button>

    </WrapPanel>

   

</Window>

این قطعه کد مربوط به پنجره ای است که یک کنترل WrapPanel به عنوان کنترل کانتینر آن قرار داده شده است. درون این کنترل، شش دکمه قرار داده شده است که هر یک دارای خواص مربوط به خودش می باشد. نتیجه حاصل از کد فوق در شکل زیر نشان داده شده است:

همانطور که در شکل نیز مشخص است، عناصر روی کنترل WrapPanel به صورت سطری قرار گرفته اند. حال اگر در زمان اجرا، عرض پنجره فوق کم شود، بعضی از عناصر به سطر بعدی در کنترل WrapPanel شیفت داده می شوند:

حال اگر خاصیت Orientation این کنترل را بر روی Vertical تنظیم کنید، عناصر به صورت ستونی تراز می شوند، ابتدا ستون اول و چنانچه فضای کافی برای قرار گیری عناصر بر روی ستون اول موجود نباشد، بقیه عناصر به ستون بعدی شیفت داده می شوند.
برای اعمال این تغییر کافیست تگ آغازین کنترل WrapPanel را به صورت زیر تغییر دهید :

<WrapPanel Orientation="Vertical">

        <Button Margin="3" MinWidth="32" MaxWidth="32" MinHeight="32">

            <Button.Background>

                <ImageBrush ImageSource="./Images/add-file.png"></ImageBrush>

            </Button.Background>

        </Button>

        <Button Margin="3" MinWidth="32" MaxWidth="32" MinHeight="32">

            <Button.Background>

                <ImageBrush ImageSource="./Images/copy.png"></ImageBrush>

            </Button.Background>

        </Button>

        <Button Margin="3" MinWidth="32" MaxWidth="32" MinHeight="32">

            <Button.Background>

                <ImageBrush ImageSource="./Images/cut.png"></ImageBrush>

            </Button.Background>

        </Button>

        <Button Height="32" MaxWidth="32" MinHeight="32" MinWidth="32" Width="32">

            <Button.Background>

                <ImageBrush ImageSource="./Images/zoom+.png" />

            </Button.Background>

        </Button>

        <Button Height="32" MaxWidth="32" MinHeight="32" MinWidth="32" Width="32">

            <Button.Background>

                <ImageBrush ImageSource="./Images/zoom-.png" />

            </Button.Background>

        </Button>

        <Button Height="32" MaxWidth="32" MinHeight="32" MinWidth="32" Width="32">

            <Button.Background>

                <ImageBrush ImageSource="./Images/search.png" />

            </Button.Background>

        </Button>

    </WrapPanel>

دو شکل زیر نمایی از اجرای کد قبل را با تغییری که در تگ آغازین کنترل WrapPanel داده شده است را نشان می دهد.

یکی از کاربر هایی که از WrapPanel ها می تواند در آن بهره جست، ایجاد کنترل هایی مانند Tool strip می باشد. (البته ابزار های مجزایی برای toolbar ها نیز موجود است).

نکته :
خاصیت دیگری که اکثر کنترل های WPF ، از جمله کنترل WrapPanel دارامی باشند، خاصیت Flow Direction می باشد.
این خاصیت دارای دو مقدار Left To Right و Right To Left می باشد که مقدار پیش فرض آن Left To Right می باشد. این خاصیت جهت تراز بندی کنترل ها را نشان می دهد. بری برخی از زبان ها از جمله زبان فارسی، این خاصیت بسیار پر کاربرد می باشد.

به عنوان مثال می توانیدبا اضافه کردن دستور

FlowDirection="RightToLeft"

یک تگ آغازین کنترل WrapPanel ، ستون آغازین را برای قرار گیری کنترل ها را از سمت راست به چپ تعیین کنید.

موفق باشید