Make WPF element responsive on the height and fix some glitches?

I choose WPF as GUI toolkit as the application will run on Windows only.


My actual code:


MainWindow.xaml.cs



public MainWindow()
{
InitializeComponent();

List<Task> tasks = new List<Task>();
tasks.Add(new Task() { Selected = false, Name = "Task Name #01", Priority = "Urgent", Description = "Lorem ipsum", Run = "RunTask01" });
tasks.Add(new Task() { Selected = false, Name = "Task Name #02", Priority = "Urgent", Description = "Lorem ipsum", Run = "RunTask02" });
tasks.Add(new Task() { Selected = false, Name = "Task Name #03", Priority = "Urgent", Description = "Lorem ipsum", Run = "RunTask03" });
tasks.Add(new Task() { Selected = false, Name = "Task Name #04", Priority = "Urgent", Description = "Lorem ipsum", Run = "RunTask04" });
tasks.Add(new Task() { Selected = false, Name = "Task Name #05", Priority = "Urgent", Description = "Lorem ipsum", Run = "RunTask05" });
tasks.Add(new Task() { Selected = false, Name = "Task Name #06", Priority = "Urgent", Description = "Lorem ipsum", Run = "RunTask06" });
tasks.Add(new Task() { Selected = false, Name = "Task Name #07", Priority = "Urgent", Description = "Lorem ipsum", Run = "RunTask07" });
tasks.Add(new Task() { Selected = false, Name = "Task Name #08", Priority = "Urgent", Description = "Lorem ipsum", Run = "RunTask08" });
tasks.Add(new Task() { Selected = false, Name = "Task Name #09", Priority = "Urgent", Description = "Lorem ipsum", Run = "RunTask09" });
tasks.Add(new Task() { Selected = false, Name = "Task Name #10", Priority = "Urgent", Description = "Lorem ipsum", Run = "RunTask10" });
tasks.Add(new Task() { Selected = false, Name = "Task Name #11", Priority = "Urgent", Description = "Lorem ipsum", Run = "RunTask11" });
tasks.Add(new Task() { Selected = false, Name = "Task Name #12", Priority = "Urgent", Description = "Lorem ipsum", Run = "RunTask12" });

dgTask.ItemsSource = tasks;
}

public class Task
{
public bool Selected { get; set; }
public string Name { get; set; }
public string Priority { get; set; }
public string Description { get; set; }
public string Run { get; set; }
}


MainWindow.xaml



<Window x:Class="SpeechlessBeta.MainWindow"
xmlns="http://ift.tt/o66D3f"
xmlns:x="http://ift.tt/mPTqtT"
Title="MainWindow" Height="320" Width="500">
<Grid Margin="5">
<DockPanel LastChildFill="True">
<DataGrid DockPanel.Dock="Top" Margin="0,0,0,5" Name="dgTask"/>
<Button Height="24" Margin="5,0,0,0" Padding="15,0" Content="Btn2" DockPanel.Dock="Right"/>
<Button Height="24" Margin="5,0,0,0" Padding="15,0" Content="Btn1" DockPanel.Dock="Right"/>
<ProgressBar Height="24"/>
</DockPanel>
</Grid>
</Window>


This is the result I want (mockup):

http://ift.tt/1EfXigD


But this is what I've got:

http://ift.tt/1DyVV9u


The "Run" column should be hidden and corresponds to the method that will be executed if the checkbox is selected and if I press the button "Btn2".


Issues:



  • The DataGrid is not responsive/fluid on the height at all.

  • How to rename the first column or add an image as header?

  • I don't know why I've got an empty column on the left...

  • There is an empty row too...

  • Why I need to click twice to select a checkbox? Can I change this behavior?