[WPF] ItemsControl y Canvas

Comentemos la jugada: Tenemos un ItemsControl (o un derivado de él como una ListBox) y queremos posicionar sus elementos dentro de un Canvas.

La definición del ItemsControl puede ser algo parecido a:

<ItemsControl Margin=»5″ Name=»battleField»>

    <ItemsControl.Template>

        <ControlTemplate TargetType=»ItemsControl»>

            <Border BorderBrush=»Aqua» BorderThickness=»1″ CornerRadius=»15″>

                <ItemsPresenter />

            </Border>

        </ControlTemplate>

    </ItemsControl.Template>

    <ItemsControl.ItemsPanel>

        <ItemsPanelTemplate>                      

            <Canvas Width=»500″ Height=»300″ Background=»Yellow»></Canvas>

        </ItemsPanelTemplate>

    </ItemsControl.ItemsPanel>

</ItemsControl>

 Hasta aquí nada especial:

  • Definimos el ControlTemplate para definir que forma tendrá todo el control en sí. En este caso un borde redondeado de un color azul tirando a cyan…
  • Definimos el ItemsPanel, que nos permite especificar que panel usará el control para posicionar sus elementos. En este caso queremos posicionar los elementos en coordenadas X e Y absolutas, por lo que ponemos un Canvas de un amarillo chillón que echa para atrás.

Ahora especificamos el ItemTemplate, que indica como renderizar cada uno de los elementos que contiene el control:

 

<ItemsControl.ItemTemplate >

    <DataTemplate>

        <Button Width=»60″ Height=»25″ Content=»{Binding Path=UnitName}»

               Canvas.Left=»{Binding Path=PosX}» Canvas.Top=»{Binding Path=PosY}»>

            <Button.RenderTransform>

                <SkewTransform AngleX=»-45″ AngleY=»0″ />

            </Button.RenderTransform>

        </Button>

    </DataTemplate>

</ItemsControl.ItemTemplate>

En este caso especificamos que cada elemento que se añada, se renderizará con un botón, al cual se le aplicará una transformacion (una SkewTransform en este caso). El contenido del botón será el valor de la propiedad «UnitName» y, aquí viene lo bueno, posicionaremos el botón donde indiquen los valores de las propiedades PosX y PosY.

En el code-behind tenemos el código para rellenar nuestro ItemsControl. Simplemente le añadimos objetos de cualquier clase que tenga las propiedades necesarias (una llamada UnitName, otra llamada PosX y otra llamada PosY).

 

for (int row = 1; row <= 9; row++)

{

    for (int col = 1; col <= 9; col++)

    {

        CasellaInfo ci = new CasellaInfo();

        ci.UnitName = string.Format(«{0}-{1}», row, col);

        ci.PosX = col * 40;

        ci.PosY = row * 20;

        battleField.Items.Add(ci);

    }

}

 

battleField.Items.Refresh();

Siendo la clase «CasellaInfo» algo parecido a: 

class CasellaInfo

{

    public string UnitName { get; set; }

    public int PosX { get; set; }

    public int PosY { get; set; }

}

Ok! Todo listo! Ejecutamos y…

Aparecen los 81 botones… uno encima del otro, en las coordenadas 0,0 del Canvas (bueno, supongo que aparecen los 81 porque claro, yo sólo veo el último :P). Es decir, los valores de Canvas.Top y Canvas.Left son ignorados.

¿Entonces? Bueno, el truco está en que NO debemos aplicar los valores de Canvas.Top y Canvas.Left al ItemTemplate. En un ItemsControl, cada uno de los elementos (items) se coloca dentro de un control que se genera por cada elemento. Por defecto en un ItemsControl este control es del tipo ContentPresenter. El ItemsControl proporciona una propiedad, llamada ItemContainerStyle que permite especificar un estilo a aplicar a cada uno de esos contenedores:

 

<ItemsControl.ItemContainerStyle>

    <Style TargetType=»{x:Type ContentPresenter}»>                       

        <Setter Property=»Canvas.Left» Value=»{Binding Path=PosX}»/>

        <Setter Property=»Canvas.Top» Value=»{Binding Path=PosY}»/>

    </Style>

</ItemsControl.ItemContainerStyle>

