Floating FB sharing byReview Results

Floating FB sharing byReview Results

  • WPF Tutorial

    • # Read in Your Language

    WPF Controls

    Tutorial Home | Layouts | Containers | Button | CheckBox and CheckedListBox | ComboBox | DateTimePicker and MonthCalendar | DataGrid | Label and LinkLabel | ListBox | ListView | TextBox and MaskedTextBox | PictureBox and ProgressBar | TreeView | WebBrowser | Menus,Status and Toolbar | RadioButton | RichTextBox | ToolTip and Scrolling | Custom Controls

    DataGrid control in WPF


    Namespace : System.Windows.Controls.DataGrid

    Designer Code:

            <DataGrid Height="210" HorizontalAlignment="Left" Margin="12,21,0,0" 
            Name="dataGrid1" VerticalAlignment="Top" Width="288" />

    Types of datagrid columns:

    • DataGridCheckBoxColumn for bool values
    • DataGridComboBoxColumn for list values
    • DataGridHyperlinkColumn for link values
    • DataGridTemplateColumn for custom template
    • DataGridTextColumn to text values

    Adding DataGrid Columns:

            <DataGrid Height="210" HorizontalAlignment="Left" Margin="12,21,0,0" 
            Name="dataGrid1" VerticalAlignment="Top" Width="288">
                    <DataGridTextColumn Header="ID" />
                    <DataGridTextColumn Header="Name" />
                    <DataGridHyperlinkColumn Header="Value" />

    Data Binding in DataGrid:

    This is done using itemsource property of datagrid.

            <DataGrid Height="210" HorizontalAlignment="Left" Margin="12,21,0,0" 
            Name="dataGrid1" VerticalAlignment="Top" Width="288">

            public class DatagridBinding
                public int ID { get; set; }
                public string Name { get; set; }
                public DateTime Value { get; set; }
            //List object to Bind
            List<DatagridBinding> binList = new List<DatagridBinding>();
                binList.Add(new DatagridBinding()
                    ID = 1,
                    Name = "Ravi",
                    Value = DateTime.Today
                binList.Add(new DatagridBinding()
                    ID = 2,
                    Name = "Ashish",
                    Value = DateTime.Today
                binList.Add(new DatagridBinding()
                    ID = 3,
                    Name = "Arun",
                    Value = DateTime.Today
            dataGrid1.ItemsSource = binList;

    Binding a datatable to DataGrid:

            <DataGrid Height="210" HorizontalAlignment="Left" Margin="12,21,0,0" 
            Name="dataGrid1" VerticalAlignment="Top" Width="288">
                    <DataGridTextColumn binding="{Binding id}" Header="ID" />
                    <DataGridTextColumn binding="{Binding name}" Header="Name" />
                    <DataGridHyperlinkColumn binding="{Binding value}" 
                    Header="Value" />

            string ConString = 
            string CmdString = string.Empty;
            using (SqlConnection con = new SqlConnection(ConString))
                CmdString = "SELECT id, name, value FROM win2wpf";
                SqlCommand cmd = new SqlCommand(CmdString, con);
                SqlDataAdapter sda = new SqlDataAdapter(cmd);
                DataTable dt = new DataTable("win2wpf");
                dataGrid1.ItemsSource = dt.DefaultView; 

    Other properties in DataGrid:

            //For row column background colors
            Background="Gray" //for Background color of grid
            RowBackground="Blue" //for Row Background color of grid
            AlternatingRowBackground="Orange"//for AlternatingRow 
                                            //Background color of grid
            //Header visibility
            CanUserSortColumns = "True"
            SelectionMode="Extended" //can be single or Extended

    Image template in DataGrid:

            <DataGridTemplateColumn Header="Image" Width="SizeToCells" 
                        <Image Source="{Binding Image}" />

    Displaying Image (or) number on WPF data grid row header:

    For Number:

    There are different ways to achieve this

    One of them is indexing the data and then bind the indexed data to DataGrid.

    Here there will be one more column added with no header for row index display.

            <DataGrid x:Name="Dggrid" EnableColumnVirtualization="True" 
            AlternatingRowBackground="LightGray" AutoGenerateColumns="False">  
                   <DataGridTextColumn Binding="{Binding Path=Index}" Header=""/>  
                   <DataGridTextColumn Binding="{Binding Path=Column1}" Header=" 
                   Column1″ />  
                   <DataGridTextColumn Binding="{Binding Path= Column2}" Header=" 
                   Column2″ />  
                   <DataGridTextColumn Binding="{Binding Path= Column3}" Header=" 
                   Column3″ /> 

    Another way which displays running numbers on row header is by using loading event of datagrid.

            private void dataGrid1_LoadingRow(object sender, 
            DataGridRowEventArgs e)
                e.Row.Header = e.Row.GetIndex();              

    For image:

    To display image on row header , create a data template and assign this to the row header template of datagrid

            <DataTemplate x:Name="sample" x:Key="rowHeaderTemplate1″>
                <StackPanel Orientation="Horizontal">
                <Image x:Name="editImage" VerticalAlignment="Center" 
                HorizontalAlignment="Left" Source="graphics/tasks.ico" Width="16″ 
                Margin="1,0″ Visibility="Hidden"/>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource 
                    FindAncestor,AncestorType={x:Type DataGridRow}},
                    Path=Item.IsEditing}" Value="True">
                        <Setter TargetName="editImage" Property="Visibility" 

    DateTime Column in DataGrid:

    This can be acheived in two ways, using string format in the DataGridHyperlinkColumn binding and using DatePicker in DataGridTemplateColumn.
                    <DataGridTextColumn Binding="{Binding id}" Header="ID" />
                    <DataGridTextColumn Binding="{Binding name}" Header="Name" />    
                    <DataGridHyperlinkColumn Header="DateOfBirth" 
                    Binding="{Binding Path=Contact.TimeUpdate, 
                    StringFormat={}\{0:dd/MM/yyyy hh:mm\}, Mode=OneWay}"/>

    DatePicker Using template column

               <DatePicker SelectedDate="{Binding RelativeSource=
               {RelativeSource FindAncestor, AncestorType={x:Type my:DateColumn}}, 
               Path=Value}"  />

    << Previous >> | << Next >>