کشیدن خط با کنترل Line

اشکال در WPF فقط می توانند درون کانتینرها یا کنترلهای دیگری که از Panel مشتق شده اند  قرار بگیرند.   

کشیدن خط Line  

کلاس Line شما را قادر می سازد بین دو نقطه یک خط رسم کنید.

خاصیتهایی که در رسم دایره به کار می رود

X1 : نقطه شروع افقی

X2 : نقطه پایان افقی

Y1 : نقطه شروع عمودی

Y2 : نقطه پایان عمودی 

   <Canvas Height="230" Width="230">

        <!-- Draws a diagonal line from (10,10) to (50,50). -->

        <Line              

            X1="10" Y1="10"

            X2="50" Y2="50"  

            Stroke="Black"  

            StrokeThickness="4" />

        <!-- Draws a horizontal line from (10,60) to (150,60). -->

        <Line

             X1="10" Y1="60"

             X2="150" Y2="60"

             Stroke="Blue"

             StrokeThickness="10"/>

        <!-- Draws a horizontal line from (20,180) to (200,50). -->

        <Line

            X1="20"  Y1="180"

            X2="200" Y2="50"

            Stroke="Red"

            StrokeThickness="1" />

    </Canvas>

توضیحات بیشتر را در شکل زیر ببینید 

مثال در VB.Net

        Dim myLine As New Line()

        myLine.Stroke = Brushes.LightSteelBlue

        myLine.X1 = 1

        myLine.X2 = 50

        myLine.Y1 = 1

        myLine.Y2 = 50

        myLine.HorizontalAlignment = HorizontalAlignment.Left

        myLine.VerticalAlignment = VerticalAlignment.Center

        myLine.StrokeThickness = 2

        grid1.Children.Add(myLine)

کار با مستطیل ها

 کار با مستطیلها

مطلب  کار با مستطیلها را از کتاب آموزشی Visual Basic.Net نوشته جیمز فاکسل از انتشارات کانون نشر علوم برداشته ام

قبل از اینکه یاد بگیرید که چطور اشکال را رسم کنید ، باید مفهوم یک مستطیل را از آن جهت که مربوط به برنامه نویسی ویژوال  بیسیک می شود، بفهمید. یک مستطیل ضرورتاٌ برای ترسیم یک مستطیل استفاده نمی شود(اگر چه می تواند این طور باشد). بلکه یک مستطیل،ساختاری است که برای نگه داشتن مختصات مرزها که جهت ترسیم یک شکل به کار می رود، استفاده می شود. واضح است که یک مربع یا مستطیل می تواند داخل یک مستطیل جا گیرد، همچنین دایره و بیضی نیز در آن قرار می گیرند.شکل زیر چگونگی محدود شدن اشکال را توسط یک مستطیل نشان می دهد. 

خاصیت Stroke و StrokeThickness و Fill

خاصیتهای Stroke , Fill , StrokeThickness

Stroke : رنگ حاشیه شکل را تعریف می کند

StrokeThickness : ضخامت رنگ حاشیه را تعریف می کند

Fill : رنگی که داخل شکل با آن نقاشی (پر) می شود 

   <StackPanel>

       <Rectangle Margin="10" StrokeThickness="3"  Stroke="Black" Fill="Yellow" Height="40" Width="150" />

        <Rectangle Margin="10" StrokeThickness="10" Stroke="Blue" Fill="Purple" Height="40" Width="150" />       

        <Rectangle Margin="10" StrokeThickness="1"  Stroke="Cyan" Fill="Pink" Height="40" Width="150" />

        <Rectangle Margin="10" StrokeThickness="5"  Stroke="Red" Fill="Gray" Height="40" Width="150" />

        <Rectangle Margin="10" StrokeThickness="0"  Stroke="Green" Fill="Black" Height="40" Width="150" />

    </StackPanel>

خاصیت StrokeDashArray

از این خاصیت برای کشیدن خط به صورت خط چین استفاده می شود مقادیری که درون این آرایه گذاشته می شوند به ترتیب نشان دهنده طول خط کشیدن و فاصله می باشند. 

   <Grid>

        <Line StrokeThickness="3" Stroke="Black" X1="10" X2="200" Y1="20" Y2="20" />

        <Line StrokeThickness="3" StrokeDashArray="3" Stroke="Brown" X1="10" X2="200" Y1="50" Y2="50" />

        <Line StrokeThickness="3" StrokeDashArray="5 2" Stroke="Brown" X1="10" X2="200" Y1="80" Y2="80" />

        <Line StrokeThickness="3" StrokeDashArray="10 2 5 " Stroke="Brown" X1="10" X2="200" Y1="110" Y2="110" />

        <Line StrokeThickness="3" StrokeDashArray="5 3 2 1" Stroke="Brown" X1="10" X2="200" Y1="140" Y2="140" />

        <Line StrokeThickness="3" StrokeDashArray="1 5 5 1 3 " Stroke="Brown" X1="10" X2="200" Y1="170" Y2="170" />

        <Line StrokeThickness="3" StrokeDashArray="1" Stroke="Brown" X1="10" X2="200" Y1="200" Y2="200" />

    </Grid>

برای درک بهتر یکی از این شکلها را بصورت موشکافه در شکل زیر ببینید می کنیم 

همان طور در شکل هم دیدید می توانید هرچند عدد که خواستید درون آرایه قرار دهید و ترتیب کشیدن و نکشیدن رو تنظیم کنید.

نکته:

اگر بخواهید با همین روش یک خط صاف بکشید  آرایه را به صورت StrokeDashArray="1 0" می توانید قرار دهید.

برای کشیدن اشکال پیچیده کانتینر Canvas می تواند انتخاب خوبی باشد چون از موقعیت مطلق(ثابت) برای فرزندانش پشتیبانی می کند

خاصیت VerticalAlignment

خاصیت VerticalAlignment :
این خاصیت ترازبندی (نحوه چیدمان) عمودی نسبت به کنترل پدر را را تعیین می کند
این خاصیت دارای چهار مقدار زیر می باشد :Top : کنترل از سمت بالای کنترل پدر خویش تراز شود.

Bottom : کنترل از سمت پایین کنترل پدر خویش تراز شود

 Center  :کنترل دروسط کنترل پدر خویش تراز شود.

Stretch   :کنترل از تمامی فضای موجود، استفاده کند. 

   <StackPanel Orientation="Horizontal">

        <Button  VerticalAlignment="Bottom" >Bottom</Button>

         <Button VerticalAlignment="Top">Top</Button>     

        <Button VerticalAlignment="Center">Center</Button>

        <Button >Stretch</Button>

    </StackPanel>

نکته : کنترل StackPanel ، به کنترل های فرزند خود به همان مقدار فضا که نیاز دارند، فضا اختصاص می دهد. به همین دلیل اگر نحوه چیدمان عناصر در آن عمودی باشد و بخواهید دستورات مربوط خاصیت VerticalAlignment را با شکل فوق به کار ببرید، تاثیری در چیدمان کنترل ها نخواهد داشت. و برعکس اگر نحوه چیدمان عناصر در کنترل کانتینر StackPanel به صورت افقی باشد،دستورات مربوط به چیدمان افقی تاثیری در چیدمان نخواهد داشت.(بصورت پیش فرض نحوه چیدمان عناصر در StackPanel عمودی(Vertical) می باشد)