Ahora sí! El ItemsControl, por cada elemento que tenga, creará un ContentPresenter, añadirá dentro de él todos los controles que hayamos especificado en el ItemTemplate (en nuestro caso simplemente un botón) y añadirá este ContentPresenter al ItemsPanel (que en nuestro caso era el Canvas). Además aplicará el estilo especificado en ItemContainerStyle a cada uno de los ContentPresenter creados, lo que los posicionará en las coordenadas que nosotros queremos.

Una vez visto esto está claro que son los ContentPresenter generados lo que tenemos que posicionar en el canvas (y no los ItemTemplate) pero hasta que uno no se da cuenta…. buf!!!

Saludos! 😉

VS se queja con un "Could not retrieve the current project" en un archivo .dbml

Síntoma: tienes una solución que ayer (o hace algunos días, da igual) funcionaba y compilaba bien. Hoy lo abres y aparece un error que dice:

Build failed due to validation errors in C:edu.tmpWofClientServerWoFServerWoFData.dbml.  Open the file and resolve the issues in the Error List, then try rebuilding the project.

Recompilar la solución no sirve para nada. Entonces si intentas abrir el archivo .dmbl, VS se queja con el «Could not retrieve the current project».

La solución? Invocar VS desde una línea de comandos con:

devenv /ResetSkipPkgs  y listos, todo volverá a funcionar!

La causa de esto es que en alguna carga previa de VS, el paquete (en este caso el diseñador de LINQ) no se carga bien por alguna razón y VS «lo desactiva» para el futuro. Aunque VS avisa de ello (aparece un warning en la ventana de output) es fácil no verlo, o incluso si es un paquete que usamos raramente, no acordarnos.

Evidentemente, en mi caso, el problema se dió con el diseñador de LINQ, pero se puede dar con cualquier paquete de VS que haya tenido algún error de carga.

Nos leemos 😉

Más info sobre ResetSkipPkgs: http://msdn.microsoft.com/en-us/library/ms241276.aspx

Acropolis, VS2008 SP1 y el diseñador de WPF parece que no se entienden

MMmm… pues eso 🙂

Los síntomas eran los siguientes: En un proyecto WPF, al cargar un archivo xaml, el diseñador se quejaba con el mensaje: «Index was out of range: Must be non-negative  and less than the size of the collection». Luego daba un número de línea y posición que no decían nada en absoluto.

El proyecto compilaba y se ejecutaba correctamente, simplemente el diseñador se negaba a mostrar la clase. He de decir que yo había cargado antes este proyecto, sin ningún problema!

Tras intentar entender que podía estar pasando, deducí que el error estaba en el ItemTemplate de un ListBox que había en el XAML. Bueno… deducí esto básicamente porque VS2008 me lo subrayaba todo en azul claro 😛

En concreto había varias lineas que parecian no gustarle a VS2008, p.ej:

 

<Border Style=»{StaticResource RacePitBorderStyle}»>

Siendo  RacePitBorderStyle un estilo definido usando <Style> en el propio XAML (quito el código dentro de <Style> para hacerlo más claro).

    <Control.Resources>

        <Style x:Key=»RacePitBorderStyle» TargetType=»Border»>

        </Style>

        <wofconverters:RetratSourceConverter x:Key=»RetratSourceConverter»/>

    </Control.Resources>

Lo primero que observé, fue que si modificaba el «StaticResource» del Border para usar DynamicResource, este error desaparecía (ni idea de por que), pero luego me daba otro en la línea:

 

<Image Source=»{Binding Path=Retrat,Converter={StaticResource RetratSourceConverter}}» Width=»32″ Height=»32″></Image>

Ahora se quejaba de un error de casting (sorry, no tengo el mensaje exacto).

Ya con la mosca tras la oreja, me puse a googlear y por suerte encontré a alguien a quien le pasaba lo mismo. El Comentaba que el error se lo ocasionaba el tener instalado Acropolis… tal y como yo lo tenía!

Así pues desinstalé Acropolis, y ole! El diseñador ya cargaba de nuevo mi proyecto (incluso usando el StaticResource, tal y como estaba antes).

En fin… 😉

Saludos!

PD: Y SP1 que pinta aquí? Seguramente nada, aunque juraría que antes, con VS2008 sin SP1 y con Acropolis el proyecto me funcionaba… pero hacía bastantes días que no cargaba este proyecto y no lo puedo asegurar. En todo caso, con SP1 sin Acropolis funciona bien 🙂