Adding new rows to datagrid

See more:

C#

WPF

Hello Everyone,

I am facing a problem with my datagrid , see when I bind it to an ObservableCollection the structure of the collection appears at Design time and later when the datagrid loads it will display empty rows at the beginning.

The second problem I am having is that I can't the empty row at the bottom to add new items although I set the CanUserAddRows to true and IsReadonly to false, is there any possible way to deal with these two problems ?

Thank you previously

SourceCode : I have a class called "ElevesClasses", and an Observablecolection defined as :

public ObservableCollection<EleveClasses> OCEtudiant = new ObservableCollection<EleveClasses>();

and the CollectionViewSource :

<Window.Resources>
        <CollectionViewSource Source="OCEtudiant" x:Key="ElevesCVS" />
</Window.Resources>

and then the datagrid is bound to the collectionViewsource as follows:

<DataGrid Name="ListElevesGrid" Margin="2,2,2,2" DockPanel.Dock="Top" AutoGenerateColumns="False"
                  CanUserDeleteRows="True"  CanUserAddRows="True" FlowDirection="LeftToRight" 
                  ItemsSource="{Binding Source=OCEtudiant}" >
            <DataGrid.Columns>
                <DataGridTextColumn Header="FamilyName" IsReadOnly="False"/>
                <DataGridTextColumn Header="FirstName" IsReadOnly="False"/>
                <DataGridTemplateColumn Header="Date of Birth" IsReadOnly="False">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <DatePicker />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTextColumn Header="Place of birth" IsReadOnly="False"/>
                <DataGridTemplateColumn Header="Photo" IsReadOnly="False">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button Click="BrowsePhoto" MaxHeight="60" MaxWidth="60">
                                <Image Name="PhotoEleve" HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
                            </Button> 
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>

The problems are :
1- At design time here is the screen shot of the grid : http://s8.postimg.org/5o2dogwlx/Datagrid_Design_time.jpg , it shows some empty rows even at run time.

2- I want to add rows by clicking on the rows and add them directly , but I can't.