Canvas mit Scrollviewer und Dynamischen Controls

crash · 23. April 2019, 17:03

Guten Tag

,

seit neusten versuche ich mich mit WPF und habe nun auch schon die erste Frage.
Wie genau funktioniert der ScrollViewer in einem Canvas Control in dem dynamisch Controls erzeugt werden?
Denn scheinbar bekommt der Scrollviewer nicht mit das das Canvas größer wird, bzw. wächst das Canvas überhaupt automatisch wenn ich ein Child hinzufüge?

Habt ihr da Links, Tutorials oder Literatur zu damit ich die Grundlagen die ich scheinbar nicht verstehe aufarbeiten kann?

Danke

Nofear23m · 23. April 2019, 23:32

Hallo

Ich glaube bevor ich die Fragen beantworte muss ich hier (leider) zuerst eine Gegenfrage stellen.

Auf was willst du raus. Ich denke du hast so wie du das schreibst was ganz bestimmtes im Sinn. Das wäre interessant zu wissen, dann können wir dir sicher weiterhelfen.

Grüße
Sascha

crash · 24. April 2019, 09:27

null Ich möchte einen Jahresplaner erstellen, unter WinForms habe ich damit meine Probleme, da meine Herangehensweise mit vielen Controls(Panel) die wohl nicht die beste war.

Was ich bisher habe:

Nofear23m · 24. April 2019, 11:13

OK, jetzt weis ich mal was du vor hast.

Vorab, dein vorhaben ist nicht so trivial. Vorallem nicht wenn das ganze auch performand sein soll.
Soll denn immer ein ganzes Jahr angezeigt werden? Oder soll das ganze eher selektierbar sein, also das man den Bereich wählen kann welcher angezeigt werden soll.

Das Canvas ist hier wohl nicht das richtige Control. Wenn es dynamisch sein soll würde ich zu einem UniformGrid greifen.
Wenn du deinen Code mal Postest (bitte genau wie Bilder auch immer mit der Forumsinternen uploadfunktion anstatt mit Hostern) können wir ja sehen wie wir das am besten auf die reihe bekommen können.
Wichtig wäre nur genau zu wissen wann sich das ganze (siehe vorigen Absatz) wie verhalten soll.

Grüße
Sascha

crash · 24. April 2019, 12:01

Schön wäre natürlich wenn sowohl das Ganze Jahr als auch eine Selektion angezeigt werden kann.
Meinen bisherigen Code habe ich für das WinForm Panel Control geschrieben.

Im Prinzip benötige ich nicht viele Funktionen, ich möchte später nach dem Markieren einzelner oder mehrerer Felder bestimmte Zustände auswählen und anzeigen lassen(Dargestellt durch Farben und Text im Feld) diese werden wiederum in einer Datenbank gespeichert.

Das sollte ich auch programmtechnisch hinbekommen, zumindest hab ich es für WinForms

geschafft.
Nur die Anzeige soll halt dynamisch anhand der Anzahl der übergebenen Mitarbeitern mit deren Informationen erstellt werden.

*EDIT Meinst du wirklich das Uniform ist das beste dafür?
In meinem WinForm Projekt habe ich alle Controls selber Positioniert.

Nofear23m · 24. April 2019, 12:11

crash schrieb:

ich möchte später nach dem Markieren einzelner oder mehrerer Felder bestimmte Zustände auswählen und anzeigen lassen

Das ist z.b. schon ein riesen(!!) unterscheid ob nur einzeln oder mehrere.

crash schrieb:

Schön wäre natürlich wenn sowohl das Ganze Jahr als auch eine Selektion angezeigt werden kann.

Ich würde hier mit Selektionen arbeiten. Also das per Default z.b. ein Monat angezeigt wird, der User kann dann entweder vor oder zurückspringen oder einen anderen Datumsbereich wählen wobei ich generell die anzahl der angezeigten Monate begrenzen würde. Aber das bleibt dir ja dann überlassen.

Wie gesagt, es gibt sicherlich einfacheres.
Wie ICH vorgehen würde:

Erstmal würde ich mir die Klassen so aufbauen das diese Datenkonform sind. Also das was du im Endeffekt dann in die DB speichern willst.
Dann würde ich mir gedanken machen wie die ViewModels hierzu aussehen sollen. Das ganze würde ich im View dann mal versuchen mittels Uniformgrid zu lösen, das bietet sich hier an da es sehr dynamisch verwendet werden kann.

Einfach ist sowas nicht, aber zugegeben sehr interessant.

Grüße
Sascha

crash · 24. April 2019, 12:28

Also wenn du mir hier sagen könntest wie ich das scrollbar bekomme, würdest du mir schon riesig helfen.

XAML

VB.NET-Quellcode

<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp"
mc:Ignorable="d"
Title="MainWindow" Height="954.808" Width="1153.845">
<Grid>
<Button Click="Button_Click" Margin="10,10,0,889" HorizontalAlignment="Left" Width="210">Los</Button>
<ScrollViewer Margin="0,40,0,0" HorizontalScrollBarVisibility="Visible">
<Canvas Name="Hauptanzeige" Margin="0,40,0,0">
</Canvas>
</ScrollViewer>
</Grid>
</Window>

MainWindow

VB.NET-Quellcode

Option Strict On
Class MainWindow
Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
For i = 0 To 1
For j = 0 To 200
Dim pnl As New Canvas With {
.Name = "name" & i.ToString & "_" & j.ToString,
.Width = 15,
.Height = 70,
.Margin = New Thickness(j * .Width + j, i * .Height + i, 0, 0),
.Background = Brushes.Green
}
AddHandler pnl.MouseDown, AddressOf ShowName
Hauptanzeige.Children.Add(pnl)
Next
Next
End Sub
Private Sub ShowName(sender As Object, e As MouseButtonEventArgs)
Dim tag As Canvas = CType(sender, Canvas)
tag.Background = Brushes.Red
'MsgBox(tag.Name.ToString)
End Sub
End Class

Nofear23m · 24. April 2019, 14:43

Hallo

Ein Canvas ist hier eher ungeeignet. Zumindest aussen rum. Verwende ein Stackpanel:

XML-Quellcode

<ScrollViewer Margin="0,40,0,0" HorizontalScrollBarVisibility="Visible">
<StackPanel Orientation="Horizontal" Name="Hauptanzeige">
</StackPanel >
</ScrollViewer>

VB.NET-Quellcode

For i = 0 To 1
For j = 0 To 200
Dim pnl As New Canvas With {
.Name = "name" & i.ToString & "_" & j.ToString,
.Width = 15,
.Height = 70,
.Background = Brushes.Green, .Margin = New Thickness(1)
}
AddHandler pnl.MouseDown, AddressOf ShowName
Hauptanzeige.Children.Add(pnl)
Next
Next

Dann klappt das auch mit dem Scrollen.

Aber.... Unter WPF hast du viel mehr Luxus wenn du mit Klassen und Binding arbeitest.
Ich habe dir mal ein schnelles rudimentäres Beispiel erstellt. Ich finde dieses übersichtlicher und es ist aalles an seinem Ort - somit gut wartbar.
PS: Lass dich vom Projektnamen nicht verwirren, ich hatte ein vorhandenes PRojekt genommen und damit rumgespielt.

Grüße
Sascha

crash · 24. April 2019, 15:01

Vielen Dank, das hilft mir sehr weiter :thumbsup:

Eine Frage habe ich aber noch, müsste ich dann Pro Reihe ein neues StackPanel nehmen?

Nofear23m · 24. April 2019, 15:29

Ja, müsstest du. Ich würde aber hier wieder dynamisch mit Binding arbeiten und eine Auflistung an ein ItemsControl binden.

Wie schon gesagt, versuche mit Binding zu arbeiten - siehe mein Beispielprojekt - sonst wirst du früher oder später an die Grenzen stoßen und spätestens dann darfst du wieder alles umwerfen. Ich will dir nur die Zeit sparen.

Grüße
Sascha

crash · 24. April 2019, 16:11

Ich werde dein Beispiel als Vorlage nutzen und mal ein bisschen rumprobieren und versuchen zu verstehen. DANKE :thumbsup:

*EDIT sehe gerade das du YouTube Tutorials zu WPF hast, die gucke ich mir erstmal an :thumbup:

Nofear23m · 24. April 2019, 18:40

Dann schau mal in meine Signatur. Dort ist das Tutorial zu den Videos.

Grüße

crash · 25. April 2019, 14:56

@Nofear23m Könntest du mir vielleicht noch sagen wie ich die Zweite reihe Cluster hinbekommen?

Ich verstehe noch nicht ganz wie ich da am besten vorgehen soll.

Das itemControl ist ja mit Public Property Cluster As ObservableCollection(Of ClusterItem) gebindet, wenn ich dort weitere Cluster rein packe würden diese ja nur an die vorherigen angereiht.
Nun vermute ich, das ich für jede Reihe Cluster neue Public Property Cluster As ObservableCollection(Of ClusterItem) benötige, sowie ItemsControl welches dann wiederum mit der neuen Cluster Collection gebindet wird??
Ist das richtig oder bin ich da auf dem Holzweg?

Nofear23m · 25. April 2019, 16:04

Da hast du recht. Ich habe das Beispiel absichtlich so gewählt das es nur für eine Person geht. Mehr war auch nicht gefragt 8-)

So ist es besser zu verstehen was da passiert. Wenn du dies nun verstanden hast und auch verstehst wie das Binding funktioniert kannst du zum nächsten schritt übergehen.

OK, also ein Cluster stellt ja eine Person dar. Am besten wir benennen das gleich um - der Name ist von mir ja schlecht gewählt das ich allgemein halten wollte - damit wird hier nicht durcheinander kommen.
Gut, nennen wir es mal PersonCalendar. Ein PersonCalendar stellt also eine Person und deren "Tage" dar. Also so gesehen eine "Zeile" in deiner Ansicht. Denn in der Zeile ist der Name der Person und die Tage.

