Silverlight Itemscontrol. Können Sie das Panel vollständig über Templat entfernen?

Question

Ich habe einen DataTamplate für meine Items, die lediglich ein Bild mit einigen anderen Metadaten enthalten. Was ich an die Itemscontrol zu tun versuche, binden und haben werden die Bilder mit dem Convas.Left und Canvas.Top angezeigt, die über die Daten gebunden ist, gebe ich.

Ich habe mein Bestes versucht, alle Panels von der Steuerung über die Itemspaneltemplate zu entfernen, also kann ich die Angefügte Eigenschaften in der übergeordneten Leinwand verwenden, aber es scheint, dass Sie immer ein Stackpanel standardmäßig erhalten.

Jeder da draußen hat gute Ideen?

Danke, Dave

Answer 1

Das Layout der Elemente in einem Itemscontrol wird über die ItemsControl.ItemsPanel Eigenschaft gesteuert, die vom Typ ist Itemspaneltemplate. Der Standardwert für die ItemsControl.ItemsPanel Eigenschaft ist in der Tat eine Instanz von Itemspaneltemplate, die eine Stackpanel gibt, aber das ist vollständig anpassbar.

Das Codebeispiel ( auf dieser MSDN-Seite ) unter dem Absatz angezeigt, die beginnen „Das folgende Beispiel erzeugt ein Itemscontrol.“ sehr nützlich ist, zu verstehen, was die ItemsControl.Template, ItemsControl.ItemsPanel und ItemsControl.ItemTemplate Eigenschaften sind für.

Es gibt ein paar Möglichkeiten, zu erreichen, was Sie im zweiten Satz des ersten Absatzes Ihrer Frage beschreiben. Hier ist ein vollständiges Beispiel:

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
    }
}

Das ist alles, was Sie (zusammen mit den Bildern in einem Ordner Bilder) für dieses Endergebnis müssen:

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

Hinweis, auch wenn die Bilder in einem Itemscontrol sind sie an den Koordinaten durch Bindung links und oben angebracht Eigenschaften ihrer Eltern Leinwand auf den Wert der X- und Y-Koordinaten aus der benutzerdefinierten Eigenschaft Location gezeigt positioniert sind.

Für weitere Informationen zu dieser Probe und Anpassen der Itemscontrol mit Hilfe von Vorlagen im allgemeinen können Sie überprüfen dieses Blog-Post .