none
Añadir imagenes a los Nodos del TreeView RRS feed

  • Pregunta

  • Buenas, he visto varios post sobre esto pero ninguno me funciona cuando lo adapto a mi código. Podrian ayudarme???
    Quiero añadir iconos a cada uno de los nodos de mi TreeView. Los iconos siguen un orden, es decir, una imagen diferente por cada rama del nodo.
    No se si me explico :$

    Aqui les dejo mi código aver si pueden ayudarme :P

     

     public TreeViewTemplate GetDimensions(string cubename)
        {
          List<DimensionInfo> result = new List<DimensionInfo>();
    
          CubeHelper cube = new CubeHelper(strConn);
          cube.OpenConnection();
    
          CubeDef sepcube = CubeHelper.GetCubeByName(cubename, cube.Connection.Cubes);
    
          List<Dimension> lstDimension = CubeHelper.CubesDimension(sepcube);
          TreeViewTemplate[] Dimensions = new TreeViewTemplate[lstDimension.Count];
          int a = 0;
          foreach (Dimension dimensions_ in lstDimension)
          {
            HierarchyCollection lstHerarchies = dimensions_.Hierarchies;
            TreeViewTemplate [] LHerarchies = new TreeViewTemplate[dimensions_.Hierarchies.Count];
            int b=0;
            
            foreach (Hierarchy herarchies in lstHerarchies)
            {
              LevelCollection lstLevels = herarchies.Levels;
              TreeViewTemplate[] LLevels = new TreeViewTemplate[herarchies.Levels.Count];
              int c = 0;
    
              foreach (Level levels_ in lstLevels)
              {
                           LLevels[c] = new TreeViewTemplate(levels_.Name);
                c++;
    
              }
    
              LHerarchies[b] = new TreeViewTemplate(herarchies.Name, LLevels);
              b++;
            }
            Dimensions[a] = new TreeViewTemplate(dimensions_.Name, LHerarchies);
            a++;
          }
          cube.CloseConnection();
          return new TreeViewTemplate("Dimensiones", Dimensions);
    
        }
      }
    Muchas gracias de antemano :))))))))))))
    miércoles, 19 de mayo de 2010 14:29

