Rectangle DataBinding

kannix · Hält's aus hier Beiträge: 6 Vista, Ubuntu C# (VS 2008)

Ich bin gerade dabei mich ein bisschen mit WPF zu beschäftigen und habe mir zum ausprobieren einfach mal das hier gebaut:

markieren

XML-Daten

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:

<Window x:Class="wpftesting.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0">

            <Button Click="Button_Click">Start</Button>
            <Button Click="Button_Click_1">Up</Button>
            <Button Click="Button_Click_2">Down</Button>
            
        </StackPanel>
        <StackPanel Grid.Column="1" x:Name="myPanel" Orientation="Horizontal">
            
        </StackPanel>
    </Grid>
    
</Window>

markieren

C#-Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:

namespace wpftesting
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        int[] testArr = new int[10] { 100, 150, 100, 150, 250, 300, 500, 100, 120, 130 };
        public Window1()
        {
            InitializeComponent();
            

        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            for (int i = 0; i < testArr.Length; ++i)
            {
                Rectangle myRec = new Rectangle();
                myRec.Width = 15;
                Binding myBinding = new Binding();
                myBinding.Source = testArr[i];
                myBinding.Mode = BindingMode.OneWay;
                myRec.SetBinding(Rectangle.HeightProperty,myBinding);
                myRec.Fill = Brushes.Black;
                myRec.Stroke = Brushes.LimeGreen;
                myPanel.Children.Add(myRec);
            }            
        }

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            testArr[5] += 10;
        }

        private void Button_Click_2(object sender, RoutedEventArgs e)
        {
            testArr[5] -= 10;
        }
    }
}

Die Buttons Up und Down sollten dann den 6. Balken hoch und runter bewegen ;-)

Geht natürlich nicht.. Soweit ich das jetzt verstanden habe, liegt es da dran, dass Rectangle nicht INotifyPropertyChanged implementiert hat.
Die Frage ist jetzt, wie ich das am besten löse, dass sich das Rechteck ändert, sobald ich das Array veränder.
Schon mal vielen Dank für eure Hilfe :-)

Kha · Verfasst: Do 08.01.09 16:49

kannix hat folgendes geschrieben :

Geht natürlich nicht.. Soweit ich das jetzt verstanden habe, liegt es da dran, dass Rectangle nicht INotifyPropertyChanged implementiert hat.

Das Ziel des Bindings muss ein DependencyObject sein, passt also. Für OneWay-Binding muss die Quelle aber besagtes Interface implementieren, was auf int[] nicht zutrifft. Nimm besser eine ObservableCollection.

PS: :welcome:

_________________
>λ=

kannix · Hält's aus hier Beiträge: 6 Vista, Ubuntu C# (VS 2008)

Danke für die schnelle Antwort :-)

Das mit dem Interface für die Quelle macht natürlich schonmal mehr Sinn ;-)

Kp wie ich da drauf gekommen bin, dass Rectangle das braucht...
Die ObservableCollections ist ja schon mal ein Schritt in die richtige Richtung, aber wenn ich es richtig gelesen habe, kann ich bei einer Collection keinen Index mehr nutzen, oder? Weil der Hintergrund ist der, dass ich HeapSort mit int[] programmiert habe und dazu jetzt eine einfache Balken Visualisierung schreiben wollte ;-)

Ich hatte gehofft, dass ich das Array einfach nutzen kann und den Code für das schon fertige Heapsort nicht "verhunzen" muss.

Kha · Verfasst: Do 08.01.09 18:20

kannix hat folgendes geschrieben :

aber wenn ich es richtig gelesen habe, kann ich bei einer Collection keinen Index mehr nutzen, oder?

Doch, wie mit jeder IList<T>-Klasse. Was auch der perfekte Parameter-Typ für deinen Heapsort wäre

.

PS: Du kannst die Rectangles auch etwas eleganter direkt in XAML erstellen. Nimm dazu ein ItemsControl, ein Rectangle mit Height="{Binding}" als dessen ItemTemplate und die Collection als ItemsSource.

_________________
>λ=

kannix · Hält's aus hier Beiträge: 6 Vista, Ubuntu C# (VS 2008)

Ok, mein Heapsort werkelt jetzt mit einer ObservableCollections<int> :-)

schonmal ein riesen Danke für den Tipp mit den ObservableCollections.. da wäre ich glaube im Leben nicht drauf gekommen.
Jetzt hat mich dein Hinweis auf das ItemsControl natürlich Neugierig gemacht ;-)

