The Artima Developer Community
Sponsored Link

.NET Buzz Forum
WPF: ListBox um Grafiken/Images erweitern

0 replies on 1 page.

Welcome Guest
  Sign In

Go back to the topic listing  Back to Topic List Click to reply to this topic  Reply to this Topic Click to search messages in this forum  Search Forum Click for a threaded view of the topic  Threaded View   
Previous Topic   Next Topic
Flat View: This topic has 0 replies on 1 page
-

Posts: 1524
Nickname: nitronic
Registered: Jul, 2006

Norbert Eder works as a software architect.
WPF: ListBox um Grafiken/Images erweitern Posted: Nov 7, 2007 8:38 AM
Reply to this message Reply

This post originated from an RSS feed registered with .NET Buzz by -.
Original Post: WPF: ListBox um Grafiken/Images erweitern
Feed Title: Norbert Eder - Living .NET
Feed URL: http://feeds.feedburner.com/NorbertEder-Livingnet
Feed Description: Copyright (c)2005, 2006 by Norbert Eder
Latest .NET Buzz Posts
Latest .NET Buzz Posts by -
Latest Posts From Norbert Eder - Living .NET

Advertisement
Die Standard-ListBox unter WPF ist dann ein doch eher fades Steuerelement. In den meisten Fällen wird man mit den angebotenen Möglichkeiten nicht auskommen, daher muss es angepasst bzw. erweitert werden. Dieser Artikel zeigt, welche Schritte vorgenommen werden müssen, um folgendes Aussehen zu erhalten:



Normalerweise werden mit Hilfe der ListBox ListBoxItems (es können auch andere Child-Elemente sein) angezeigt. Diese besitzen eine Eigenschaft Content. Darüber kann nun der anzuzeigende Text dargestellt werden. Für dieses Beispiel werden jedoch zwei Strings benötigt und ein Image.

Betreffend der Strings können wir ein simples Datenobjekt erstellen und an die ListBox binden.
using System;
using System.Collections.Generic;
using System.Text;

namespace ListBoxSampleApp
{
    public class DataItem
    {
        private string _title = null;
        private string _description = null;

        public string Title
        {
            get { return this._title; }
            set { this._title = value; }
        }

        public string Description
        {
            get { return this._description; }
            set { this._description = value; }
        }

        public DataItem() { }

        public DataItem(
            string title, 
            string description)
        {
            _title = title;
            _description = description;
        }
    }
}

Die Bindung der Daten als auch das Einbinden der Grafik erfolgt an der gleichen Stelle. Hierzu muss eine Ressource erstellt werden, in der ein DataTemplate definiert wird. Dieses Template beschreibt in unserem Fall das Aussehen eines Eintrages in der ListBox.
<Window.Resources>
    <DataTemplate x:Key="ListItemTemplate">
        <StackPanel>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="32"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Image 
                    Source="GoLtrHS.png" 
                    Grid.Column="0" 
                    Grid.RowSpan="2"/>
                <TextBlock 
                    Text="{Binding Path=Title}" 
                    Grid.Column="1" 
                    Grid.Row="0" 
                    FontWeight="Bold"/>
                <TextBlock 
                    Text="{Binding Path=Description}" 
                    Grid.Column="1" 
                    Grid.Row="1" />
            </Grid>
        </StackPanel>
    </DataTemplate>
</Window.Resources>

Wie zu sehen ist wird der Eintrag für unsere ListBox aus einem StackPanel und einem Grid erzeugt. Das Grid besitzt insgesamt zwei Zeilen und zwei Spalten. In der ersten Spalte wird nun unsere Grafik angezeigt (die Grafik wurde in das Projekt eingefügt und steht somit zur Verfügung). Durch die Angabe der RowSpan erstreckt sich die Grafik über beide Zeilen. In der zweiten Spalte ist für jede Zeile ein TextBlock zu finden. Diese enthalten jeweils ein Binding auf Eigenschaften aus dem zuvor definierten Datenobjekt: einmal für den Titel und einmal für die Beschreibung.

Wenn dieser Schritt erledigt ist, muss nur noch der ListBox mitgeteilt werden, dass das erstellte Template für die Anzeige der Items verwendet werden soll. Dies geschieht in der Eigenschaft ItemTemplate der ListBox.
<ListBox 
    RenderTransformOrigin="0.5,0.5" 
    Cursor="Arrow" 
    x:Name="MainListBox" 
    Background="#FFFFFFE0" 
    BorderBrush="#FFCCCCCC" 
    BorderThickness="1,1,1,1" 
    FontFamily="Arial" 
    FontSize="16" 
    IsSynchronizedWithCurrentItem="True" 
    Margin="8,8,8,29" 
    d:LayoutOverrides="GridBox" 
    ItemTemplate="{StaticResource ListItemTemplate}">
</ListBox>
Um dies testen zu können, müssen nur noch Testdaten erstellt und an die ItemSource-Eigenschaft der ListBox gebunden werden. [html]
public Window1()
{
    this.InitializeComponent();

    Fillup();
}

private void Fillup()
{
    List<DataItem> itemList = new List<DataItem>();
    DataItem di1 = new DataItem("Testeintrag", "Beschreibung zum Item");
    DataItem di2 = new DataItem("Testeintrag 2", "Beschreibung zum Item");
    itemList.Add(di1);
    itemList.Add(di2);
    MainListBox.ItemsSource = itemList;
}

Fertig ist die angepasste WPF-ListBox.

Read: WPF: ListBox um Grafiken/Images erweitern

Topic: Microsoft Search Server Express 2008 download (RC) Previous Topic   Next Topic Topic: Windows Home Server Now Available

Sponsored Links



Google
  Web Artima.com   

Copyright © 1996-2019 Artima, Inc. All Rights Reserved. - Privacy Policy - Terms of Use