I am trying to make a simple download manager, I am having trouble with adding a column with ProgressBars, it creates two columns with the same value but one has numeric and one has progressbar values. How can I make "Progress1" be hidden or remove it but still keep the values in "Progress2"
Here is the main xaml
<DataGrid.Columns>
<!--#region Program Number -->
<DataGridTemplateColumn SortMemberPath="#" Header="#">
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<TextBlock Text="{Binding ProgramID}"/>
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
<!--#endregion-->
<!--#region Program Number -->
<DataGridTemplateColumn SortMemberPath="Name" Header="Name">
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
<!--#endregion-->
<!--#region Program Number -->
<DataGridTemplateColumn SortMemberPath="Size" Header="Size">
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<TextBlock Text="{Binding Size}"/>
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
<!--#endregion-->
<!--#region Progress bar columns -->
<DataGridTemplateColumn SortMemberPath="Progress"
Header="Progress" Width="100">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ProgressBar Value="{Binding Progress}"
Height="15"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!--#endregion-->
</DataGrid.Columns>
</DataGrid>
Here is the Code-Behind of the programs
public class Programs : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void OnProperyChanged(string PropertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(PropertyName));
}
private int _programid;
public int ProgramID
{
get { return _programid; }
set
{
_programid = value;
OnProperyChanged($"{nameof(ProgramID)}");
}
}
private string _name;
public string Name
{
get { return _name; }
set
{
_name = value;
OnProperyChanged($"{nameof(Name)}");
}
}
private double _size;
public double Size
{
get { return _size; }
set
{
_size = value;
OnProperyChanged($"{nameof(Size)}");
}
}
private double _progress;
public double Progress
{
get { return _progress; }
set
{
_progress = value;
OnProperyChanged($"{nameof(Progress)}");
}
}
public ObservableCollection<Programs> ProgramList()
{
ObservableCollection<Programs> programs = new ObservableCollection<Programs>
{
new Programs { _programid = 1, _name = "Program0", _size = 5.1, _progress = 100 },
new Programs { _programid = 2, _name = "Program1", _size = 7.1, _progress = 36.7 },
new Programs { _programid = 3, _name = "Program2", _size = 1.1, _progress = 44.7 },
new Programs { _programid = 4, _name = "Program3", _size = 6.1, _progress = 88.7 },
new Programs { _programid = 5, _name = "Program4", _size = 2.1, _progress = 89.7 },
new Programs { _programid = 6, _name = "Program5", _size = 9.1, _progress = 68.7 },
new Programs { _programid = 7, _name = "Program6", _size = 5.1, _progress = 98.7 },
new Programs { _programid = 8, _name = "Program7", _size = 2.1, _progress = 59.7 },
new Programs { _programid = 9, _name = "Program8", _size = 83.1, _progress = 18.7 }
};
return programs;
}
}
Here is what it look like (First time posting a question so if anything is missing I'll be glad to add)
The problem is the columns are getting auto generated because you have not set AutoGeneratedColumns="false"
and true
is the default.
When you don't set it to false
the DataGrid
will generate a column for each property in the assigned viewmodel.
For more information have a look at DataGrid.AutoGenerateColumns Property
When you set it to false you'll only see the progress bar. So you have to specifiy the other columns like you did it with the ProgressBar
.
You could it like this
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding ProgramID}"/>
<DataGridTextColumn Binding="{Binding Name}"/>
<DataGridTextColumn Binding="{Binding Size}"/>
<DataGridTemplateColumn SortMemberPath="Progress" Header="Progress2">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ProgressBar Value="{Binding Progress1}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
edit
Use DataGridTextColumn
like this
<DataGridTextColumn SortMemberPath="ProgramID"
Header="#"
Binding="{Binding ProgramID}"/>
instead of a TemplateColumn
when you want to show text. Much easier ;)
The problem why you won't see anything with your code is hat you only set the
CellEditingTemplate
and not the CellTemplate
.
The CellEditingTemplate
is the template which will be shown when the cell is in edit mode.
The CellTemplate
is the one which will be shown when the cell isn't in edit mode.
When you wan't to do it your way you have to change this like
<DataGridTemplateColumn SortMemberPath="ProgramID" Header="#">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding ProgramID}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>