Here's a concrete example of what I am attempting to do with the Telerik GridView control. Let's say I have an application that will read a delimited file (say CSV) which will have n columns. The value n can vary from file-to-file but is constant within a file. The application starts with an empty grid and adds columns as required to match the input file. The grid displays all data as strings in all cells. This works with either binding to a BindingList or putting the record (objects) into the GridView.Items list.
Now, what I want to do is put a single row at the top of the grid (a row that will not scroll) that contains comboboxes. That is, at the top of each column, the first row contains a combobox. On the first pass, the combobox will only be a drop list, but on the next pass I will add another row with a set of comboboxes that will be editable. For now, let's only consider drop lists.
The specific problem that I have is that I do not see how to set a specific type of control for a particular cell. Telerik provides a GridViewComboBoxColumn class that will define the behavior for an entire column but that's not what I need.
Because of the variable number of columns, I think that the code-behind would be the place to work this magic. I may have to do something in the xaml but, since I've only been in WPF for a few months, nothing is jumping out at me.
I've done something like this with the DataGridView and XtraGrid, but this one has me stumped. Pointers would be much appreciated.
In response to Jonathan D's answer, I have taken the provided code and modified it to recognize when a cell on the 0th row is being edited. When this is the case, a drop list is presented when the user initiates an edit operation.
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.GridView;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
namespace LLamasoft.DataGuru.Plugin.Internal.ConfigurationUI
{
public class RadGridViewComboboxHeaderColumn : GridViewBoundColumnBase
{
public static readonly DependencyProperty SelectedStringProperty =
DependencyProperty.Register("SelectedString", typeof(string), typeof(RadGridViewComboboxHeaderColumn), new PropertyMetadata(null));
public string SelectedString
{
get { return (string) GetValue(SelectedStringProperty); }
set { SetValue(SelectedStringProperty, value); }
}
public override FrameworkElement CreateCellEditElement(GridViewCell cell, object dataItem)
{
// we need the row on which this cell lives
GridViewDataControl gridViewDataControl = cell.ParentRow.GridViewDataControl;
object currentEditItem = gridViewDataControl.Items.CurrentEditItem;
int index = gridViewDataControl.Items.IndexOf(currentEditItem);
FrameworkElement frameworkElement = null;
if (index == 0)
{
BindingTarget = ComboBox.SelectedValueProperty;
ComboBox comboBox = new ComboBox();
// seed some values,
// this list should be set right after construction if static, otherwise via callback if dynamic
comboBox.Items.Add(string.Empty);
comboBox.Items.Add("apples");
comboBox.Items.Add("oranges");
if (!comboBox.Items.Contains(cell.Value))
{
comboBox.Items.Add(cell.Value);
}
comboBox.SelectedValue = SelectedString;
frameworkElement = comboBox;
}
else
{
BindingTarget = TextBox.TextProperty;
TextBox textBox = new TextBox();
textBox.Text = SelectedString;
frameworkElement = textBox;
}
frameworkElement.SetBinding(BindingTarget, CreateValueBinding());
return frameworkElement;
}
public override object GetNewValueFromEditor(object editor)
{
// ensure that the control will return the correct value when queried for it
ComboBox comboBox = editor as ComboBox;
if (comboBox != null)
{
// bound to comboBox.SelectedValue which carries the correct value
}
TextBox textBox = editor as TextBox;
if (textBox != null)
{
// bound to textBox.Text which carries the correct value
}
return base.GetNewValueFromEditor(editor);
}
private Binding CreateValueBinding()
{
Binding valueBinding = new Binding();
valueBinding.Mode = BindingMode.TwoWay;
valueBinding.NotifyOnValidationError = true;
valueBinding.ValidatesOnExceptions = true;
valueBinding.UpdateSourceTrigger = UpdateSourceTrigger.Explicit;
valueBinding.Path = new PropertyPath(this.DataMemberBinding.Path.Path);
return valueBinding;
}
}
}
The good news is that this shows that any edit control can be used in any cell based on requirements.
The bad parts are: 1) a dummy record has to be inserted at the 0th list position and must be maintained there, 2) the data is being stored back into the field on the 0th record and may require a different data type than is on the equivalent fields on the other records, and 3) the combobox is only shown when the cell is in the edit mode.
The latter issue for me may not be an issue elsewhere. I want a visual cue that the user is expected to interact with the cells at the top of the columns. Using this method, there is no differentiating factor between the top row and the rest of the rows until the edit operation begins. My ideal solution would have the cells always show their comboboxes.
One other issue that I find difficult to believe that I am facing is the fact that I cannot easily pin/freeze topmost rows. I want this line to always remain at the top after scrolling. There is no _grid.Rows[0].IsPinned = true functionality.
Telerik has responded to my request for info and suggests that I use a template selector to determine how the cell is represented. (http://www.telerik.com/community/forums/wpf/gridview/need-just-first-row-in-grid-to-be-all-comboboxes.aspx#1820310). At this point, I turn my attention to testing that method.
You want to create your own column
using System.Windows;
using System.Windows.Data;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.GridView;
using System;
namespace Inspect
{
public class DateTimePickerColumn : GridViewBoundColumnBase
{
public TimeSpan TimeInterval
{
get
{
return (TimeSpan) GetValue(TimeIntervalProperty);
}
set
{
SetValue(TimeIntervalProperty, value);
}
}
public static readonly DependencyProperty TimeIntervalProperty =
DependencyProperty.Register("TimeInterval", typeof(TimeSpan), typeof(DateTimePickerColumn), new PropertyMetadata(TimeSpan.FromHours(1d)));
public override FrameworkElement CreateCellEditElement(GridViewCell cell, object dataItem)
{
this.BindingTarget = RadDateTimePicker.SelectedValueProperty;
RadDateTimePicker picker = new RadDateTimePicker();
picker.IsTooltipEnabled = false;
picker.TimeInterval = this.TimeInterval;
picker.SetBinding(this.BindingTarget, this.CreateValueBinding());
return picker;
}
public override object GetNewValueFromEditor(object editor)
{
RadDateTimePicker picker = editor as RadDateTimePicker;
if (picker != null)
{
picker.DateTimeText = picker.CurrentDateTimeText;
}
return base.GetNewValueFromEditor(editor);
}
private Binding CreateValueBinding()
{
Binding valueBinding = new Binding();
valueBinding.Mode = BindingMode.TwoWay;
valueBinding.NotifyOnValidationError = true;
valueBinding.ValidatesOnExceptions = true;
valueBinding.UpdateSourceTrigger = UpdateSourceTrigger.Explicit;
valueBinding.Path = new PropertyPath(this.DataMemberBinding.Path.Path);
return valueBinding;
}
}
}
That is how you create a custom column. If you modify the CreateCellEditElement Method it will let you create custom cells how you like. You should even be able to detect the row number
Related
Hmm, not sure if I chose the right approach.
I have a grid of components. In the first column there are DatePickers.
In the second column there are combo-boxes. In the last column there are text-boxes. The grid has 15 rows.
I named them by their column and row number as you would number cells in a grid.
So dp1_1 for DatePicker are position (1,1), dp2_1 for position (2,1).
cb1_1 for ComboBox are position (1,1), cb2_1 for ComboBox position (2,1).
I keep my date pickers data, combo-boxes data, text-boxes data in an ordinary list for easy access/reference, like so:
public int numOfRows = 15;
private List<DateTime> _MyDateTimeList = new List<DateTime>();
public List<DateTime> MyDateTimeList
{
get { return _MyDateTimeList; }
set {
DateTime pomDatumObjava;
_MyDateTimeList = value;
for (int i = 0; i < numOfRows; i += 1)
{
pomDatumObjava = new DateTime();
// code for accessing/enabling/disabling the appropriate date picker, which doesn't work since I don't know how to send the window reference where my date pickers reside
// pomDatumObjava = Utils.enableDisableDatePicker(null, Constants.DP_LABEL + stringIndex, true, 1).SelectedDate.Value;
_MyDateTimeList.Add(pomDatumObjava);
}
OnPropertyChanged("MyDateTimeList");
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string name)
{
Console.WriteLine("OnPropertyChanged -> " + name);
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
Console.WriteLine("handler != null -> " + name);
handler(this, new PropertyChangedEventArgs(name));
}
}
public static DatePicker enableDisableDatePicker(System.Windows.Window myWindow, string name, bool enableDisable, double op)
{
DatePicker dp = (DatePicker)myWindow.FindName(name);
if (!enableDisable)
{
dp.SelectedDate = null;
}
dp.IsEnabled = enableDisable;
dp.Opacity = op;
return dp;
}
How do I access my components in the window and reference them appropriately so that each time I change a value in certain DatePicker, I detect the change in the list?
You can find the Utils function in comments line. Where it says null, there should be the window objects where my components are placed.
Or, is this the right approach?
I will have lot of components(15x3 = 45 x code for OnPropertyChanged), so the MVVM file will be quite large to set OnPropertyChanged() for all of them.
As ASh says, you need an ObservableCollection of objects, one for each row. ObservableCollections automatically update their bound controls when you add or remove objects, and pass on events when the objects change. These objects would presumably have three properties (for the datepicker, combobox and text box) that have OnPropertyChanged().
Then bind the ObservableCollection to the ItemSource of your grid, and the three controls to the three properties of an item.
For MVVM, you shouldn't ever need to reference a control in the View. Instead the view should reflect the state of the ViewModel. If you want to disable a datepicker, it's Enabled property should be bound to some thing that raises OnPropertyChanged().
If you post your view, we can suggest how to do this.
Long story short.
I have an UWP UI which contains a GridView and does not use Xaml. I'd like to display fully code-behind constructed items. No Xaml templates.
I have figured out that the GridView's ChoosingItemContainer event will allow me to create the GridViewItem instances programmatically and even possibly reuse them.
However the custom UI of the items is not actually displayed.
I have noticed that when scrolling a large amount of data the content appears very briefly and then it disappears. I'm guessing that the GridViewItem's Content is being overwritten by some kind of default template. Is there a way to disable this machinery?
More generally speaking, is there a known way to use GridView + Items without Xaml at all?
UPDATE:
Here is a minimal code sample that demonstrates the problem.
Place the CustomGridView somewhere in your UI.
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Media;
namespace MyApp
{
// Some kind of data object
public class MyData
{
public string MyProperty;
}
// A custom GridViewItem
public class MyGridViewItem : GridViewItem
{
private TextBox mTextBox;
public MyGridViewItem()
{
mTextBox = new TextBox();
mTextBox.Width = 100;
mTextBox.Height = 100;
Content = mTextBox;
// Make the items visible at all: use red background
Background = new SolidColorBrush(Color.FromArgb(255,255,0,0));
}
public void SetData(MyData d)
{
mTextBox.Text = d.MyProperty;
// Content seems to be always reset to the data object itself.
Content = mTextBox;
// With the following line the contents appear briefly while the view is scrolling.
// Without this line the contents don't appear at all
Template = null;
}
}
// Custom grid. No Xaml.
public class CustomGridView : GridView
{
public CustomGridView()
{
this.ChoosingItemContainer += CustomGridView_ChoosingItemContainer;
// Create some data to show.
CollectionViewSource s = new CollectionViewSource();
ObservableCollection<MyData> oc = new ObservableCollection<MyData>();
for(int i = 0;i < 10000;i++)
{
MyData d = new MyData();
d.MyProperty = i.ToString();
oc.Add(d);
}
s.Source = oc;
ItemsSource = s.View;
}
private void CustomGridView_ChoosingItemContainer(ListViewBase sender,ChoosingItemContainerEventArgs args)
{
// Unchecked cast, but for the sake of simplicity let's assume it always works.
MyData d = (MyData)args.Item;
MyGridViewItem it = null;
if((args.ItemContainer != null) && (args.ItemContainer.GetType() == typeof(MyGridViewItem)))
it = (MyGridViewItem)args.ItemContainer;
else
it = new MyGridViewItem();
it.SetData(d);
args.ItemContainer = it;
args.IsContainerPrepared = true;
// This should probably go elsewhere, but for simplicity it's here :)
((ItemsWrapGrid)ItemsPanelRoot).ItemWidth = 100;
((ItemsWrapGrid)ItemsPanelRoot).ItemHeight = 100;
}
}
}
For you can custom UI by new a style to set.
You can set the resource in xaml,and give it a key ,like "res".
And you can get GridView.Style=(Style)Resources["res"]; in code.
To use style in xaml is a good way.But you can set style in code see:
Style style = new Style(typeof (GridView));
style.Setters.Add(new Setter(GridView.Property, xx));
GridView.Style=style ;
The style can be set the GridView and Items just like the xaml.
You have no say that what ui you want that I cant give you a code.
I am working on a WPF application and i have a textbox bound (bidirectionally) to a property in my view model.
I am trying to prevent a user from typing more than 100 characters into this textbox (this is the max the database will store) so i have written this.
public abstract class AppBaseViewModel : ViewModelBase
{
private String _text;
public String Text
{
get { return _text; }
set
{
_text = CheckTextLength(value, _text);
OnPropertyChanged("Text");
}
}
private string CheckTextLength(string value, string text)
{
if (value.Length < 100)
{
return value;
}
else
{
return text;
}
}
}
All this code seems to do is save the first 100 characters to the field but it still allows the user to carry on typing past 100 characters... i would guess it is because the field value isn't being passed back to the textbox.
I don't understand why this doesn't work as i did something similar using MVVM Light's RaisePropertyChange() in a different application.
It is worth noting that i am unable to access the designer for the textbox so cannot set the .Net textbox property for max length.
Edit: Just for clarification i cannot view or edit the xaml as some are suggesting as i do not have access to the XAML file (i know, it's stupid). All the bindings we use are two way by default
Have you tried with TextBox.MaxLength ?
<TextBox MaxLength="100"/>
Gets or sets the maximum number of characters that can be manually entered into the text box.
If no access to the XAML, eventually get access to the XAML instead of parsing and verifying lengths of arrays and use substrings here and there. At least that's what i would do for this simple issue or talk to the designer to add that small piece of code.
Update 1
public static T GetChildOfType<T>(DependencyObject depObj) where T : DependencyObject
{
if (depObj == null) return null;
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
{
var child = VisualTreeHelper.GetChild(depObj, i);
var result = (child as T) ?? GetChildOfType<T>(child);
if (result != null) return result;
}
return null;
}
Go and get that child and set its MaxLength. This is just a slight modification on the View so it will not affect the MVVM pattern.
OK. I'm not at all sure that I'm proud of this, but am presenting it as an alternative.
You can change the UpdateSourceTrigger of the TextBox's Text property by applying a universal Style to all of the TextBoxes. This is only going to be practical in pretty weird arrangements, but the question is a little unusual in itself.
XAML codebehind:
//I'm using MVVM Light here - you need to be able to find an instance
//of your AppBaseViewModel somehow.
private ViewModelLocator _locator;
//View codebehind constructor, may need to change names as appropriate
public AppBaseView()
{
InitializeComponent();
//MVVM Light again
_locator = new ViewModelLocator();
//Create the binding
Binding binding = new Binding();
//Source = The instance of your ViewModel
binding.Source = _locator.AppBaseViewModel ;
binding.Path = new PropertyPath("Text");
binding.Mode = BindingMode.TwoWay;
binding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged;
//Create a Style with no Key - this will apply to *all* TextBoxes
//without their own explicit Style set.
Style style = new Style(typeof(TextBox));
style.Setters.Add(new Setter(TextBox.TextProperty, binding));
//Add the Style to the XAML's Resources:
Resources.Add(typeof(TextBox), style);
}
The view won't listen to the PropertyChanged notification if it's currently trying to change the property itself.
The only thing that comes to mind is launching an extra delayed PropertyChanged notification when you detect the constraint is not met...
private string CheckTextLength(string value, string text)
{
if (value.Length < 100)
{
return value;
}
else
{
MyDispatcher.BeginInvoke(new Action(() =>
OnPropertyChanged("Text")),
DispatcherPriority.Loaded);
return text;
}
}
Can't try the code, so sorry if it doesn't build righ away. MyDispatcher could be your Application.Current.Dispatcher, for instance.
The xaml view /the binding is only updated when the textbox has lost focus. if the text entered is <100 then the value is set otherwise _text is set. this means that initially _text has no value so null will be set upon the if statement being false. i also suggest yo use RaisePropertyChanged(); and when used within the property itself no parameter is needed.
I have a program in which I have to change text of label (on the click of button) which is a child of a grid
public class XLabel
{
Grid uiGrid = null;
TextBlock textblock = null;
string emptyString = "";
Public void createLabel()
{
uiGrid.Children.Add(textblock);
grid.Children.Add(uiGrid);
}
public void cleartext()
{
textblock.Text = emptyString;
}
}
In other class I have a method to clear text
public void clearText()
{
XLabel obj = new XLabel();
obj.cleartext(indexi);
}
How to select specific label to clear text from specific grid if there are many grids and each having one label .
The Grid object has properties like Name or Tag, that can be used for searching.
If you create grids programmatically, you should create a unique property for each, then in your clearText method you just receive all Grid objects from XLabel object and search for the one with proper name/tag.
To get a list of labels from grid, you could use lambda like that:
List<UIElement> list =
YourGrid.Children.Where(o => o.GetType() == typeof(Label)).ToList();
To extend Olter's answer,
Create your Textblock and Grid like this
Grid uiGrid = new Grid() { Name = "uiGrid"+1 };
TextBlock textblock = new TextBlock() { Name = "textBlock"+1 };
Each time change the number you add to the grid and textblock and somehow plan to keeptrack of that number.
Then when you want to clear the text,
(this.FindName("textBlock"+1) as TextBlock).Text = "";
I am creating WPF elements dynamically in code behind, and for each of the rows in the Grid I'm building it consists of a CheckBox and a Dynamic number of TextBoxes. The interaction that is needed is the following:
If all TextBoxes in a row have a value of 0, set the CheckBox
IsChecked property to true and Disable it.
If one of the TextBoxes is then changed from 0, enable the
CheckBox and set IsChecked to false.
If the user clicks on the CheckBox, set all associated TextBoxes
to 0 and Disable the CheckBox
I was able to accomplish the first part of the last one using this code:
Binding setScoreToZeroIfIsNormalChecked = new Binding("IsChecked");
setScoreToZeroIfIsNormalChecked.Source = this.NormalCheckBoxControl;
setScoreToZeroIfIsNormalChecked.Converter = m_NormalCheckBoxJointScoresConverter;
tempJointScoreControl.JointScoreContainer.SetBinding(ContainerBase.SingleAnswerProperty, setScoreToZeroIfIsNormalChecked);
and the converter:
public object Convert(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
if (value is bool && targetType == typeof(Answer))
{
if ((bool)value)
{
Answer answer = new Answer();
answer.Value = "0";
answer.DisplayValue = "0";
return answer;
}
else
return null;
}
else
{
return null;
}
}
However, in attempting to create another converter to accomplish other functionality, I was running into issues of converters stepping on one another since all functionality is based around the CheckBox.IsChecked property.
Is there anyway to accomplish all of the above using one or two multibinding converters? I'd really like to avoid having to create a whole bunch of events and maintaining them in order to do this.
It's relatively easy. Everything should resolve around CheckBox IsChecked property.
For a simple reason, it's a two-way property. So either you can modify it, or CheckBox can modify it.
So what you do, you use MultiBinding, as such:
MultiBinding multiBinding = new MultiBinding();
multiBinding.Converter = multiBindingConverter;
multiBinding.Bindings.Add(new Binding("Text") { Source = txtbox1});
multiBinding.Bindings.Add(new Binding("Text") { Source = txtbox2});
multiBinding.NotifyOnSourceUpdated = true;//this is important.
checkBox.SetBinding(CheckBox.IsCheckedProperty, multiBinding);
And in your multiBindingConverter, you will have object[] value as first parameter, which you need to convert into IList and iterate over it && do your calculations, if you should either return true/false.(IsChecked=true or false)
Now bind CheckBox IsEnabled to CheckBox IsChecked property, and use BooleanInverterConverter. (If CheckBox is checked, it should be disabled, and vice versa)
The last step is to make TextBoxes listen to actual IsChecked property of CheckBox.
If it is TRUE, they all should show value of 0, otherwise they can show what they want.
So, make a new MultiBinding.
MultiBinding multiBinding = new MultiBinding();
multiBinding.Converter = textboxMultiBindingConverter;
multiBinding.Bindings.Add(new Binding("IsChecked") { Source = checkbox1});
multiBinding.Bindings.Add(new Binding("Text") { Source = textbox1});
multiBinding.NotifyOnSourceUpdated = true;//this is important.
textbox1.SetBinding(TextBox.Text, multiBinding);
the idea in textboxMultiBindingConverter is to either return Text(value[1]) if value[0]==FALSE or "0" if value[0]==TRUE.
This problem can be solved very easily if you would use MVVM.
You would have a ViewModel that represents a row in the grid. It would have a property per textbox and one for the checkbox.
Additionally you would have a ViewModel for the View containing the Grid and this ViewModel would expose a collection of row ViewModels.
The ViewModel for your row:
public class AnswersViewModel : ViewModelBase // From MvvmLight
{
public bool IsAnswered
{
get { return _isAnswered; }
set
{
if(value == _isAnswered)
return;
_isAnswered = value;
if(_isAnswered)
{
Answer1 = "0";
Answer2 = "0";
}
RaisePropertyChanged("IsAnswered");
}
}
public string Answer1
{
get { return _answer1; }
set
{
if(value == _answer1)
return;
_answer1 = value;
RaisePropertyChanged("Answer1");
if(_answer1 == "0" && _answer2 == "0")
{
_isAnswered = true;
RaisePropertyChanged("IsAnswered");
}
}
}
// The implementation of Answer2 is similar to Answer1
}
The ViewModel for the View:
public class FooViewModel : ViewModelBase
{
public ObservableCollection<AnswersViewModel> Answers
{
get { return _answers; }
}
}
Your View would contain the Grid with ItemsSource="{Binding Answers}" and a ControlTemplate for the items which binds to the properties of AnswersViewModel.
Disabling the CheckBox I would handle via a Trigger in a Style.