Aber ich bekomme es noch nicht so ganz hin.
Mein Code sieht bis jetzt so aus(myNumbers ist die ObservableCollections<int> und für myItemsControl setze ich im CodeBehind den DataContext auf this):

markieren

XML-Daten

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:

<ItemsControl x:Name="myItemsControl" ItemsSource="{Binding Source = myNumbers}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <DataTemplate.Resources>
                            <Style TargetType="Rectangle">
                                <Setter Property="Width" Value="20"/>
                                <Setter Property="Stroke" Value="Lime"/>
                                <Setter Property="VerticalAlignment" Value="Bottom"/>
                                <Setter Property="Height" Value="{Binding Path=}"
                            </Style>
                        </DataTemplate.Resources>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

Dort weiß ich dann nicht, was ich als BindingPath nehmen muss :-(

Der Code ist quasi aus dem MSDN Sample zu ItemsControl geklaut.. Wäre echt nett, wenn mir nochmal wer das mit dem ItemsControl erklären könnte. Am tollsten wäre natürlich ein Beispiel, wie ich aus den myNumbers direkt die Rechtecke mache.
schon mal vielen Dank für die Hilfe. Echt ein super Forum!! :zustimm:

Kha · Verfasst: Fr 09.01.09 00:32

Den Style brauchst du nicht und das Binding hab ich doch schon geschrieben

.

markieren

XML-Daten

1:
2:
3:

<DataTemplate>
  <Rectangle Height="{Binding}" ... />
</DataTemplate>

_________________
>λ=

kannix · Hält's aus hier Beiträge: 6 Vista, Ubuntu C# (VS 2008)

Okay, das mit dem Binding klingt natürlich schonmal logisch.. aber es funzt nicht ;-)

mein XAML sieht jetzt so aus:

markieren

XML-Daten

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:

<Window x:Class="HeapsortVisu.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="HeapSortVisu" Height="600" Width="600">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0">
            <Button Click="btn_Shuffle">Shuffle</Button>
            <Button Click="btn_BuildHeap">Build Heap</Button>
            <Button Click="btn_Sort">Sort</Button>
        </StackPanel>
            <ItemsControl x:Name="myItemsControl" ItemsSource="{Binding Source = myNumbers}" Grid.Column="1">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" Background="Black"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>                        
                            <Rectangle Height="{Binding}" Width="20" Stroke="LimeGreen" Margin="10"/>
                    </DataTemplate>
               </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>

Es werden komischerweise 9 rectangles angezeigt die aber komplett von oben bis unten gehen. Ich habe mal noch den Eintrag aus der Watchlist von den myNumbers kopiert:

markieren

Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:

-    myNumbers  Count = 20  System.Collections.ObjectModel.ObservableCollection<int>
    [0]  45  int
    [1]  22  int
    [2]  81  int
    [3]  53  int
    [4]  83  int
    [5]  25  int
    [6]  55  int
    [7]  91  int
    [8]  63  int
    [9]  81  int
    [10]  17  int
    [11]  43  int
    [12]  73  int
    [13]  42  int
    [14]  39  int
    [15]  7  int
    [16]  52  int
    [17]  17  int
    [18]  39  int
    [19]  78  int

zur Sicherheit hier auch nochmal den Anfang der CodeBehind Datei.. wobei ich eher glaube es liegt an der Binding Sache.. denn laut WatchList und ein bisschen Debuggen funzen die myNumbers so wie ich es auch erwarte ;-)

markieren

C#-Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:

 public partial class Window1 : Window
    {
        ObservableCollection<int> myNumbers = new ObservableCollection<int>();
        
        public Window1()
        {
            InitializeComponent();
            Algorithms.FillRandom(ref myNumbers, 0, 100, 20);
            myItemsControl.DataContext = this;
        }

Kha · Verfasst: Fr 09.01.09 11:58

kannix hat folgendes geschrieben :

Es werden komischerweise 9 rectangles angezeigt die aber komplett von oben bis unten gehen.

...

... OMG, ist das böse :lol:

. Zähl mal die Buchstaben in "myNumbers"

. Mit Sourcekannst du nicht an ein Klassenfeld binden, stattdessen wurde der String "myNumbers" gebunden. Das musst du im Code machen:

markieren

C#-Quelltext

1:
2:

Constructor:
myItemsControl.ItemsSource = myNumbers;

_________________
>λ=

kannix · Hält's aus hier Beiträge: 6 Vista, Ubuntu C# (VS 2008)

Juhu, es geht :-)

Wenn mich der Fehler nicht so lange beschäftigt hätte, würde ich ja fast sagen der ist lustig ;-)

Vielen Dank für deine Hilfe :flehan:

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme