Hey,
ich versuche mich gerade an einer UWP App mit Einhaltung des MVVM Patterns. Das ist mein Ziel: Auf der MainPage soll eine ListBox mit Farben sein (zu Anfang leer). Jede Farbe hat einen Farbwert und einen BlendFactor. Über Slider in der ListBox lässt sich der BlendFactor einstellen. Die Hintergrundfarbe der Page soll jetzt die "Farbmischung" aus allen Farben in der Liste sein. Mit einem Button soll man zur nächsten Page kommen um eine Farbe aus einer Liste auszuwählen, die zur Liste in der MainPage hinzugefügt werden soll.
Hier ist mein Model:
Spoiler anzeigen
Viewmodel:
Spoiler anzeigen
Spoiler anzeigen
Und XAML soweit:
Spoiler anzeigen
Nun zu den Fragen:
Wie würde ich nach dem MVVM Pattern zu einer neuen Page navigieren, um mir in dieser eine Farbe auszuwählen und die dann zum PaintCollectionVm hinzuzufügen? Würde ich ein Command im Viewmodel nutzen hätte ich ja den Verweis aufs View im Viewmodel. Im Grunde ist es ja ein Dialog, nur wie designt man soetwas MVVM like?
In der MainPage hätte ich ja ein ähnliches XAML mit dem Unterschied, dass noch ein Slider, der an BlendFactor gebunden ist, im DataTemplate der Listbox ist. Nun müsste ich bei jeder Änderung von BlendFactor (und wenn eine Farbe der Liste hinzugefügt wird) die Hintergrundfarbe der Page neu berechnen (
Grüße
ich versuche mich gerade an einer UWP App mit Einhaltung des MVVM Patterns. Das ist mein Ziel: Auf der MainPage soll eine ListBox mit Farben sein (zu Anfang leer). Jede Farbe hat einen Farbwert und einen BlendFactor. Über Slider in der ListBox lässt sich der BlendFactor einstellen. Die Hintergrundfarbe der Page soll jetzt die "Farbmischung" aus allen Farben in der Liste sein. Mit einem Button soll man zur nächsten Page kommen um eine Farbe aus einer Liste auszuwählen, die zur Liste in der MainPage hinzugefügt werden soll.
Hier ist mein Model:
C#-Quellcode
- [TypeConverter(typeof(PaintTypeConverter))]
- public class Paint
- {
- public float BlendFactor { get; set; } = 1.0f;
- public Vector3 Value { get; set; }
- public string Name { get; set; }
- public Paint() { }
- public Paint(Color c, string name)
- {
- Name = name;
- Value = new Vector3(1.0f - c.R / 255.0f, 1.0f - c.G / 255.0f, 1.0f - c.B / 255.0f);
- }
- public Paint(Vector3 value)
- {
- Value = value;
- }
- public Color ToColor()
- {
- return Color.FromRgb((byte)((1.0f - Value.X) * 255.0f), (byte)((1.0f - Value.Y) * 255.0f), (byte)((1.0f - Value.Z) * 255.0f));
- }
- public static Paint BlendPaint(IEnumerable<Paint> paints)
- {
- Vector3 temp = new Vector3(0);
- foreach (Paint p in paints)
- temp += p.Value * p.BlendFactor;
- float max = Math.Max(temp.X, Math.Max(temp.Y, temp.Z));
- if(max > 1)
- temp /= max;
- return new Paint(temp);
- }
- }
Viewmodel:
C#-Quellcode
- public class PaintVm : INotifyPropertyChanged
- {
- public event PropertyChangedEventHandler PropertyChanged;
- protected void OnPropertyChanged(string name)
- {
- PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
- }
- public Paint Paint { get; set; } = new Paint();
- public PaintVm() { }
- public PaintVm(Paint p) => Paint = p;
- public float BlendFactor
- {
- get => Paint.BlendFactor;
- set
- {
- if (value == Paint.BlendFactor)
- return;
- Paint.BlendFactor = value;
- OnPropertyChanged("BlendFactor");
- }
- }
- public Vector3 Value
- {
- get => Paint.Value;
- set
- {
- if (value == Paint.Value)
- return;
- Paint.Value = value;
- OnPropertyChanged("Value");
- }
- }
- public string Name
- {
- get => Paint.Name;
- set
- {
- if (Paint.Name == value)
- return;
- Paint.Name = value;
- OnPropertyChanged("Name");
- }
- }
- public Brush DisplayBrush
- {
- get => new SolidColorBrush(Paint.ToColor());
- }
- }
C#-Quellcode
- public class PaintCollectionVm : INotifyPropertyChanged
- {
- public event PropertyChangedEventHandler PropertyChanged;
- protected void OnPropertyChanged(string name)
- {
- PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
- }
- public ObservableCollection<PaintVm> Paints { get; set; } = new ObservableCollection<PaintVm>();
- public PaintCollectionVm()
- {
- }
- }
Und XAML soweit:
XML-Quellcode
- <Page
- x:Class="App1.MainPage"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- xmlns:local="clr-namespace:MVVMTest"
- xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
- xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
- mc:Ignorable="d"
- Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
- <Page.DataContext>
- <local:PaintCollectionVm>
- <local:PaintCollectionVm.Paints>
- <local:PaintVm Paint="#826644, RawUmber"/>
- <local:PaintVm Paint="#8a3324, BurntUmber"/>
- </local:PaintCollectionVm.Paints>
- </local:PaintCollectionVm>
- </Page.DataContext>
- <Grid>
- <ListBox ItemsSource="{Binding Paints}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
- <ListBox.ItemTemplate>
- <DataTemplate>
- <Grid>
- <Grid.ColumnDefinitions>
- <ColumnDefinition Width="20"/>
- <ColumnDefinition Width="*"/>
- </Grid.ColumnDefinitions>
- <Border BorderBrush="Black" Background="{Binding DisplayBrush}" BorderThickness="1" Height="20"/>
- <TextBlock Text="{Binding Name}" Grid.Column="1" Margin="5"/>
- </Grid>
- </DataTemplate>
- </ListBox.ItemTemplate>
- </ListBox>
- </Grid>
- </Page>
Nun zu den Fragen:
Wie würde ich nach dem MVVM Pattern zu einer neuen Page navigieren, um mir in dieser eine Farbe auszuwählen und die dann zum PaintCollectionVm hinzuzufügen? Würde ich ein Command im Viewmodel nutzen hätte ich ja den Verweis aufs View im Viewmodel. Im Grunde ist es ja ein Dialog, nur wie designt man soetwas MVVM like?
In der MainPage hätte ich ja ein ähnliches XAML mit dem Unterschied, dass noch ein Slider, der an BlendFactor gebunden ist, im DataTemplate der Listbox ist. Nun müsste ich bei jeder Änderung von BlendFactor (und wenn eine Farbe der Liste hinzugefügt wird) die Hintergrundfarbe der Page neu berechnen (
Paint.BlendPaint
()). Wie stell ich das am Besten an?Grüße