Overview

Creating a Startwindow

Apollon.WPF/Apollon.WPF.csproj

@@ -7,4 +7,8 @@
     <UseWPF>true</UseWPF>
   </PropertyGroup>
 
+  <ItemGroup>
+    <PackageReference Include="MahApps.Metro.IconPacks.Material" Version="4.11.0" />
+  </ItemGroup>
+
 </Project>

Apollon.WPF/App.xaml.cs

@@ -1,4 +1,5 @@
-using System;
+using Apollon.WPF.ViewModels;
+using System;
 using System.Collections.Generic;
 using System.Configuration;
 using System.Data;
@@ -15,7 +16,10 @@ namespace Apollon.WPF
     {
         protected override void OnStartup(StartupEventArgs e)
         {
-            MainWindow = new MainWindow();
+            MainWindow = new MainWindow()
+            {
+               DataContext = new ApollonOverviewViewModel()
+            };
             MainWindow.Show();
 
             base.OnStartup(e);

Apollon.WPF/MainWindow.xaml

@@ -31,7 +31,7 @@
                 BorderBrush="Transparent"
                 Content="🗙"
                 FontSize="20"   
-                Foreground="SlateGray"                
+                Foreground="#0000a0"                
                 VerticalContentAlignment="Center"
                 HorizontalContentAlignment="Center"
                 HorizontalAlignment="Right" Margin="0,2,24,8"                
@@ -45,7 +45,7 @@
                 Content="☐"
                 FontSize="20" 
                 FontWeight="UltraBold"
-                Foreground="SlateGray"                
+                Foreground="#0000a0"                
                 VerticalContentAlignment="Center"
                 HorizontalContentAlignment="Center"
                 HorizontalAlignment="Right" Margin="0,2,64,8"
@@ -61,7 +61,7 @@
                 Content="🗕"
                 FontSize="20"   
                 FontWeight="Bold"
-                Foreground="SlateGray"                
+                Foreground="#0000a0"                
                 VerticalContentAlignment="Center"
                 HorizontalContentAlignment="Center"
                 HorizontalAlignment="Right" Margin="0,2,104,8"

Apollon.WPF/Stores/SelectedApollonStore.cs

@@ -0,0 +1,13 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Apollon.WPF.Stores
+{
+    public class SelectedApollonStore
+    {
+        public int MyProperty { get; set; }
+    }
+}

Apollon.WPF/ViewModels/ApollonOverviewDetailsViewModel.cs

@@ -0,0 +1,26 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Apollon.WPF.ViewModels
+{
+    public class ApollonOverviewDetailsViewModel : ViewModelBase
+    {
+        public string Organisation { get; }
+        public string Tournamentname { get; }
+        public string Category { get; }
+        public DateTime Datetime { get; }
+        public string Location { get; }
+
+        public ApollonOverviewDetailsViewModel()
+        {
+            Organisation = "Deutscher Schützenbund";
+            Tournamentname = "Deutsche Meisterschaft 2021";
+            Category = "Bogenschießen im Freien";
+            Datetime = DateTime.Now;
+            Location = "Wiesbaden";
+        }
+    }
+}

Apollon.WPF/ViewModels/ApollonOverviewListingItemViewModel.cs

@@ -0,0 +1,20 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows.Input;
+
+namespace Apollon.WPF.ViewModels
+{
+    public class ApollonOverviewListingItemViewModel : ViewModelBase
+    {
+        public string Tournamentname { get; }
+        public ICommand DeleteCommand { get; }
+
+        public ApollonOverviewListingItemViewModel(string tournamentname)
+        {
+            Tournamentname = tournamentname;            
+        }
+    }
+}

Apollon.WPF/ViewModels/ApollonOverviewListingViewModel.cs

@@ -0,0 +1,24 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Apollon.WPF.ViewModels
+{
+    public class ApollonOverviewListingViewModel : ViewModelBase
+    {
+        private readonly ObservableCollection<ApollonOverviewListingItemViewModel> _apollonOverviewListingItemViewModels;
+        public IEnumerable<ApollonOverviewListingItemViewModel> ApollonOverviewListingItemViewModels => _apollonOverviewListingItemViewModels;
+
+        public ApollonOverviewListingViewModel()
+        {
+            _apollonOverviewListingItemViewModels = new ObservableCollection<ApollonOverviewListingItemViewModel>();
+
+            _apollonOverviewListingItemViewModels.Add(new ApollonOverviewListingItemViewModel("Testmeisterschaft1"));
+            _apollonOverviewListingItemViewModels.Add(new ApollonOverviewListingItemViewModel("Testmeisterschaft2"));
+            _apollonOverviewListingItemViewModels.Add(new ApollonOverviewListingItemViewModel("Testmeisterschaft3"));
+        }
+    }
+}

Apollon.WPF/ViewModels/ApollonOverviewViewModel.cs

@@ -0,0 +1,22 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows.Input;
+
+namespace Apollon.WPF.ViewModels
+{
+    public class ApollonOverviewViewModel : ViewModelBase
+    {
+        public ApollonOverviewListingViewModel ApollonOverviewListingViewModel { get; }
+        public ApollonOverviewDetailsViewModel ApollonOverviewDetailsViewModel{ get; }
+        public ICommand AddTournamentCommand { get; }
+
+        public ApollonOverviewViewModel()
+        {
+            ApollonOverviewListingViewModel = new ApollonOverviewListingViewModel();
+            ApollonOverviewDetailsViewModel = new ApollonOverviewDetailsViewModel();
+        }
+    }
+}

Apollon.WPF/ViewModels/ViewModelBase.cs

@@ -7,11 +7,11 @@ using System.Threading.Tasks;
 
 namespace Apollon.WPF.ViewModels
 {
-    public class BaseViewModel : INotifyPropertyChanged
+    public class ViewModelBase : INotifyPropertyChanged
     {
-        public event PropertyChangedEventHandler? PropertyChanged;
+        public event PropertyChangedEventHandler PropertyChanged;
 
-        protected void OnPrpertyChanged(string properyName)
+        protected virtual void OnPrpertyChanged(string properyName = null)
         {
             PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(properyName));
         }

Apollon.WPF/Views/ApollonOverviewView.xaml

@@ -43,38 +43,68 @@
                    TextAlignment="Center"
                    FontFamily="Arial"
                    FontWeight="Bold"
-                   FontSize="18"
+                   FontSize="20"
                    Foreground="#0000a0">                
             </TextBlock>
         </StackPanel>
 
-        <StackPanel Grid.Row="2"
+        <StackPanel Grid.Row="2" 
-                    VerticalAlignment="Center">            
+                    VerticalAlignment="Center">
-            <components:ApollonOverViewListing Height="400"/>
+
+            <Image Grid.Column="2"
+               Grid.Row="2"
+               Source="D:\Projekte\Apollon\Apollon\Apollon.WPF\Images\Scheibe.png"
+               Width="250"
+               Height="250">
+            </Image>
+
             <Button Style="{StaticResource ModernButton}"
                     Content="Neues Turnier vorbereiten"
                     FontSize="16"
                     Height="40"
                     Width="210"
-                    Margin="40"/>
+                    Margin="40"
+                    Cursor="Hand"
+                    Command="{Binding AddTournamentCommand}"/>
         </StackPanel>
+
         <StackPanel Grid.Column="1"
                     Grid.Row="1"
                     VerticalAlignment="Center">
-            <components:ApollonOverviewDetails/>
+            <TextBlock
+                   Margin="20"
+                   Text="Liste der erstellten Turniere"
+                   TextAlignment="Center"
+                   FontFamily="Arial"
+                   FontWeight="Bold"
+                   FontSize="16"
+                   Foreground="#0000a0">
+            </TextBlock>
+            <components:ApollonOverViewListing Height="400"
+                                               DataContext="{Binding ApollonOverviewListingViewModel}"/>
+        </StackPanel>
+        
+        <StackPanel Grid.Column="2"
+                    Grid.Row="1"
+                    VerticalAlignment="Center">
+            <TextBlock
+                   Margin="20"
+                   Text="Turnieredetails"
+                   TextAlignment="Center"
+                   FontFamily="Arial"
+                   FontWeight="Bold"
+                   FontSize="16"
+                   Foreground="#0000a0"/>
+            <components:ApollonOverviewDetails Width="320"
+                                               DataContext="{Binding ApollonOverviewDetailsViewModel}"/>
             <Button Style="{StaticResource ModernButton}"
                 Content="Turnier bearbeiten"
                 FontSize="16"
                 Height="40"
                 Width="210"
-                Margin="40"/>
+                Margin="40"
-        </StackPanel>
+                Cursor="Hand"/>
-       
+        </StackPanel>       
-        <Image Grid.Column="2"
+              
-               Grid.Row="2"
-               Source="D:\Projekte\Apollon\Apollon\Apollon.WPF\Images\Scheibe.png"
-               Width="300"
-               Height="300">            
-        </Image>        
     </Grid>
 </UserControl>

Apollon.WPF/Views/Components/ApollonOverViewListing.xaml

@@ -3,15 +3,52 @@
              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:Apollon.WPF.Views.Components"
+             xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
+             
              mc:Ignorable="d" 
              d:DesignHeight="450" d:DesignWidth="800">
-    <Grid>
+    <Grid>        
         <Border BorderBrush="#0000a0"
                 BorderThickness="1"
                 CornerRadius="10"
-                Width="300">
+                >
+            <ListView FontSize="16"
+                      Foreground="#0000a0"
+                      FontWeight="Bold"
+                      Background="Transparent"
+                      BorderBrush="Transparent"
+                      Padding="20"
+                      ItemsSource="{Binding ApollonOverviewListingItemViewModels}">
+                <ListView.ItemContainerStyle>
+                    <Style TargetType="ListViewItem">
+                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+                    </Style>
+                </ListView.ItemContainerStyle>
+                <ListView.ItemTemplate>
+                    <DataTemplate>
+                        <Grid>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="*"></ColumnDefinition>
+                                <ColumnDefinition Width="auto"></ColumnDefinition>
+                            </Grid.ColumnDefinitions>
+                            <TextBlock Grid.Column="0" Text="{Binding Tournamentname}"/>
+                            <Button Grid.Column="1"
+                                    Background="Transparent"
+                                    BorderThickness="0"
+                                    Cursor="Hand"
+                                    Command="{Binding DeleteCommand}">
+                                <iconPacks:PackIconMaterial Kind="TrashCan"
+                                                        VerticalAlignment="Center"
+                                                        HorizontalAlignment="Center"
+                                                        Grid.Column="1"
+                                                        Foreground="Red"/>
+                            </Button>
+                        </Grid>
+                        
+                    </DataTemplate>
+                </ListView.ItemTemplate>
+            </ListView>
         </Border>
-        <ListView Background="Transparent"/>
+       
     </Grid>
 </UserControl>

Apollon.WPF/Views/Components/ApollonOverviewDetails.xaml

@@ -12,21 +12,21 @@
                 CornerRadius="10">
         </Border>
         <StackPanel>
-            <TextBlock Text="Tuniername"
+            <TextBlock Text="{Binding Tournamentname}"
                        TextAlignment="Center"
                        FontFamily="Arial"
                        FontWeight="Bold"
                        FontSize="14"
                        Foreground="#0000a0"
                        Margin="40"/>
-            <TextBlock Text="Vom 01.01.2022 bis 03.01.2022"
+            <TextBlock Text="{Binding Datetime}"
                        TextAlignment="Center"
                        FontFamily="Arial"
                        FontWeight="Bold"
                        FontSize="14"
                        Foreground="#0000a0"
                        Margin="0,0,0,40"/>
-            <TextBlock Text="Veranstaltungsort"
+            <TextBlock Text="{Binding Location}"
                        TextAlignment="Center"
                        FontFamily="Arial"
                        FontWeight="Bold"