Yohan Jasdid's Blog & Stories » Bits

Caliburn y Silverlight ejemplo sencillo..

yohan.jasdid — Fri, 18 Jun 2010 22:34:02 +0000

Estos ultimos dias he estado checando Caliburn (MVVM framework) debido a la posibilidad de trabajar con el en un futuro cercano, asi que he decidido postear un muy parecido ejemplo al que publique hace poco donde trabajaban un expander y un splitter de manera conjunta, ahora como estoy utilizando Silverlight pues voy a deberles el expander ya que al parecer ese control no es soportado por esta tecnologia tal vez en el Silverlight Toolkit venga uno pero ese sera un tema para despues..

Caliburn me ha dejado impresionado con la cantidad de cosas que puedes hacer con tan poco codigo debido a la manera que esta diseniado el framework practicamente te permite enlazar controles y eventos y un monton de cosas que hace por ti detras del telon, lo unico malo es que la documentacion no es muy extensa y no existen tantas aplicaciones como ejemplo o quickstarts (como PRISM por ejemplo) asi que habra que contribuir con un granito de arena en la promocion de este excelente framework.

Bueno para empezar debemos crear un nuevo proyecto de tipo Silverlight, yo estoy utilizando el VS2010 y el Silverlight 4 que es una instalacion separada, una vez creado este proyecto y configurado automaticamente por Visual Studio removemos el control MainWindow.xaml y lo reemplazamos por ShellView.xaml que sera nuestro contenedor de contenido, a continuacion lo configuramos de la siguiente manera en el App.xaml principal para soportar Caliburn,

App.xaml

Y a continuacion modificamos el code behind para que derive de la clase CaliburnApplication,
App.xaml.cs

using ExpanderAndSplitter.Caliburn.ViewModels;
using Caliburn.PresentationFramework.ApplicationModel;

namespace ExpanderAndSplitter.Caliburn
{
     public partial class App :  CaliburnApplication
    {

        public App()
        {
            InitializeComponent();
        }

        /// 
        /// Creating the root view model of the app, the shell
        /// 
        /// Root view model (shell)
        protected override object CreateRootModel()
        {
            return new ShellViewModel();
        }

     }
}

En los pasos anteriores definimos la applicacion como un applicacion Caliburn y a continuacion hacemos Override al CreatRootModel() donde le diremos a Caliburn cual es el objeto de la vista que queremos como Root object o sea como contenedor principal de la aplicacion, cabe mencionar que caliburn es orientado a modelos y majena mucho el concepto de convenciones por lo que el framework detras del telon hara una serie de comprobaciones para ubicar la vista que pertenece al “ViewModel” que especificamos como contenedor principal en el Override por lo que no tendremos que hacer nada especial para que la vista de tal modelo este bindeada al modelo, MAGIA PURA!!!

ShellViewModel.cs

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Caliburn.Core;
using System.Collections.ObjectModel;
using ExpanderAndSplitter.Caliburn.Models;

namespace ExpanderAndSplitter.Caliburn.ViewModels
{
    public class ShellViewModel : PropertyChangedBase
    {

        #region Fields

        private GridLength _masterRowHeight = new GridLength(1, GridUnitType.Star);
        private GridLength _splitterRowHeight = new GridLength(0);
        private GridLength _detailRowHeight = new GridLength(1, GridUnitType.Auto);

        public ObservableCollection _masterItems = null;
        public ObservableCollection _detailItems = null;

        #endregion // Fields

        public ShellViewModel()
        {
            MasterRowHeight = new GridLength(1, GridUnitType.Star);
            SplitterRowHeight = new GridLength(20);
            DetailRowHeight = new GridLength(1, GridUnitType.Star);

            MasterItems = new ObservableCollection();
            DetailItems = new ObservableCollection();

            for (int i = 0; i < 1000; i++)
            {
                ItemModel masterIM = new ItemModel("Master Item Dummy " + i.ToString(), i.ToString());
                ItemModel detailIM = new ItemModel("Detail Item Dummy " + i.ToString(), i.ToString());

                ItemViewModel masterIVM = new ItemViewModel(masterIM);
                ItemViewModel detailIVM = new ItemViewModel(detailIM);

                MasterItems.Add(masterIVM);
                DetailItems.Add(detailIVM);
            }

        }

        #region Properties

        public GridLength MasterRowHeight
        {
            get { return _masterRowHeight; }
            set
            {
                _masterRowHeight = value;
                NotifyOfPropertyChange("MasterRowHeight");
            }
        }

        public GridLength SplitterRowHeight
        {
            get { return _splitterRowHeight; }
            set
            {
                _splitterRowHeight = value;
                NotifyOfPropertyChange("SplitterRowHeight");
            }
        }

        public GridLength DetailRowHeight
        {
            get { return _detailRowHeight; }
            set
            {
                _detailRowHeight = value;
                NotifyOfPropertyChange("DetailRowHeight");
            }
        }