Respuestas

  • Hola charles.

    He estado liado reinstalandome todo el SO, ya que comenzaba a tener problemas.

    Como dice Corsario tienes que hacer uso de estilos, mas concretamente de plantillas de datos para los items, como este tema es muy amplio y complejo, te voy a poner un ejemplo de un codigo que tenia, modificado para lo que buscas y te lo adaptas a tu gusto.

    En lugar de programar la plantilla desde c#, yo la creo en xaml ya que es mucho mas facil de mantener y modificarla al gusto.

    en el ejemplo creo una aplicacion silverlight, he usado la version 4, pero deberia de funcionar en la 3 tambien.

    el codigo xaml principal quedaria de esta forma:

     

    <UserControl x:Class="TreeViewHierarchical.MainPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
     xmlns:local="clr-namespace:TreeViewHierarchical"
     mc:Ignorable="d"
     d:DesignHeight="242" d:DesignWidth="400" >
    
     <UserControl.Resources>
    
     	<sdk:HierarchicalDataTemplate x:Key="DataTemplate1" ItemsSource="{Binding Products}">
    
     		<!-- Especificar la plantilla para los items de los productos individuales
        que estan en la categoria 'MarkCategory'-->   
     		<sdk:HierarchicalDataTemplate.ItemTemplate>
     			<DataTemplate>
         <StackPanel Orientation="Horizontal">
          <Image Height="16" Width="16" Source="{Binding ProductImage}" />
          <TextBlock Text="{Binding ProductName}" d:LayoutOverrides="Width" />
         </StackPanel>     
     			</DataTemplate>
     		</sdk:HierarchicalDataTemplate.ItemTemplate>
    
     		<!-- Representar la categoria del producto mostrando su valor y su imagen -->   
     		<StackPanel Orientation="Horizontal">
        <Image Height="16" Width="16" Source="{Binding MarkImage}" Stretch="Fill" />
        <TextBlock FontWeight="Bold" Text="{Binding Mark}" d:LayoutOverrides="Width" />
     		</StackPanel>
    
     	</sdk:HierarchicalDataTemplate>
    
     </UserControl.Resources>
    
    
     <Grid x:Name="layautRoot" Margin="0,0,0,0">
     	<Grid.RowDefinitions>
     		<RowDefinition Height="0.831*"/>
     		<RowDefinition Height="0.169*"/>
     	</Grid.RowDefinitions>
        
      <!-- Crear un TreeView, y añadir la fuente de datos para sus items de la coleccion 'MarkCategory' -->
      <sdk:TreeView Name="TreeView1" ItemTemplate="{StaticResource DataTemplate1}" >
       
       <!-- especificar los datos que seran mostrados 
       HACK: mirar constructor de la clase para mas informacion -->
       <local:MarkCategory Mark="Danone" MarkImage="Images/barco2.png">
        <local:MarkCategory.Products>
         <local:Product ProductName="Leche" ProductImage="Images/barco1.png" />
         <local:Product ProductName="Azucar" ProductImage="Images/barco1.png" />
         <local:Product ProductName="Pizza" ProductImage="Images/barco1.png" />
        </local:MarkCategory.Products>
       </local:MarkCategory>
    
       <local:MarkCategory Mark="Nestle" MarkImage="Images/barco2.png">
        <local:MarkCategory.Products>
         <local:Product ProductName="Nocilla" ProductImage="Images/barco1.png" />
         <local:Product ProductName="Mantequilla" ProductImage="Images/barco1.png" />
        </local:MarkCategory.Products>
       </local:MarkCategory>
       
      </sdk:TreeView>  
     </Grid> 
     
    </UserControl>
    

     

    En la solucion me he creado una carpeta 'Images' con las imagenes a mostrar.

    NOTA: hay que asegurarse de que las imagenes tengan el BuildAction en Resources en las propiedades de las mismas (ya que si no no se incluiran en el paquete).

    y en el codigo .cs tengo las clases que uso como modelos y la clase principal:

     

     public partial class MainPage : UserControl
     {
    
      public MainPage()
      {
       InitializeComponent();
    
       // HACK: este codigo ha sido insertado en el arbol xaml para mostrar un ejemplo 
       // de como realizarlo de la misma forma en xaml:
    
       //ObservableCollection<Product> products = new ObservableCollection<Products>();
       //products.Add(new Product("Leche"));
       //products.Add(new Product("Azucar"));
       //products.Add(new Product("Pizza"));   
    
       //TreeView1.Items.Add(new Mark("Danone", products));
    
       //products = new ObservableCollection<Animal>();
       //products.Add(new Product("Nocilla"));
       //products.Add(new Product("Mantequilla"));   
    
       //TreeView1.Items.Add(new Mark("Nestle", products));
      }
     }
    
    
    
     /// <summary>
     /// Clase para definir marcas de productos
     /// </summary>
     public class MarkCategory
     {  
      /// <summary>
      /// Constructor por defecto de la clase
      /// </summary>
      public MarkCategory() {}
    
      /// <summary>
      /// Constructor de la clase sobrecargado
      /// </summary>
      /// <param name="_mark">nombre de la marca</param>
      /// <param name="_products">Coleccion de productos</param>
      public MarkCategory(string _mark, ObservableCollection<Product> _products)
      {
       Mark = _mark;
       m_products = _products;
      }
    
     #region [Propiedades]
    
      /// <summary>
      /// Propiedad con la marca de productos
      /// </summary>
      public string Mark { get; set; }
    
      /// <summary>
      /// Propiedad para establecer la imagen de una marca
      /// </summary>
      public ImageSource MarkImage { get; set; }
    
      /// <summary>
      /// Propiedad con los productos de la marca
      /// </summary>
      private ObservableCollection<Product> m_products;
      public ObservableCollection<Product> Products
      {
       get
       {
        if (m_products == null)
         m_products = new ObservableCollection<Product>();
        
        return m_products;
       }
      }
    
     #endregion [Propiedades]
    
     }
    
    
     /// <summary>
     /// Clase para definir un producto
     /// </summary>
     public class Product
     {    
      /// <summary>
      /// Constructo por defecto de la clase
      /// </summary>
      public Product() {}
    
      /// <summary>
      /// Constructor sobrecargado de la clase
      /// </summary>
      /// <param name="_name">Nombre del producto</param>
      public Product(string _name)
      {
       ProductName = _name;
      }
    
      /// <summary>
      /// Propiedad para establecer el nombre de un producto
      /// </summary>
      public string ProductName { get; set; }
    
      /// <summary>
      /// Propiedad para establecer la imagen de un producto
      /// </summary>
      public ImageSource ProductImage { get; set; }
     }

     

    y con esto se tiene que mostrar un TreeView con los items enlazados a sus correspondientes modelos.

    En este codigo hay varios conceptos muy utiles a la hora de tenerlos en cuenta en los desarrollos.

    Si no se entiende algo me lo comentas.

     


    Saludos
    David González
    • Propuesto como respuesta CorsarioVasco jueves, 27 de mayo de 2010 13:40
    • Marcado como respuesta charles_02 martes, 1 de junio de 2010 7:56
    jueves, 27 de mayo de 2010 13:31

