<Page x:ConnectionId='1'
    x:Class="GolfComp.Views.SpelerListpage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GolfComp.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls" 
    xmlns:telerikGrid="using:Telerik.UI.Xaml.Controls.Grid"
    mc:Ignorable="d" >

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <RelativePanel>
            <CommandBar x:ConnectionId='2' x:Name="mainCommandBar" HorizontalAlignment="Stretch"                                      >
                <AppBarButton x:ConnectionId='13'
                                            
                    Icon="Add"
                    Label="New"
                    ToolTipService.ToolTip="New record"/>
                <AppBarButton x:ConnectionId='14'
                                        
                    Icon="Delete"
                    Label="Delete"
                    ToolTipService.ToolTip="Delete record" />
                <AppBarButton x:ConnectionId='15'
                                              
                    Icon="Refresh"
                    Label="Update"
                    ToolTipService.ToolTip="Update record" />
            </CommandBar>
            <StackPanel x:ConnectionId='3'
                x:Name="newRecordStackPanel"
                Orientation="Horizontal"                
                RelativePanel.Below="mainCommandBar">
                <TextBox x:ConnectionId='5'
                    Header="Voornaam"
                    PlaceholderText="voornaam"
                    Margin="8,8,16,8"
                    
                    x:Name="VoorNaamTextBox" />
                <TextBox x:ConnectionId='6'
                    Header="Achternaam"
                    PlaceholderText="achternaam"
                    Margin="8,8,16,8"
                    
                    x:Name="AchternaamTextBox" />
                <TextBox x:ConnectionId='7'
                    Header="Handicap"
                    PlaceholderText="handicap"
                    Margin="8,8,16,8"                    
                    x:Name="HandicapTextBox" />
                <TextBox x:ConnectionId='8'
                    Header="Telefoon"
                    PlaceholderText="telefoon"
                    Margin="8,8,16,8"                    
                    x:Name="TelefoonTextBox" />
                <TextBox x:ConnectionId='9'
                    Header="E-Mail adres"
                    PlaceholderText="e-mail"
                    Margin="8,8,16,8"                    
                    x:Name="EmailTextBox" />
                
                <ComboBox x:ConnectionId='10' x:Name="golfclubDropDown" Header="Homeclub" Margin="8,8,16,8" MinWidth="150"/>
                
                
                
                <AppBarButton x:ConnectionId='11' x:Name="DeleteNewRecord"                               Icon="Cancel"/>
                <AppBarButton x:ConnectionId='12' x:Name="SaveNewRecord"                             Icon="Save"/>
            </StackPanel>
            <telerikGrid:RadDataGrid x:ConnectionId='4' 
                AutoGenerateColumns="False"
                x:Name="Datagrid" 
                BorderThickness="0" 
                ColumnDataOperationsMode="Flyout" 
                GridLinesVisibility="None"
                GroupPanelPosition="Left" 
                RelativePanel.AlignLeftWithPanel="True"
                RelativePanel.AlignRightWithPanel="True"
                RelativePanel.Below="newRecordStackPanel"
                UserEditMode="Inline"
                                                                 >
                <telerikGrid:RadDataGrid.Columns>
                    <telerikGrid:DataGridTextColumn PropertyName="Voornaam" Header="Voornaam"/>
                    <telerikGrid:DataGridTextColumn PropertyName="Achternaam" Header="Achternaam"/>
                    <telerikGrid:DataGridNumericalColumn PropertyName="Handicap" Header="Handicap"/>
                    <telerikGrid:DataGridTextColumn PropertyName="Naam" Header="Homeclub" />
                    <telerikGrid:DataGridTextColumn PropertyName="Telefoon" Header="Telefoon" />
                    <telerikGrid:DataGridTextColumn PropertyName="Email" Header="e-mailadres" />
                </telerikGrid:RadDataGrid.Columns>
            </telerikGrid:RadDataGrid>
        </RelativePanel>
    </Grid>
</Page>

