Makale Özeti

Bu yazımızda Silverlight Toolkit ’den faydalanacağız. Amacımızı, basit bir iş uygulamasının temel yapısını/iskeletini oluşturmak ya da TreeView'u daha etkin şekilde kullanabilmek diye tanımlayabiliriz.

Makale

Bu yazımızda Silverlight Toolkit'den faydalanacağız. Amacımızı, basit bir iş uygulamasının temel yapısını/iskeletini oluşturmak ya da TreeView'u daha etkin şekilde kullanabilmek diye tanımlayabiliriz . Sayfamızın sol tarafında bir TreeView, sağ tarafında ise bir UserControl (target) olacak. TreeView' u ana sayfamızın menü seçenekleri için kullanacağız. TreeView ItemSource'u C# kodları ile dinamik olarak istediğimiz yapıda oluşturalım. Bir TreeViewItem seçildiğinde sayfanın sağ tarafında yer alan UserControl? ün içeriği (content) yeniden oluşsun.

Projeyi çalıştırdığımızda aşağıdaki gibi bir ekran görüntüsü elde etmiş olacağız.

Elde edeceğimiz bu sayfanın giriş sayfası olarak Page.xaml isimli UserControl?ü kullanacağız. Application startup? da herhangi bir değişiklik yapmıyoruz..

private void Application_Startup(object sender, StartupEventArgs e)

{

   this.RootVisual = new Page();

}

Gelin C#? da TreeViewItem olarak kullanacağımız Node isimli sınıfımızı oluşturalım.

using System;

using System.Windows.Media.Imaging;

namespace Client

{

   public class Node

   {

       private int id;

       private string name;

       private BitmapImage picture;

       private Node[] childNodes;

       public Node(int id, string name, string pictureUrl, Node[] childNodes)

       {

           this.id = id;

           this.name = name;

           this.picture = new BitmapImage(new Uri(pictureUrl, UriKind.Relative));

           this.childNodes = childNodes;

       }

       public int Id { get { return id; } set { id = value; } }

       public string Name { get { return name; } set { name = value; } }

       public BitmapImage Picture { get { return picture; } set { picture = value; } }

       public Node[] ChildNodes { get { return childNodes; } set { childNodes = value; } }

   }

}

Page.xaml isimli UserControl?de kullanmak üzere bir TreeView?u ToolBox?dan seçerek xaml editöre sürükleyip bırakalım.

Page.xaml içine aşağıdaki xaml kodlarını ekleyelim. TreeView için  Node ve Node?a bağlı hiyerarşik bir yapı kullanacağımızdan HierarchicalDataTemplate kullanmalıyız. Her bir Node için aşağıdaki DataTemplate yapısı geçerli olacaktır. HierarchicalDataTemplate içeriğine dikkat edilecek olursa Image için Picture ve TextBlock için Name özellikleri bağlanmıştır. Ayrıca TextBlock için FontSize'ı 13 olarak belirteceğiz.

<UserControl.Resources>

     <common:HierarchicalDataTemplate x:Key="treeTemplate" ItemsSource="{Binding Path=ChildNodes}">

          <StackPanel Orientation="Horizontal">

              <Image Source="{Binding Path=Picture}"/>

              <TextBlock FontSize="13" Text="{Binding Path=Name}"/>

          </StackPanel>

     </common:HierarchicalDataTemplate>

</UserControl.Resources>

 

Page.xaml içindeki Grid yapımızı da 2 row ve 2 kolondan oluşturacağız. TreeView objemizi Grid'in row=1, column=0 konumuna yerleştirelim. TreeView'umuzun ItemTemplate özelliğine treeTemplate?i static resource olarak bağlayalım. Burada dikkat edilmesi gereken noktalardan biri de, Grid.Row ve Grid.Column özelliğini belirtiyor olmamız. Ayrıca TreeView için SelectedItemChanged event?ı eklemeyi unutmayalım.

Ana sayfa içinde target control olarak kullanacağımız usercontrol?ün xaml kodlarıda aşağıdaki gibi olsun.TreeView'da herhangi bir Node (item) seçildiğinde, Target olarak kullanacağımız UserControl'ün Width ve Height özelliklerini siliyoruz.

<UserControl x:Class="Client.TargetControl"

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

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

    <Grid x:Name="LayoutRoot">

    </Grid>

</UserControl>

 

Oluşturduğumuz TargetControl'e C# ile public bir method ekleyelim. Bu method ile target control'ün content'ini istediğimiz zaman değiştirebileceğiz.