Gut. Jede Person hat X Tage. Je nachdem was selektiert/vorgegeben ist. In deinem Beispiel waren es glaube ich 200 Tage. Gut. Also hat jede Person X Tage. Super.
Jeder Tag hat dann die Eigenschaft CurrentDate (das aktuelle Datum zu welchem dieser Tag gehört) und z.b. wie schon gehabt IsSelected.

Gut... das Bilden wir in einem Model ab. Also in .Net Objekte:

Wenn wir das haben können wir im MainWindows eine Eigenschaft erstellen auf welche wir dann binden.

Spoiler anzeigen

VB.NET-Quellcode

Private Sub MainWindow_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded
StartDate = DateTime.Now : EndDate = DateTime.Now.AddDays(50)
InitCalendar()
Me.DataContext = Me
End Sub
Private _calendar As ObservableCollection(Of PersonCalendar)
Public Property Calendar As ObservableCollection(Of PersonCalendar)
Get
Return _calendar
End Get
Set(ByVal Value As ObservableCollection(Of PersonCalendar))
_calendar = Value
RaisePropertyChanged()
End Set
End Property
Private _startDate As Date
Public Property StartDate As Date
Get
Return _startDate
End Get
Set(ByVal Value As Date)
_startDate = Value
RaisePropertyChanged()
InitCalendar()
End Set
End Property
Private _endDate As Date
Public Property EndDate As Date
Get
Return _endDate
End Get
Set(ByVal Value As Date)
_endDate = Value
RaisePropertyChanged()
InitCalendar()
End Set
End Property
Private Sub InitCalendar()
Calendar = New ObservableCollection(Of PersonCalendar)
Calendar.Add(New PersonCalendar("M. Mustermann", StartDate, EndDate))
Calendar.Add(New PersonCalendar("S. Sorglos", StartDate, EndDate))
End Sub

Nun haben wir einmahl eine Auflistung vom Typ PersonCalendar und in dieser wiederum eine Auflistung vom Typ DayItem.
Also zwei Auflistungen, infolge dessen benötigen wir im View nun auf zwei Listen.

Einmahl hier das MainWindow:

XML-Quellcode

<DockPanel LastChildFill="True">
<StackPanel Orientation="Horizontal" DockPanel.Dock="Top">
<TextBlock Text="Start:" VerticalAlignment="Center"/>
<DatePicker SelectedDate="{Binding StartDate}"/>
<TextBlock Text="Start:" VerticalAlignment="Center" Margin="15,0,0,0"/>
<DatePicker SelectedDate="{Binding EndDate}"/>
</StackPanel>
<ScrollViewer HorizontalScrollBarVisibility="Visible">
<ItemsControl ItemsSource="{Binding Calendar}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<checkbox_test:uclCalendarRow/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</DockPanel>

Das DataTemplate habe ich ausgelagert in ein Usercontrol damit der Code übersichtlich bleibt:

XML-Quellcode

<UserControl x:Class="uclCalendarRow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Checkbox_Test"
mc:Ignorable="d" Language="de"
d:DesignHeight="450" d:DesignWidth="800">
<StackPanel Orientation="Horizontal">
<Border BorderBrush="Black" Background="LightGray" BorderThickness="2" Width="100">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding PersonName}"/>
</Border>
<ItemsControl ItemsSource="{Binding AviableDays}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas Width="15" Height="70" Margin="1" ToolTip="{Binding CurrentDate, StringFormat=\{0:D\}}">
<Canvas.Style>
<Style TargetType="Canvas">
<Setter Property="Background" Value="Green"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="Background" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Canvas.Style>
<Canvas.InputBindings>
<MouseBinding Gesture="LeftClick" Command="{Binding SelectCommand}"/>
</Canvas.InputBindings>
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</UserControl>

Anbei auch das Beispielprojekt zum besseren nachvollziehen des Codes.

Grüße
Sascha

crash · 25. April 2019, 16:36

@Nofear23m Ich kann mich nur tausendfach bei dir bedanken.
Ebenfalls Danke für deine Mühe mit dem neuen Beispiel ich denke so ganz grob verstehe ich es auch.
Ich werde jetzt mal weiter in dem neuen Beispiel testen und parallel dein Tutorial weiter durchgehen.

Vielen Dank. :thumbsup:

Canvas mit Scrollviewer und Dynamischen Controls

Canvas mit Scrollviewer und Dynamischen Controls

crash schrieb:

crash schrieb:

VB.NET-Quellcode

VB.NET-Quellcode

XML-Quellcode

VB.NET-Quellcode

VB.NET-Quellcode

XML-Quellcode

XML-Quellcode

Benutzer online 1

Tags

Ähnliche Themen

2 Benutzer haben hier geschrieben