        public ObservableCollection MasterItems
        {
            get { return _masterItems; }
            set
            {
                _masterItems = value;
                NotifyOfPropertyChange("MasterItems");
            }
        }

        public ObservableCollection DetailItems
        {
            get { return _detailItems; }
            set
            {
                _detailItems = value;
                NotifyOfPropertyChange("DetailItems");
            }
        }

        #endregion // Properties

    }
}

Siguiendo las convenciones definidas por el framework por default sabemos que las vistas deberan estar situadas en una carpeta llamada Views, los ViewModels al igual deberan estar en su carpeta llamada ViewModels, siendo todo esto configurable, ademas con el codigo fuente podemos definir nuestras propias convenciones

ShellView.xaml

ItemModel.cs

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace ExpanderAndSplitter.Caliburn.Models
{
    public class ItemModel
    {

        public ItemModel(string name, string id)
        {
            this.Name = name;
            this.ID = id;
        }

        public string Name
        {
            get;
            set;
        }

        public string ID
        {
            get;
            set;
        }

    }
}

Al final la aplicacion luce casi igual que la del post pasado solo que utilizando Caliburn y Silverlight y a excepcion que no se tuvo que utilizar codigo para especificar la relacion entre vista y view model ya que caliburn se encarga de todo esto y muchisimo mas.

Mas adelante si tengo tiempo publicare algo relacionado con los Comandos, Triggers, Efectos y un monton de cosas que puedes aprovechar con caliburn de una manera sencilla, espero les haya gustado y no duden en dejar un comentario pues tal vez hize algo mal ya que apenas son mis inicios con Caliburn.

Puedes bajar el codigo fuente completo y el proyecto del siguiente enlace: ExpanderAndSplitter.Caliburn

Saludos!
YR

WPF Expander y Splitter trabajando juntos..

yohan.jasdid — Fri, 11 Jun 2010 23:19:40 +0000

Bueno aqui dejo publicado la solucion de un problemita que recientemente tuve haciendo que funcionarian juntos un Expander y un splitter bueno la meta final era tener 2 expanders separados por 1 splitter y que cada expander contuviera algun tipo de grids o incluso una vista con este aproach ya se puede jugar con lo que uno quiera poner en cada region,

Yo anduve buscando algo similar y no pude encontrar mucho al respecto asi que aqui dejo mi solucion y espero que a alguien pueda servirle..

Aqui tenemos el XAML con el codigo que contiene al expander y al splitter o mas bien dos expander conteniendo un grid cada uno separados por un splitter..

Y su respectivo code behind que se encarga de hacer las operaciones correspondientes de tamanio para que estos controles funcionen armoniosamente uno con el otro..

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

namespace ExpanderAndSplitter
{
    /// 
    /// Interaction logic for MainWindow.xaml
    /// 
    public partial class MainWindow : Window
    {

        #region Fields

        private static double _oldMasterHeight = 1;
        private static double _oldDetailHeight = 1;

        #endregion // Fields

        #region Properties

        public GridLength MasterRowHeight
        {
            get { return (GridLength)GetValue(MasterRowHeightProperty); }
            set { SetValue(MasterRowHeightProperty, value); }
        }

        // Using a DependencyProperty as the backing store for MasterRowHeight.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty MasterRowHeightProperty =
            DependencyProperty.Register("MasterRowHeight", typeof(GridLength), typeof(MainWindow), new UIPropertyMetadata(new GridLength(1, GridUnitType.Star)));

        public GridLength SplitterRowHeight
        {
            get { return (GridLength)GetValue(SplitterRowHeightProperty); }
            set { SetValue(SplitterRowHeightProperty, value); }
        }

        // Using a DependencyProperty as the backing store for SplitterRowHeight.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty SplitterRowHeightProperty =
            DependencyProperty.Register("SplitterRowHeight", typeof(GridLength), typeof(MainWindow), new UIPropertyMetadata(new GridLength(0)));

        public GridLength DetailRowHeight
        {
            get { return (GridLength)GetValue(DetailRowHeightProperty); }
            set { SetValue(DetailRowHeightProperty, value); }
        }

        // Using a DependencyProperty as the backing store for DetailRowHeight.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty DetailRowHeightProperty =
            DependencyProperty.Register("DetailRowHeight", typeof(GridLength), typeof(MainWindow), new UIPropertyMetadata(new GridLength(1, GridUnitType.Auto)));

        public ObservableCollection MasterItems
        {
            get;
            set;
        }

        public ObservableCollection DetailItems
        {
            get;
            set;
        }

        #endregion // Properties

        #region Constructors

        public MainWindow()
        {
            InitializeComponent();

            MasterItems = new ObservableCollection();
            DetailItems = new ObservableCollection();

            for (int i=0; i<1000; i++)
            {
                MasterItems.Add(new DummyItem("Master Dummy " + i.ToString(), i.ToString()));
                DetailItems.Add(new DummyItem("Detail Dummy " + i.ToString(), i.ToString()));
            }
        }

        #endregion // Constructors

        #region Events

        private void MasterExpander_Expanded(object sender, RoutedEventArgs e)
        {
            DoHandleExpandCollapse();
        }

        private void MasterExpander_Collapsed(object sender, RoutedEventArgs e)
        {
            if (DetailExpander.IsExpanded)
            {
                _oldMasterHeight = MasterRowHeight.Value;
                _oldDetailHeight = DetailRowHeight.Value;
            }
            DoHandleExpandCollapse();
        }

        private void DetailExpander_Expanded(object sender, RoutedEventArgs e)
        {
            DoHandleExpandCollapse();
        }

        private void DetailExpander_Collapsed(object sender, RoutedEventArgs e)
        {
            if (MasterExpander.IsExpanded)
            {
                _oldMasterHeight = MasterRowHeight.Value;
                _oldDetailHeight = DetailRowHeight.Value;
            }
            DoHandleExpandCollapse();
        }

        private void MasterGrid_Loaded(object sender, RoutedEventArgs e)
        {
            if (MasterGrid.ItemsSource == null)
                MasterGrid.ItemsSource = MasterItems;
        }

        private void DetailGrid_Loaded(object sender, RoutedEventArgs e)
        {
            if (DetailGrid.ItemsSource == null)
                DetailGrid.ItemsSource = DetailItems;
        }

        private void MainContainer_Loaded(object sender, RoutedEventArgs e)
        {
            MainContainer.DataContext = this;
        }

        #endregion // Events

        #region Helpers

        private void DoHandleExpandCollapse()
        {
            if (MasterExpander == null || DetailExpander == null)
                return;

            SplitterRowHeight = new GridLength(0);
            if (MasterExpander.IsExpanded && DetailExpander.IsExpanded)
            {
                MasterRowHeight = new GridLength(_oldMasterHeight, GridUnitType.Star);
                DetailRowHeight = new GridLength(_oldDetailHeight, GridUnitType.Star);
                SplitterRowHeight = new GridLength(20);
                return;
            }

            if (MasterExpander.IsExpanded)
                MasterRowHeight = new GridLength(1, GridUnitType.Star);
            else
                MasterRowHeight = new GridLength(1, GridUnitType.Auto);

            if (DetailExpander.IsExpanded)
                DetailRowHeight = new GridLength(1, GridUnitType.Star);
            else
                DetailRowHeight = new GridLength(1, GridUnitType.Auto);
        }

        #endregion // Helpers

    }

    public class DummyItem
    {
        public DummyItem(string name, string id)
        {
            this.Name = name;
            this.ID = id;
        }
        public string Name
        {
            get;
            set;
        }
        public string ID
        {
            get;
            set;
        }
    }
}

Al final asi es como luce la solucion:

La solucion ejemplo esta hecha con Visual Studio 2010 y el codigo fuente lo puedes bajar del siguiente link ExpanderAndSplitter.

Enjoy!
Yohan Rodriguez

OutOfMemory exception

yohan.jasdid — Mon, 12 Oct 2009 19:37:28 +0000

Bueno, pues ultimamente he estado perdiendo mucho tiempo en mi trabajo por este tipo de errores, que mas que error pues creo que es un poco obvio que necesito mas memoria en mi PC,

Bueno tal vez se deba a que tengo siempre abierto 3 o 4 instancias del Visual Studio 2008, itunes, Google Chrome (unas 5 instancias), Messenger, Skype, Sql Server 2005, Blend 3, Outlook, y el antivirus chafa que me pusieron que se pone a escanear la computadora como burro sin mecate!

Pues yo la verdad considero que lo que regularmente tengo abierto al mismo tiempo cualquier programador podria usar esa misma cantidad de programas al mismo tiempo si no es que mucho mas pero bueno, por lo visto estoy corriendo vista y casi cada vez que compilo sale este error molesto el cual desaparece si cierro y vuelvo a abrir el proyecto en VS2008

Saludos!

Primeros pasos con WPF,

yohan.jasdid — Sun, 09 Nov 2008 03:48:42 +0000

Hoy sabado me di un tiempo para investigar un poco sobre WPF ya que me acaban de asignar a un proyecto bastannnnnte interesante y estare utilizando tecnologias mas nuevas como el framework 3.0 y 3.5 por lo que me di un espacio para investigar un poco,

Al final del dia (bueno todavia no se acaba jejej) he logrado comprender en un buen porcentaje el manejo de XAML asi como la creacion del mismo desde dentro de C# y la flexibilidad que esto significa, proximamente espero darme otro tiempo para hacer unas pruebas de estos mismos XAML’s con Silverlight y colgarlos a la web esperemos que tenga un tiempesillo jej..

No podia faltar el clasico hello WPF

Cabe mencionar que estos ejemplos los lei en un buen libro que me encontre por ahi llamado windows presentation foundation unleashed

Y el ejemplo que alimenta a mi ego jejej la verdad que estos combos enriquecidos y en general cualquier tipo de control son tremendamente flexibles!