Todas las respuestas

  • Hola charles

    'TreeViewTemplate' ¿que tipo de objeto es?, ¿el treeView que usas es el predeterminado de WPF o silverlight?


    Saludos
    David González
    miércoles, 19 de mayo de 2010 14:36
  • Buenas David, me creé una plantilla de un TreeView al que llamé TreeViewTemplate y lo creé de tipo Array.

    El TreeView que uso es del silverlight.

    //////////////////////////////////////////

      public class TreeViewTemplate
      {
        public TreeViewTemplate() { }
        public TreeViewTemplate(string caption, params TreeViewTemplate[] myItems)
        {
          Caption = caption;
          ObservableCollection<TreeViewTemplate> itemsObservableCollection = new ObservableCollection<TreeViewTemplate>();
          foreach (var item in myItems)
            itemsObservableCollection.Add(item);
          Items = itemsObservableCollection;

        }
        public string Caption { get; set; }
        public string Expression { get; set; }
        public ObservableCollection<TreeViewTemplate> Items { get; set; }
      }

    /////////////////////////////////

    Muchas gracias por responder, no se si lo que te he puesto te sirve para ayudarme.. Ando un pokito perdidillo :(

    Un saludo ;)))))))))

    jueves, 20 de mayo de 2010 8:23
  • voy a intentarlo, graaaxias ; ))))
    martes, 25 de mayo de 2010 14:23
  • Hola charles.

    He estado liado reinstalandome todo el SO, ya que comenzaba a tener problemas.

    Como dice Corsario tienes que hacer uso de estilos, mas concretamente de plantillas de datos para los items, como este tema es muy amplio y complejo, te voy a poner un ejemplo de un codigo que tenia, modificado para lo que buscas y te lo adaptas a tu gusto.

    En lugar de programar la plantilla desde c#, yo la creo en xaml ya que es mucho mas facil de mantener y modificarla al gusto.

    en el ejemplo creo una aplicacion silverlight, he usado la version 4, pero deberia de funcionar en la 3 tambien.

    el codigo xaml principal quedaria de esta forma:

     

    <UserControl x:Class="TreeViewHierarchical.MainPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
     xmlns:local="clr-namespace:TreeViewHierarchical"
     mc:Ignorable="d"
     d:DesignHeight="242" d:DesignWidth="400" >
    
     <UserControl.Resources>
    
     	<sdk:HierarchicalDataTemplate x:Key="DataTemplate1" ItemsSource="{Binding Products}">
    
     		<!-- Especificar la plantilla para los items de los productos individuales
        que estan en la categoria 'MarkCategory'-->   
     		<sdk:HierarchicalDataTemplate.ItemTemplate>
     			<DataTemplate>
         <StackPanel Orientation="Horizontal">
          <Image Height="16" Width="16" Source="{Binding ProductImage}" />
          <TextBlock Text="{Binding ProductName}" d:LayoutOverrides="Width" />
         </StackPanel>     
     			</DataTemplate>
     		</sdk:HierarchicalDataTemplate.ItemTemplate>
    
     		<!-- Representar la categoria del producto mostrando su valor y su imagen -->   
     		<StackPanel Orientation="Horizontal">
        <Image Height="16" Width="16" Source="{Binding MarkImage}" Stretch="Fill" />
        <TextBlock FontWeight="Bold" Text="{Binding Mark}" d:LayoutOverrides="Width" />
     		</StackPanel>
    
     	</sdk:HierarchicalDataTemplate>
    
     </UserControl.Resources>
    
    
     <Grid x:Name="layautRoot" Margin="0,0,0,0">
     	<Grid.RowDefinitions>
     		<RowDefinition Height="0.831*"/>
     		<RowDefinition Height="0.169*"/>
     	</Grid.RowDefinitions>
        
      <!-- Crear un TreeView, y añadir la fuente de datos para sus items de la coleccion 'MarkCategory' -->
      <sdk:TreeView Name="TreeView1" ItemTemplate="{StaticResource DataTemplate1}" >
       
       <!-- especificar los datos que seran mostrados 
       HACK: mirar constructor de la clase para mas informacion -->
       <local:MarkCategory Mark="Danone" MarkImage="Images/barco2.png">
        <local:MarkCategory.Products>
         <local:Product ProductName="Leche" ProductImage="Images/barco1.png" />
         <local:Product ProductName="Azucar" ProductImage="Images/barco1.png" />
         <local:Product ProductName="Pizza" ProductImage="Images/barco1.png" />
        </local:MarkCategory.Products>
       </local:MarkCategory>
    
       <local:MarkCategory Mark="Nestle" MarkImage="Images/barco2.png">
        <local:MarkCategory.Products>
         <local:Product ProductName="Nocilla" ProductImage="Images/barco1.png" />
         <local:Product ProductName="Mantequilla" ProductImage="Images/barco1.png" />
        </local:MarkCategory.Products>
       </local:MarkCategory>
       
      </sdk:TreeView>  
     </Grid> 
     
    </UserControl>
    

     

    En la solucion me he creado una carpeta 'Images' con las imagenes a mostrar.

    NOTA: hay que asegurarse de que las imagenes tengan el BuildAction en Resources en las propiedades de las mismas (ya que si no no se incluiran en el paquete).

    y en el codigo .cs tengo las clases que uso como modelos y la clase principal:

     

     public partial class MainPage : UserControl
     {
    
      public MainPage()
      {
       InitializeComponent();
    
       // HACK: este codigo ha sido insertado en el arbol xaml para mostrar un ejemplo 
       // de como realizarlo de la misma forma en xaml:
    
       //ObservableCollection<Product> products = new ObservableCollection<Products>();
       //products.Add(new Product("Leche"));
       //products.Add(new Product("Azucar"));
       //products.Add(new Product("Pizza"));   
    
       //TreeView1.Items.Add(new Mark("Danone", products));
    
       //products = new ObservableCollection<Animal>();
       //products.Add(new Product("Nocilla"));
       //products.Add(new Product("Mantequilla"));   
    
       //TreeView1.Items.Add(new Mark("Nestle", products));
      }
     }
    
    
    
     /// <summary>
     /// Clase para definir marcas de productos
     /// </summary>
     public class MarkCategory
     {  
      /// <summary>
      /// Constructor por defecto de la clase
      /// </summary>
      public MarkCategory() {}
    
      /// <summary>
      /// Constructor de la clase sobrecargado
      /// </summary>
      /// <param name="_mark">nombre de la marca</param>
      /// <param name="_products">Coleccion de productos</param>
      public MarkCategory(string _mark, ObservableCollection<Product> _products)
      {
       Mark = _mark;
       m_products = _products;
      }
    
     #region [Propiedades]
    
      /// <summary>
      /// Propiedad con la marca de productos
      /// </summary>
      public string Mark { get; set; }
    
      /// <summary>
      /// Propiedad para establecer la imagen de una marca
      /// </summary>
      public ImageSource MarkImage { get; set; }
    
      /// <summary>
      /// Propiedad con los productos de la marca
      /// </summary>
      private ObservableCollection<Product> m_products;
      public ObservableCollection<Product> Products
      {
       get
       {
        if (m_products == null)
         m_products = new ObservableCollection<Product>();
        
        return m_products;
       }
      }
    
     #endregion [Propiedades]
    
     }
    
    
     /// <summary>
     /// Clase para definir un producto
     /// </summary>
     public class Product
     {    
      /// <summary>
      /// Constructo por defecto de la clase
      /// </summary>
      public Product() {}
    
      /// <summary>
      /// Constructor sobrecargado de la clase
      /// </summary>
      /// <param name="_name">Nombre del producto</param>
      public Product(string _name)
      {
       ProductName = _name;
      }
    
      /// <summary>
      /// Propiedad para establecer el nombre de un producto
      /// </summary>
      public string ProductName { get; set; }
    
      /// <summary>
      /// Propiedad para establecer la imagen de un producto
      /// </summary>
      public ImageSource ProductImage { get; set; }
     }

     

    y con esto se tiene que mostrar un TreeView con los items enlazados a sus correspondientes modelos.

    En este codigo hay varios conceptos muy utiles a la hora de tenerlos en cuenta en los desarrollos.

    Si no se entiende algo me lo comentas.

     


    Saludos
    David González
    • Propuesto como respuesta CorsarioVasco jueves, 27 de mayo de 2010 13:40
    • Marcado como respuesta charles_02 martes, 1 de junio de 2010 7:56
    jueves, 27 de mayo de 2010 13:31
  • David: Ya se te extrañabamos ;-)
    jueves, 27 de mayo de 2010 13:50
  • muxisimas gracias ;)))))
    martes, 1 de junio de 2010 7:56