Silverlight ItemsControl. Pouvez-vous retirer complètement le panneau via templating?

Question

J'ai un DataTamplate pour mon ItemsControl qui contient seulement une image avec d'autres méta-données. Ce que je suis en train de faire est de se lier à ItemsControl et les images ont affiché avec l'Convas.Left et Canvas.Top qui est lié par les données que je donne.

J'ai essayé de mon mieux pour supprimer tous les panneaux de contrôle via le ItemsPanelTemplate, donc je peux utiliser les propriétés attachées à la toile mère, mais il semble que vous obtiendrez toujours un StackPanel par défaut.

Tout le monde là-bas ont de bonnes idées?

Merci, Dave

Answer 1

La disposition des éléments dans un ItemsControl est contrôlé par la propriété ItemsControl.ItemsPanel qui est de type ItemsPanelTemplate. La valeur par défaut de la propriété ItemsControl.ItemsPanel est en effet une instance de ItemsPanelTemplate qui spécifie un StackPanel mais est entièrement personnalisable.

L'exemple de code ( sur cette page MSDN ) ci-dessous le paragraphe qui commence « l'exemple suivant crée un ItemsControl. » est très utile pour comprendre ce que les propriétés ItemsControl.Template, ItemsControl.ItemsPanel et ItemsControl.ItemTemplate sont pour.

Il y a quelques façons de réaliser ce que vous décrivez dans la deuxième phrase du premier alinéa de votre question. Voici un exemple complet:

Page.xaml:

<UserControl x:Class="ItemsControlImages.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:app="clr-namespace:ItemsControlImages">

    <UserControl.Resources>
        <DataTemplate x:Key="CountryTemplate">
            <Canvas>
                <Image Canvas.Top="{Binding Location.Y}"
                       Canvas.Left="{Binding Location.X}"
                       Source="{Binding FlagImage}" />

                <StackPanel Canvas.Top="{Binding Location.Y}"
                            Canvas.Left="{Binding Location.X}">
                    <TextBlock Text="{Binding Title}" />
                    <TextBlock Text="{Binding Location}" />

                    <StackPanel.RenderTransform>
                        <TranslateTransform Y="-32.0" />
                    </StackPanel.RenderTransform>
                </StackPanel>
            </Canvas>
        </DataTemplate>
    </UserControl.Resources>

    <Canvas x:Name="LayoutRoot">
        <Canvas.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFB2C6D5"/>
                <GradientStop Color="#FF1483D9" Offset="1"/>
            </LinearGradientBrush>
        </Canvas.Background>

        <ItemsControl ItemTemplate="{StaticResource CountryTemplate}">
            <app:Country Title="Argentina" Location="56,218" FlagImage="Images/ARG.png" />
            <app:Country Title="China" Location="368,66" FlagImage="Images/CHN.png" />
            <app:Country Title="Ireland" Location="192,90" FlagImage="Images/IRE.png" />
            <app:Country Title="New Zealand" Location="404,225" FlagImage="Images/NZ.png" />
            <app:Country Title="United States" Location="40,80" FlagImage="Images/USA.png" />
        </ItemsControl>
    </Canvas>
</UserControl>

Country.cs:

using System.ComponentModel;
using System.Windows;

namespace ItemsControlImages
{
    public class Country : INotifyPropertyChanged
    {
        private string title;
        private string flagImage;
        private Point location;

        public string Title
        {
            get
            {
                return this.title;
            }
            set
            {
                if ((object.ReferenceEquals(this.title, value) != true))
                {
                    this.title = value;
                    this.RaisePropertyChanged("Title");
                }
            }
        }

        public string FlagImage
        {
            get
            {
                return this.flagImage;
            }
            set
            {
                if ((object.ReferenceEquals(this.flagImage, value) != true))
                {
                    this.flagImage = value;
                    this.RaisePropertyChanged("FlagImage");
                }
            }
        }

        public Point Location
        {
            get
            {
                return this.location;
            }
            set
            {
                if ((this.location.Equals(value) != true))
                {
                    this.location = value;
                    this.RaisePropertyChanged("Location");
                }
            }
        }

        #region INotifyPropertyChanged Members

        public event PropertyChangedEventHandler PropertyChanged;

        protected void RaisePropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler propertyChanged = this.PropertyChanged;

            if (propertyChanged != null)
            {
                propertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        #endregion
    }
}

C'est tout ce dont vous avez besoin (ainsi que les images dans un dossier Images) pour ce résultat final:

texte alt http://www.freeimagehosting.net/uploads/bec683b75e.png

Remarque même si les images sont dans un ItemsControl ils sont positionnés aux coordonnées indiquées en liant les propriétés attachées haut et à gauche de leur toile mère à la valeur de la coordonnées X et Y de la propriété personnalisée de localisation.

Pour plus d'informations sur cet échantillon et la personnalisation des ItemsControl l'aide de modèles en général, vous pouvez consulter ce billet de blog .