XAML Layouts

Merhabalar,
 bu yazımızda xaml kökenli tasarımsal yerleştirmelerden bahsedeceğiz istenilen tasarımı sağlam için Layoutları anlamak gerçekten önemli ya da dinamik bir yapıya sahip olan datalar için,örneğin bir çok itemden oluşan bir listbox'ınız var fakat her itemin boyutu aynı değil o zaman  nasıl bir layout kullanırdıınız ?

İşte bu soruların cevabını bu yazımızda cevaplayacağız,öncelikle üç çeşit temel layout olduğundan bahsedelim.
1.Grid
2.Canvas
3.StackPanel

Bun temel elemanlara songünlerde WrapPanel de eklendi ,Wrap Panel ile ilgili yazımı daha önceki blog kaydımdan bulabilirisiniz.

Bir tasarıma başlarken daha önce soylediğim gibi ilk düşünmeniz gereken şey tasarım absolute mi ? yani içerik elemanları sabit mi yoksa dynamic mi ? tasarım elemanlarının genişliği ya da boyu içeriğe göre değişebilir mi ?

 Eğer cevabınız evet ise Dikey ve Yatay olarak ayarlayabileceğiniz stack paneli kullanmanızı öneririm.
Aşagıda bir ekran görüntüsü ve xaml kodu ile ne demek istediğimi daha net açıklayacağım:

Bu gönderide kullanıcı text olarak istediği uzunluğu girebilir ve tag yer alanı vs. de uzun olabilir dolayısı ile applicaiton bar buttonu hiza olarak aldığımızda bir gönderi boyunun her zaman aynı olamayacağını alta doğru kayabileceğini anlayabiliriz  ben bu tasarımı tamamen stack pannellerle yaptım, yer yer yatay ve dikey stack panel kullandım ve tamamen dinamik bir tasarım oluşturmuş oldum.

<ListBox x:name ="ListBox1">

    <DataTemplate>

        <StackPanel>

            <StackPanel Height="auto" Background="White">

                <StackPanel  Orientation="Horizontal"  >

                    <Image x:Name="userthumb" Source="{Binding UserThumb}"    Height="45" Width="45"  Tap="userthumb_Tap" />

                    <TextBlock x:Name="username" Text="{Binding FullName}" Padding="4 0" Foreground="#83C4E4" FontSize="22" Width="310" FontWeight="Bold"/>

                    <TextBlock x:Name="time" Foreground="#767A7F" Text="{Binding PTime}" Padding="4 0" TextAlignment="Right"  Width="70"/>

                    <Image x:Name="clock_img"   Source="images\clock.png"   Height="20" Width="20" Margin="0 -15 0 0"/>

                </StackPanel>

                <Image x:Name="PostImage" Visibility="Visible"  Source="{Binding PostImage}"

                                        </Image>

                    <TextBlock x:Name="bosluk1" Height="5"/>

                    <Border Background="#3F7CB2"  HorizontalAlignment="Right" >

                        <TextBlock x:Name="price" Foreground="White" Text="{Binding PRICEFull}"  Padding="3 6"  TextAlignment="Right"  Width="auto"/>

                    </Border>

                    <TextBlock x:Name="postText" Text="{Binding SharedText}" Foreground="Black"  TextWrapping="Wrap" Height="auto" Width="430"/>

                    <TextBlock x:Name="bosluk2" Height="5"/>

                    <StackPanel  Orientation="Horizontal"  >

                        <TextBlock x:Name="bosluk" Width="15"/>

                        <Border Background="#3F7CB2"  HorizontalAlignment="Left" >

                            <TextBlock x:Name="tagarea" Foreground="White" Text="{Binding Tags}" FontSize="20"  Padding="1 2" TextAlignment="Left"  Width="auto"  Hold="tagarea_Hold" Tap="tagarea_Tap"/>

                        </Border>

                    </StackPanel>

                    <StackPanel  Orientation="Horizontal"  >

                        <TextBlock x:Name="bosluk6" Width="15"/>

                        <Image x:Name="location_img"   Source="images\location.png"  Height="30" Width="30" />

                        <TextBlock x:Name="location" Foreground="#767A7F" Text="{Binding Location}" Padding="4 8 0 0" />

                    </StackPanel>

                    <StackPanel  Orientation="Horizontal" Background="White"  >

                        <TextBlock x:Name="bosluk5" Width="55"/>

                        <Image x:Name="like_img"   Source="{Binding LikedImage}"  Height="50" Width="50"  Tap="like_img_Tap" />

                        <TextBlock x:Name="like_count" Foreground="#767A7F" Text="{Binding LikeCount}" Padding="0 10 0 0"  Width="80"/>

                        <Image x:Name="dislike_img"   Source="{Binding DisLikedImage}"   Height="50" Width="50"  Tap="dislike_img_Tap" />

                        <TextBlock x:Name="dislike_count" Foreground="#767A7F" Text="{Binding DislikeCount}" Padding="0 10 0 0"  Width="96"/>

                        <Image x:Name="comment_img"   Source="{Binding CommentedImage}"  Height="50" Width="50"  Tap="comment_img_Tap"  />

                        <TextBlock x:Name="comment_count" Foreground="#767A7F" Text="{Binding CommentCount}" Padding="0 10 0 0"  Width="101"/>

                    </StackPanel>

            </StackPanel>

            <StackPanel Height="10"/>

        </StackPanel>

    </DataTemplate>

</ListBox>

Canvasdan bahsedecek olursak sabit pozisyonlarda kalmasını istediğiniz tsarımsal ögeleriniz varsa Canvas sizin için biçilmiş kaftan örneğin aşagıdaki resimde kullanıcı resmi adı vb. alanlar her zaman o pozisyonda olmalı,kullanıcı ismi yazı genişliği artabilir ama her zaman x,y pozisyonundan başlamalıdır.

Grid ise bize kolonları ve satırları olan bir yapı sunar ,tablolu bir yapı kurmak istiyorsanız ya da tasarımsal ayrımlar yapmak istiyorsanız grid kullanıp satır veya stun ataması yapmanızı öneririm aşagıdaki örneği de
http://msdn.microsoft.com/en-us/library/windows/apps/hh465337.aspx  'dan alıyorum:

<Grid Margin="12,0,12,0">

  <Grid.RowDefinitions>
    <RowDefinition Height="auto" />
    <RowDefinition />
    <RowDefinition Height="auto" />
  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>

  <TextBox Text="1st row 1st column" FontSize="60" Grid.Column="0" Grid.Row="0" />
  <TextBox Text="3rd row 1st column" FontSize="60" Grid.Column="0" Grid.Row="2" />

  <Button Content="1st row 2nd column" FontSize="60" Grid.Column="1" Grid.Row="0" />
  <Button Content="3rd row 2nd column" FontSize="60" Grid.Column="1" Grid.Row="2" />

</Grid>

teşekkürler.