I'm working on a cookbook for myself, written in WPF/C#.
Additionally I'm new to Data Bindings.
My Problem is, I want to generate a Datagrid in a TabItem on runtime in code behind, including Bindings. I can't set a Datagrid at XAML because I want to create all TabItems dynamically.
Following Code so far:
XAML:
<UniformGrid Columns="2" Rows="1">
<TabControl Name="TabControl" TabStripPlacement="Left"/>
<TabItem Header= "first dish" Name = "firstdish"/>
</UniformGrid>
XAML.cs for generation:
//New Grid
var Grid = new DataGrid();
//Start Test list creation with three items
var TestList = new List<Receipt>();
//Set binding
Grid.ItemsSource = TestList;
var Rec = new Receipt();
Rec.Creator = "DaJohn1";
Rec.ID = 1;
Rec.Title = "TestReceipt1";
var Rec2 = new Receipt();
Rec2.Creator = "DaJohn2";
Rec2.ID = 2;
Rec2.Title = "TestReceipt2";
var Rec3 = new Receipt();
Rec3.Creator = "DaJohn3";
Rec3.ID = 3;
Rec3.Title = "TestReceipt3";
TestList.Add(Rec);
TestList.Add(Rec2);
TestList.Add(Rec3);
//End Test list creation
//Add Column
var SingleColumn = new DataGridTextColumn();
Grid.Columns.Add(SingleColumn);
SingleColumn.Binding = new Binding("Creator");
SingleColumn.Header = "Creator";
//Add Column
var SingleColumn2 = new DataGridTextColumn();
Grid.Columns.Add(SingleColumn2);
SingleColumn2.Binding = new Binding("Title");
SingleColumn2.Header = "Title";
//Set tabitem content to datagrid
firstdish.Content = Grid;
All I'm getting is an datagrid with four rows (looks like the count of Items is right), which are all empty, no data to be seen.
I'm staring at this since last Weeks Monday and can't find an answer anywhere.
Thanks for any ideas and solutions.
try changing
var TestList = new List<Receipt>();
to
var TestList = new ObservableCollection<Receipt>();
as it automatically notifies UI about changes.
I had a similar problem with items not rendering so this may be it.
I've taken your code and checked some of the things you do: The main error is that in your xaml code you created the Tab Control and then Put the TabItem outside it, Tabitem must be inside the control for it to work correctly. so First error is:
<TabControl Name="TabControl" TabStripPlacement="Left">
<TabItem Header="First dish" Name = "firstdish" />
</TbControl>
Other things you need to do before going on in my opinion are:
Assign your window or other UI element itself as datacontext
Verify that your Receipt class implements the INotifyPropertyChanged event that has to be raised by all its properties, or implement your properties as DependencyProperties (even if the latter is not necessary)
Transform your datasource TestList in an ObservableCollection
Create TestList as a class property not a local variable so that it is into the datacontext
I've made a small sample using the above indication and your code to let you see better how that works. You can download the zip here:
TestClassDataGrid.zip
Below code should work for you,
XAML:
<TabControl Name="TabControl" TabStripPlacement="Left">
<TabItem Header= "first dish" Name = "firstdish"/>
</TabControl>
.cs file
public Window()
{
InitializeComponent();
var Grid = new DataGrid();
//Start Test list creation with three items
var TestList = new List<Receipt>();
//Set binding
Grid.ItemsSource = TestList;
var Rec = new Receipt();
Rec.Creator = "DaJohn1";
Rec.ID = 1;
Rec.Title = "TestReceipt1";
var Rec2 = new Receipt();
Rec2.Creator = "DaJohn2";
Rec2.ID = 2;
Rec2.Title = "TestReceipt2";
var Rec3 = new Receipt();
Rec3.Creator = "DaJohn3";
Rec3.ID = 3;
Rec3.Title = "TestReceipt3";
TestList.Add(Rec);
TestList.Add(Rec2);
TestList.Add(Rec3);
//End Test list creation
//Add Column
var SingleColumn = new DataGridTextColumn();
Grid.Columns.Add(SingleColumn);
SingleColumn.Binding = new Binding("Creator");
SingleColumn.Header = "Creator";
//Add Column
var SingleColumn2 = new DataGridTextColumn();
Grid.Columns.Add(SingleColumn2);
SingleColumn2.Binding = new Binding("Title");
SingleColumn2.Header = "Title";
//Set tabitem content to datagrid
Grid.AutoGenerateColumns = false;
firstdish.Content = Grid;
}
Related
I'm writing a WPF application which makes use of the DataGrid control. I'm using the MaterialDesign theme to style the application and this gives a nice look and feel.
However for complex reasons I wont go into here I'm required to add the columns into the dataGrid programmatically. For some of the columns I'm also styling the columns to highlight pass / fail in red. When I do this I loose 'some of the styling' provided by material design for that columns. Namely the Horizontal and Vertical alignment.
The code to the above is as follows:
// Define Setter
Setter setterResultFail = new Setter();
setterResultFail.Property = DataGridCell.BackgroundProperty;
setterResultFail.Value = Brushes.Red;
// Create a column for the Site.
var currentColumn = new DataGridTextColumn();
currentColumn.Header = "Device #";
currentColumn.Binding = new Binding("Device");
ResultsDataGrid.Columns.Add(currentColumn);
// Create a column for the Site.
currentColumn = new DataGridTextColumn();
currentColumn.Header = "Site";
currentColumn.Binding = new Binding("Site");
ResultsDataGrid.Columns.Add(currentColumn);
// Create a column for the Pass Fail.
currentColumn = new DataGridTextColumn();
currentColumn.Header = "Pass Fail";
currentColumn.Binding = new Binding("PassFail") { Converter = new BooleanToPassFailConverter() };
// Create cellstyle to make the cell 'red' when the PassFail value is False. ( this is done via a data trigger )
cellStyle = new Style(typeof(DataGridCell));
// Define First DataTrigger that sets a CELL red if the value is a fail.
dataTrigger = new DataTrigger();
dataTrigger.Value = "False";
dataTrigger.Binding = new Binding("PassFail");
dataTrigger.Setters.Add(setterResultFail);
// Add the data-triggers to the cell style.
cellStyle.Triggers.Clear();
cellStyle.Triggers.Add(dataTrigger);
// Apply the newly created cell style.
currentColumn.CellStyle = cellStyle;
ResultsDataGrid.Columns.Add(currentColumn);
Clearly the new cellStyle is used instead of the MaterialDesign style. I've tried setting the values for vertical / horizontal manually but I can't get it to look correct:
Setter setterTextContentHorizonalAlignment = new Setter();
setterTextContentHorizonalAlignment.Property = DataGridCell.HorizontalContentAlignmentProperty;
setterTextContentHorizonalAlignment.Value = HorizontalAlignment.Center;
Setter setterTextContentVerticalAlignment = new Setter();
setterTextContentVerticalAlignment.Property = DataGridCell.VerticalContentAlignmentProperty;
setterTextContentVerticalAlignment.Value = VerticalAlignment.Center;
Setter setterTextHorizontalAlignment = new Setter();
setterTextHorizontalAlignment.Property = DataGridCell.HorizontalAlignmentProperty;
setterTextHorizontalAlignment.Value = HorizontalAlignment.Center;
Setter setterTextVerticalAlignment = new Setter();
setterTextVerticalAlignment.Property = DataGridCell.VerticalAlignmentProperty;
setterTextVerticalAlignment.Value = VerticalAlignment.Center;
cellStyle.Setters.Add(setterTextContentHorizonalAlignment);
cellStyle.Setters.Add(setterTextContentVerticalAlignment);
cellStyle.Setters.Add(setterTextHorizontalAlignment);
cellStyle.Setters.Add(setterTextVerticalAlignment);
Is there a way I can add to the style rather than replace it...similar to the BasedOn approch in XAML?
After much wasting of time on this question I came across Danny Beckett's similar question and King King's answer. By using his answer and applying it to the specific cell I was having trouble with it fixed the issue:King King's answer
// Create a column for the Pass Fail.
currentColumn = new DataGridTextColumn();
currentColumn.Header = "Pass Fail";
currentColumn.Binding = new Binding("PassFail") { Converter = new BooleanToPassFailConverter() };
// Create cellstyle to make the cell 'red' when the PassFail value is False. ( this is done via a data trigger )
cellStyle = new Style(typeof(DataGridCell));
// Define First DataTrigger that sets a CELL red if the value is a fail.
dataTrigger = new DataTrigger();
dataTrigger.Value = "False";
dataTrigger.Binding = new Binding("PassFail");
dataTrigger.Setters.Add(setterResultFail);
// Add the data-triggers to the cell style.
cellStyle.Triggers.Clear();
cellStyle.Triggers.Add(dataTrigger);
//root visual of the ControlTemplate for DataGridCell is a Border
var border = new FrameworkElementFactory(typeof(Border));
border.SetBinding(Border.BorderBrushProperty, new Binding("BorderBrush")
{
RelativeSource = RelativeSource.TemplatedParent
});
border.SetBinding(Border.BackgroundProperty, new Binding("Background") { RelativeSource = RelativeSource.TemplatedParent });
border.SetBinding(Border.BorderThicknessProperty, new Binding("BorderThickness") { RelativeSource = RelativeSource.TemplatedParent });
border.SetValue(SnapsToDevicePixelsProperty, true);
//the only child visual of the border is the ContentPresenter
var contentPresenter = new FrameworkElementFactory(typeof(ContentPresenter));
contentPresenter.SetBinding(SnapsToDevicePixelsProperty, new Binding("SnapsToDevicePixelsProperty") { RelativeSource = RelativeSource.TemplatedParent });
contentPresenter.SetBinding(VerticalAlignmentProperty, new Binding("VerticalContentAlignment") { RelativeSource = RelativeSource.TemplatedParent });
contentPresenter.SetBinding(HorizontalAlignmentProperty, new Binding("HorizontalContentAlignment") { RelativeSource = RelativeSource.TemplatedParent });
//add the child visual to the root visual
border.AppendChild(contentPresenter);
//here is the instance of ControlTemplate for DataGridCell
var template = new ControlTemplate(typeof(DataGridCell));
template.VisualTree = border;
//define the style
cellStyle.Setters.Add(new Setter(TemplateProperty, template));
cellStyle.Setters.Add(new Setter(VerticalContentAlignmentProperty, VerticalAlignment.Center));
cellStyle.Setters.Add(new Setter(HorizontalContentAlignmentProperty, HorizontalAlignment.Center));
// Apply the newly created cell style.
currentColumn.CellStyle = cellStyle;
I have seen several questions about doing a custom tooltip for a single line series.
I need a custom tool-tip for each data-point. I would like to add more to the tool-tip than just the dependent value path and the independent value path.
Example I have 2 data points on the same line one with a value(Y-axis)
of 2, date(x-axis) of 4/28/2016, and configuration of A. The other has
a value of 3, date of 4/29/2016, and configuration of B.
How would I also show the configurations? This is all done in code behind because I have a dynamic number of lineseries. So I can't just assign a style to each lineseries in the xaml.
var MyLineSeries = new LineSeries();
lMyLineSeries.DependentValuePath = "Y";
lMyLineSeries.IndependentValuePath = "X";
lMyLineSeries.DataPointStyle = lToolTipDataPointStyle;
This is my code for creating the tool tip style.
var lToolTipDataPointStyle = new Style(typeof(LineDataPoint));
var lTemplate = new ControlTemplate(typeof(LineDataPoint));
var lGridElement = new FrameworkElementFactory(typeof(Border));
//Tooltip
var lStackPanel = new StackPanel();
var lValueContentControl = new ContentControl();
lValueContentControl.SetBinding(ContentControl.ContentProperty, new Binding(myLineSeries.DependentValuePath));
lValueContentControl.ContentStringFormat = "Value: {0}";
var lConfigurationContentControl = new ContentControl();
lConfigurationContentControl.SetBinding(ContentControl.ContentProperty, new Binding())//This is what Idk what to bind to???
lConfigurationContentControl.ContentStringFormat = "Configuration: {0}";
lStackPanel.Children.Add(lValueContentControl);
lStackPanel.Children.Add(lConfigurationContentControl);
lGridElement.SetValue(ToolTipService.ToolTipProperty, lStackPanel);
var lEllipseElement = new FrameworkElementFactory(typeof(Ellipse));
lEllipseElement.SetValue(Ellipse.StrokeThicknessProperty, new TemplateBindingExtension(Border.BorderThicknessProperty));
lEllipseElement.SetValue(Ellipse.StrokeProperty, new TemplateBindingExtension(Border.BorderBrushProperty));
lEllipseElement.SetValue(Ellipse.FillProperty, new TemplateBindingExtension(Grid.BackgroundProperty));
lGridElement.AppendChild(lEllipseElement);
lTemplate.VisualTree = lGridElement;
var lTemplateSetter = new Setter();
lTemplateSetter.Property = LineDataPoint.TemplateProperty;
lTemplateSetter.Value = lTemplate;
lToolTipDataPointStyle.Setters.Add(lTemplateSetter);
return lToolTipDataPointStyle;
I figured it out by using the Tag on the Line series.
myLineSeries.Tag = "Configuration";
var lConfigurationContentControl = new ContentControl();
lConfigurationContentControl.SetBinding(ContentControl.ContentProperty, new Binding(myLineSeries.Tag.ToString()))
lConfigurationContentControl.ContentStringFormat = "Configuration: {0}";
I'm using GridView with a ListView control to show some catalog content. I'm loading the ListView content dynamically with code behind, creating GridViewColumns and binding them to properties in my custom catListItem class.
var view = new GridView();
var binding = new Binding("Name");
var resElement = _mResourceManager.GetElementByMdlID("vlu_usw_name_of");
view.Columns.Add(new GridViewColumn { Header = resElement.Name, DisplayMemberBinding = binding });
binding = new Binding("Number");
resElement = _mResourceManager.GetElementByMdlID("vlu_usw_arc_logical_nmbr");
view.Columns.Add(new GridViewColumn { Header = resElement.Name, DisplayMemberBinding = binding });
Everything is fine, but now I'm trying to add column with some icon, using the CellTemplate property of the GridViewColumn. Something like this:
var view = new GridView();
var col = new GridViewColumn { Header = "" };
var template = new System.Windows.DataTemplate(typeof(Image));
col.CellTemplate = template;
view.Columns.Add(col);
var binding = new Binding("Name");
var resElement = _mResourceManager.GetElementByMdlID("vlu_usw_name_of");
view.Columns.Add(new GridViewColumn { Header = resElement.Name, DisplayMemberBinding = binding });
binding = new Binding("Number");
resElement = _mResourceManager.GetElementByMdlID("vlu_usw_arc_logical_nmbr");
view.Columns.Add(new GridViewColumn { Header = resElement.Name, DisplayMemberBinding = binding });
I know there's a priority when using DisplayMemberBinding, CellTemplate and CellTemplateSelector.
So my question is:
How can I create (set, ...) content of the CellTemplate and probably bind it to a property of my custom class dynamically? I don't know what do I miss! I've searched for that issue, but everything I found is XAML solutions using DataTemplate.
It's important to do it with code behind.
Thanks in advance!
Actually I found the solution
HERE
I had to use FrameworkElementFactory. Here's the code I was looking for:
var column = new GridViewColumn { Header = "" };
var customTemplate = new System.Windows.DataTemplate();
var efImage = new FrameworkElementFactory(typeof(Image));
efImage.SetBinding(Image.SourceProperty, new Binding("Icon"));
customTemplate.VisualTree = efImage;
column.CellTemplate = customTemplate;
view.Columns.Add(column);
Hi I am using TabControl to make Conference System, the private chats would be in a new TabItem. I am using this code to present a new member chatting in private:
TabItem ti = new TabItem();
ti.Header="Name";
MyTabControl.Items.Add(ti);
but the problem with this code is that I am adding a list box in the TabItem but the TabItem doesn't have a function to add an item in it. how can I add items into TabItem?
Second try: I used this code to present a new member chatting in private
ItemsControl it = new ItemsControl();
ListBox lst = new ListBox();
lst.Width = 571;
lst.Height = 301;
it.Items.Add(lst);
tabControlChat.Items.Add(it);
with this code I can add all items I need in the new tab. but the main problem is that I can't name the tab there is no property like (ti.Header) to name the tab. so what is the solution please? and thank you
For short:
ListBox lb = new ListBox();
lb.Items.Add("chat member");
TabItem ti = new TabItem();
ti.Header = "Private Chats";
ti.Content = lb;
TabControl tc = new TabControl();
tc.Items.Add(ti);
Use this:
TabItem ti = new TabItem();
ti.Header = "Name";
tabControl1.Items.Add(ti);
ListBox lst = new ListBox();
lst.Width = 571;
lst.Height = 301;
ti.Content = lst;
I am trying to create a generic view, and I want it to contain a ListBox with a datatemplate
I want to create it either using pure C# code or if possible load it through xaml? If I can create a template I can get in c# as a resource of sorts.
What I have made until now is
private static ListBox CreateDayListBox()
{
var listBox = new ListBox();
var dataTemplate = new DataTemplate();
var grid = new Grid();
var columnDefinition1 = new ColumnDefinition {Width = GridLength.Auto};
var columnDefinition2 = new ColumnDefinition();
grid.ColumnDefinitions.Add(columnDefinition1);
grid.ColumnDefinitions.Add(columnDefinition2);
var rectangleItemBought = new Rectangle {Width = 50, Height = 50};
rectangleItemBought.SetBinding(Rectangle.FillProperty, new Binding("Bought"));
grid.Children.Add(rectangleItemBought);
var textBlockItemName = new TextBlock();
textBlockItemName.SetBinding(TextBlock.TextProperty, new Binding("Name"));
var textBlockItemQuantity = new TextBlock();
textBlockItemQuantity.SetBinding(TextBlock.TextProperty, new Binding("Quantity"));
var textBlockItemQuantityType = new TextBlock();
textBlockItemQuantityType.SetBinding(TextBlock.TextProperty, new Binding("QuantityType"));
var stackpanel = new StackPanel();
Grid.SetColumn(stackpanel, 1);
stackpanel.Children.Add(textBlockItemName);
stackpanel.Children.Add(textBlockItemQuantity);
stackpanel.Children.Add(textBlockItemQuantityType);
grid.Children.Add(stackpanel);
return listBox;
}
So I want the listbox datatemplate to contain 1 rectangle, 1 stackpanel with 3 textboxes inside
You can write the template in XAML then load it in your code.
Read this.
Besides, I'm pretty sure you can create the DataTemplate by code the same way you created the controls, look at this code (credit):
DataTemplate template = new DataTemplate();
FrameworkElementFactory factory =
new FrameworkElementFactory(typeof(StackPanel));
template.VisualTree = factory;
FrameworkElementFactory childFactory =
new FrameworkElementFactory(typeof(Image));
childFactory.SetBinding(Image.SourceProperty, new Binding("Machine.Thumbnail"));
childFactory.SetValue(Image.WidthProperty, 170.0);
childFactory.SetValue(Image.HeightProperty, 170.0);
factory.AppendChild(childFactory);
childFactory = new FrameworkElementFactory(typeof(Label));
childFactory.SetBinding(Label.ContentProperty,
new Binding("Machine.Descriiption"));
childFactory.SetValue(Label.WidthProperty, 170.0);
childFactory.SetValue(Label.HorizontalAlignmentProperty,
HorizontalAlignment.Center);
factory.AppendChild(childFactory);