public partial class TargetControl : UserControl

 {

    public TargetControl()

    {

        InitializeComponent();

    }

    public void LoadNewUserControl(UserControl control) {

        this.Content = control;

    }

 }

 

Page.xaml?ın son hali de aşağıdaki gibi olsun. Bu arada Border nesnesini de sayfanın görselliğini arttırması açısından ihmal etmiyoruz.

<UserControl

   x:Class="Client.Page"

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

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

   xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" 

   xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit" 

   xmlns:common="clr-namespace:System.Windows;assembly=System.Windows.Controls.Toolkit"

   xmlns:Client="clr-namespace:Client">

    <UserControl.Resources>

        <common:HierarchicalDataTemplate x:Key="treeTemplate" ItemsSource="{Binding Path=ChildNodes}">

            <StackPanel Orientation="Horizontal">

                <Image Source="{Binding Path=Picture}"/>

                <TextBlock FontSize="13" Text="{Binding Path=Name}"/>

            </StackPanel>

        </common:HierarchicalDataTemplate>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White" >

        <Grid.RowDefinitions>

            <RowDefinition Height="60"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="270"/>

            <ColumnDefinition Width="*"/>

        </Grid.ColumnDefinitions>

 

        <TextBlock Grid.Row="0" Grid.Column="0" Margin="10,10,30,10" FontSize="22" Foreground="Black" Text="Ana Sayfa"/>

        <basics:GridSplitter Grid.Row="1" Background="Blue" Margin="5,12,1,12"/>

 

        <Border Margin="8,2,8,1" Grid.Row="1" Grid.Column="0" CornerRadius="12" BorderBrush="Black" BorderThickness="2">

            <my:TreeView

               x:Name="treeViewMenuler"

               SelectedItemChanged="treeViewMenuler_SelectedItemChanged"

               Margin="8,8,8,8"

               Grid.Row="1" Grid.Column="0"

               ItemTemplate="{StaticResource treeTemplate}"/>

        </Border>

 

        <Border Grid.Column="1" Grid.Row="1" BorderBrush="Black" CornerRadius="12" BorderThickness="2" Margin="2,2,6,2">

            <Client:TargetControl x:Name="targetControl" Background="AliceBlue" Margin="5,5,5,5" Grid.Column="1" Grid.Row="1"/>

        </Border>

 

    </Grid>

</UserControl>

 

Page.xaml.cs'i de aşağıdaki gibi oluşturuyoruz. Dikkat edecek olursak treeViewMenuler.ItemSource 'a yeni bir Node[] nesnesi bağlıyoruz. treeViewmMenuler'in selectedItemChanged event'ında ise artık Node nesnesini elde edebileceğiz.

 

using System.Windows;

using System.Windows.Controls;

 

namespace Client

{

  public partial class Page : UserControl

  {

    public Page()

    {

      InitializeComponent();

      this.Loaded += new RoutedEventHandler(Page_Loaded);

    }

 

    private void Page_Loaded(object sender, RoutedEventArgs e)

    {

      treeViewMenuler.ItemsSource =

          new Node[] {

                     new Node(1,"Menü 1","images/BlueCycle.png",new Node[]{

 

                              new Node(3," Alt Menü","images/GreenCycle.png",null),

                              new Node(4," Alt Menü","images/GreenCycle.png",null) }),

 

                     new Node(2,"Menü 2","images/BlueCycle.png",new Node[]{

 

                              new Node(5," Alt Menü","images/GreenCycle.png",null),

                              new Node(6," Alt Menü","images/GreenCycle.png",null) })

                };

    }

 

    private void treeViewMenuler_SelectedItemChanged

                            (object sender, RoutedPropertyChangedEventArgs<object> e)

    {

      int selectedNodeId = ((Node)e.NewValue).Id;

      switch (selectedNodeId)

      {

        case 1:

          targetControl.LoadNewUserControl(new Menu1Page());

          break;

        case 2:

 

          break;

        // ...

      }

    }

  }

}

TreeView?den Menü 1 seçildiğinde ise ekrana gelecek olan usercontrol?ün xaml kodları aşağıdaki gibidir.

UserControl x:Class="Client.Menu1Page"

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

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

    <Grid x:Name="LayoutRoot" Background="White">

        <TextBlock Margin="15,15" FontSize="13" Text="Menü 1 Seçildi..."></TextBlock>

    </Grid>

</UserControl>

Yeni sınıfların ve image dosyalarının da eklenmesi ile solution explorer aşağıdaki görünüme kavuşmuş oldu.

Kolay gelsin.

Kaynak:

http://www.codeplex.com/Silverlight