Cómo enlazar un lienzo para una colección de artículos en Silverlight

Question

Antecedentes

Tengo una colección de objetos que quiero dibujar en un lienzo. Cada uno de estos objetos tiene una propiedad DateTime, que determina la posición de ese objeto a lo largo del eje x en el lienzo. Cada objeto también tiene otras propiedades que determinan la imagen que debe dibujarse en el lienzo. La característica más importante que quiero implementar es que a medida que pasa el tiempo por el segundo, estas imágenes que representan los objetos se moverán a lo largo del eje x. En otras palabras, el límite vertical derecho del lienzo siempre representaría la hora actual (por ejemplo, DateTime.Now), y los objetos en la colección necesitarían actualizar su posición en el lienzo relativo a ese límite. Soy muy nuevo en Silverlight y, por lo tanto, tengo bastantes preguntas, incluida la siguiente. Además, también tengo el requisito de seguir el marco de MVVM.

Preguntas

¿Qué debo usar en el XAML a achive lo anterior? Pensé en utilizar ItemsControl con Canvas como el Panel, pero no estoy seguro de cómo hacerlo o incluso si es la mejor manera. Cualquier código XAML real sería genial.

¿Cómo debo vincular la colección de objetos al lienzo? Y si es así, ¿cómo los muevo a lo largo del eje x a medida que pasa el tiempo? Es decir, me gustaría que el lienzo para actualizar cada vez que:

• hay objetos añadidos a la colección ; o
• objetos eliminados de la colección; o
• objeto existente cambiando (por ejemplo, algunos propiedad cambió y por lo tanto necesita cambiar la imagen que consiguen muestra en la lona) en la colección; o
• aunque no haya cambios en la colección como se mencionó anteriormente, estos objetos tendrán que moverse cada segundos.

Disculpa si he usado términos incorrectos para algo ya que todavía soy nuevo en Silverlight.

Gracias.

Answer 1

Si realmente desea usar MVVM y vinculación de datos, entonces un ItemsControl con el ItemsPanel definido como un lienzo podría funcionar. Enlace el ItemsControl.ItemsSource a una ObservableCollection en su VM. En su ItemTemplate para ItemsControl, vincule el elemento elemento de la interfaz de usuario Canvas.X y Canvas.Y a sus elementos de datos, utilizando un IValueConverter para realizar la asignación de DateTime a X coord, etc ...

Algo como esto :

<ItemsControl ItemsSource="{Binding Path=MyItemsInVM, Mode=OneWay}"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <Canvas></Canvas> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Border Width="50" Height="50" Canvas.Left="{Binding Path=MyDateTimeProperty, Converter={StaticResource DateTimeToLeftOffsetConverter}}" Canvas.Top="100" /> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

Otro enfoque es utilizar el patrón Model-View-Presenter. MVVM no es el único show en la ciudad. Cuando tiene la necesidad de hacer mucha manipulación de la interfaz de usuario o de trabajar con el VSM, un presentador puede adaptarse mejor (aunque los comportamientos también pueden jugar un papel importante).

Puede configurar un temporizador en su presentador que opere en su intervalo de actualización, y en el Presentador solo manejar el evento del temporizador para iterar sobre la colección y asignar objetos a posiciones (X, Y) actualizando los elementos de la UI directamente .

Answer 2

Sé que esta pregunta es un poco antigua, pero puedes usar una transformación de renderizado - Estoy haciendo algo similar;

<ItemsControl ItemsSource="{Binding Notes}"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <Canvas /> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 

    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Border Width="{Binding W}" Height="{Binding H}" BorderBrush="Navy" BorderThickness="5" CornerRadius="10"> 
       <TextBlock Text="{Binding Text}"/> 
       <Border.RenderTransform> 
        <TransformGroup> 
         <... elided ...> 
         <TranslateTransform X="{Binding X}" Y="{Binding Y}"/> 
        </TransformGroup> 
       </Border.RenderTransform> 
      </Border> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl>