I am in desperate need of assistance.
My app has been created in WPF and on the screen are two itemscontrols that use the same observable collection as the itemssource. One has the elements laid out in a grid and the other has the elements laid out on a ellipse based on x-y variables in the list.
However, I am stuck when trying to implement the following:
I want to click on one of the datatemplates generated on either the ellipse or the grid to select it and have BOTH corresponding elements glow or do something else to indicate a selection. (i.e. If I click on the template in the grid, both the grid and the ellipse will do something to indicate that template has been selected.)
Right now, I have been able to save the item clicked on using this type of binding in the datatemplate. The itemsource in question is contained inside ItemsSourceViewModel.
<StackPanel.InputBindings>
<MouseBinding Command="{Binding SelectImage}" CommandParameter="{Binding Path=.}" MouseAction="LeftClick"></MouseBinding>
</StackPanel.InputBindings>
Then the SelectImage Icommand that is bound to the mouseclick is implemented as such:
private ItemsSourceViewModel foo;
public SelectImage(ItemsSourceViewModel incoming)
{
this.foo = incoming;
}
public event EventHandler CanExecuteChanged;
public bool CanExecute(object parameter)
{
return true;
}
public void Execute(object parameter)
{
var obj = parameter as ImageTemplate;
foo.SelectedImage = obj;
}
So now my selected object is saved inside my instance of ItemsSourceViewModel, but how do I go about determining which template in both itemscontrols have been selected and how do I apply the triggers so they show that they have been selected?
Please help! :'(
How About defining the input binding in your dataTemplate ItemTemplate. and maybe sending the name of your template as a parameter, then you could switch on the name of your template to do different handling?
Related
I am currently trying to make a "jump to" menu in my app. The way I would like it to look and work is such as one at Google design book here at the top, where you have the subtitles of every part of that page in a menu (to be precise, that navigation part with such links as Contents, Baseline Grids, Keylines and Spacing etc.). I'd like it to work without splitting it into new MVVM Views if possible, all inside one UserControl. Is it possible to create some keywords and just make a menu with "goto" links like in HTML?
Baseline Grids
Maybe a custom ScrollViewer? But how would one know the height of every element in the UI?
Every framework element has a BringIntoView method. You can define a hyperlink, or button, menu, whatever that is able to invoke a command. The command would take an element as a parameter, and the command execution would call BringIntoView();
A simple example:
public class JumpToElementCommand : ICommand
{
public void Execute(object parameter)
{
FrameworkElement frameworkElement = parameter as FrameworkElement;
if (frameworkElement != null)
{
frameworkElement.BringIntoView();
}
}
public bool CanExecute(object parameter)
{
return parameter is FrameworkElement;
}
public event EventHandler CanExecuteChanged
{
add { CommandManager.RequerySuggested += value; }
remove { CommandManager.RequerySuggested -= value; }
}
}
Xaml Usage:
<Window.Resources>
<commands:JumpToElementCommand x:Key="JumpToElementCommand" />
</Window.Resources>
<Button Command="{StaticResource JumpToElementCommand}" CommandParameter="{Binding ElementName=FirstJump}" />
<Grid x:Name="FirstJump">
</Grid>
Edit: Added CommandManager.RequerySuggested so that the command parameter is reevaluated after loading.
Now (with great help of Michael G) I have the answer.
First of all make an ihnerited panel for the menu (for me it was parent ItemsControl with StackPanel host). Than subscribe to all Click events of the Button Items inside ItemsControl. As a CommandParameter bind to an element you want to jump to:
<Button CommandParameter="{Binding ElementName=jumpTarget}"/>
And in the Click event handler you use a solution presented here where istead of
Control_GotFocus(object sender, RoutedEventArgs e)
you pass the CommandParameter like here:
Control_GotFocus(FrameworkElement targetControl)
You also have to get the parent ScrollViewer and put it as AssociatedObject in the example above (here is explained how to get parent of selected type). Of course you can avoid an event subsciption by simply using a command with parameter added to every Button from the ItemsControl.
I have a databound CheckBox inside a DataGrid, using WPF and MVVM;
<DataGridTemplateColumn Width="80" Header="Enabled">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding Path=IsEnabled, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" Name="theCheckbox" HorizontalAlignment="Center"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
This works fine and the CheckBox is being checked when IsEnabled is set. IsEnabled is a property in my collection of objects which I have bound to the DataGrid. What I want to do is to be able to validate if a specific rows CheckBox within the DataGrid should be allowed to be checked when the user selects it and if not remove their check and display a warning message something like "Row 1 cannot be checked without rows 5 and 9 being checked". I found out how to do this using code behind using the Checked and Unchecked properties of the CheckBox, but I am using MVVM and therefore want to handle things in the ViewModel associated with the View the DataGrid and CheckBox are in. How do I do this? I need a way of passing the Id field of the DataRow through too in order to identify which row I am working on, for arguments sake lets say the Id field is called BorderId.
Implement IDataErrorInfo on your objects, which is WPF's default interface for validation, and setup your validation code to validate if the checkbox can be checked or not
This is actually a bit trickier than normal because you are validating a property on your data item using data that doesn't exist on the data item, which means you need to provide some way of attaching unrelated validation to your object at run time.
The solution I usually use is to expose a ValidationDelegate from my object, which other objects can use to attach additional validation to the object. The code for it is posted on my blog, and it allows you to attach validation to your object like this:
public class MyViewModel
{
// Keeping this generic to reduce code here, but it
// should be a full property with PropertyChange notification
public ObservableCollection<SomeObject> SomeCollection { get; set; }
public MyViewModel()
{
SomeCollection = LoadDataGridObjects();
// Add the validation delegate to each object
foreach(var item in SomeCollection)
item.AddValidationDelegate(ValidateObject);
}
// Validation Delegate to verify the right checkboxes are checked
private string ValidateObject(object sender, string propertyName)
{
if (propertyName == "IsChecked")
{
var item = (SomeObject)sender;
if (item.Id == 1
&& !SomeCollection.First(p => p.Id == 5).IsChecked
&& !SomeCollection.First(p => p.Id == 9).IsChecked)
{
return "Row 1 cannot be checked without rows 5 and 9 being checked";
}
}
return null;
}
}
Could you add to the PropertyChanged event handler of each item in your list? Something like this:
foreach (Object x in List)
{
x.PropertyChanged += OnItemChanged;
}
Then in the change listener you can do whatever you like with the sender object including changing the IsEnabled property.
void OnItemChanged(object sender, PropertyChangedEventArgs e)
{
// change sender object properties or set bound label text here
}
If I understand your question, you have a checkbox and you want to control if it can be checked or not. Instead of letting the user check it at all times and push back an error message if you don't want to allow it, make your checkbox inactive in the first place if you don't want the user to check it.
To do this through your ViewModel (which is of course your DataContext), you need to bind the Checkbox's "Command" to a custom command in your ViewModel.
A WPF Command will provide the following functionality:
Automatically enable/disable a control based on custom logic
Handles the "action" event of your control (on a button of checkbox, it would be "click").
This is a running question that I have updated to hopefully be a little more clear.
In short what I am trying to accomplish is pass a property from a listbox selected item to the viewmodel so that this property can be used within a new query. In the code below the Listbox inherits databinding from the parent object. The listbox contains data templates (user controls) used to render out detailed results.
The issue I am having is that within the user control I have an expander which when clicked calls a command from the ViewModel. From what I can see the Listbox object is loosing it's data context so in order for the command to be called when the expander is expanded I have to explicitly set the datacontext of the expander. Doing this seems to instantiate a new view model which resets my bound property (SelectedItemsID) to null.
Is there a way to pass the selected item from the view to the viewmodel and prevent the value from being reset to null when a button calls a command from within the templated listbox item?
I realize that both Prism and MVVMLite have workarounds for this but I am not familiar with either framework so I don't know the level of complexity in cutting either of these into my project.
Can this be accomplished outside of Prism or MVVMLite?
original post follows:
Within my project I have a listbox usercontrol which contains a custom data template.
<ListBox x:Name="ResultListBox"
HorizontalAlignment="Stretch"
Background="{x:Null}"
BorderThickness="0"
HorizontalContentAlignment="Stretch"
ItemsSource="{Binding SearchResults[0].Results,
Mode=TwoWay}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
SelectionChanged="ResultListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<dts:TypeTemplateSelector Content="{Binding}" HorizontalContentAlignment="Stretch">
<!-- CFS Template -->
<dts:TypeTemplateSelector.CFSTemplate>
<DataTemplate>
<qr:srchCFS />
</DataTemplate>
</dts:TypeTemplateSelector.CFSTemplate>
<!-- Person Template -->
<dts:TypeTemplateSelector.PersonTemplate>
<DataTemplate>
<qr:srchPerson />
</DataTemplate>
</dts:TypeTemplateSelector.PersonTemplate>
<!-- removed for brevity -->
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
SelectionChanged calls the following method from the code behind
private void ResultListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (((ListBox)sender).SelectedItem != null)
_ViewModel.SelectedItemID = (((ListBox)sender).SelectedItem as QueryResult).ID.ToString();
this.NotifyPropertyChanged(_ViewModel.SelectedItemID);//binds to VM
}
Within the ViewModel I have the following property
public string SelectedItemID
{
get
{
return this._SelectedItemID;
}
set
{
if (this._SelectedItemID == value)
return;
this._SelectedItemID = value;
}
}
the listbox template contains a custom layout with an expander control. The expander control is used to display more details related to the selected item. These details (collection) are created by making a new call to my proxy. To do this with an expander control I used the Expressions InvokeCommandAction
<toolkit:Expander Height="auto"
Margin="0,0,-2,0"
Foreground="#FFFFC21C"
Header="View Details"
IsExpanded="False"
DataContext="{Binding Source={StaticResource SearchViewModelDataSource}}"
Style="{StaticResource DetailExpander}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Expanded">
<i:InvokeCommandAction Command="{Binding GetCfsResultCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
Within the ViewModel the delegate command GetCFSResultCommandExecute which is called is fairly straight forward
private void GetCfsResultCommandExecute(object parameter)
{
long IdResult;
if (long.TryParse(SelectedItemID, out IdResult))
{
this.CallForServiceResults = this._DataModel.GetCFSResults(IdResult);}
The issue I am experiencing is when selecting a listbox Item the selectionchanged event fires and the property SelectedItemID is updated with the correct id from the selected item. When I click on the expander the Command is fired but the property SelectedItemID is set to null. I have traced this with Silverlight-Spy and the events are consistent with what you would expect when the expander is clicked the listbox item loses focus, the expander (toggle) gets focus and there is a LeftMouseDownEvent but I cannot see anything happening that explains why the property is being set to null. I added the same code used in the selection changed event to a LostFocus event on the listboxt item and still received the same result.
I'd appreciate any help with understanding why the public property SelectedItemID is being set to null when the expander button which is part of the listbox control is being set to null. And of course I would REALLY appreciate any help in learning how prevent the property from being set to null and retaining the bound ID.
Update
I have attempted to remove the datacontext reference from the Expander as this was suggested to be the issue. From what I have since this is a data template item it "steps" out of the visual tree and looses reference to the datacontext of the control which is inherited from the parent object. If I attempt to set the datacontext in code for the control all bindings to properties are lost.
My next attempt was to set the datacontext for the expander control within the constructor as
private SearchViewModel _ViewModel;
public srchCFS()
{
InitializeComponent();
this.cfsExpander.DataContext = this._ViewModel;
}
This approach does not seem to work as InvokeCommandAction is never fired. This command only seems to trigger if data context is set on the expander.
thanks in advance
With this line you create a new SearchViewModelDataSource using its default constructor.
DataContext="{Binding Source={StaticResource SearchViewModelDataSource}}"
I guess this is why you find null because this is the default value for reference type.
You can resolve the issue by setting DataContext to the same instance used to the main controll (you can do it by code after all components are initialized).
Hope this help!
Edit
I don't think that binding may be lost after setting datacontext from code. I do it every time I need to share something between two or more model.
In relation to the code you've written :
private SearchViewModel _ViewModel;
public srchCFS()
{
InitializeComponent();
this.cfsExpander.DataContext = this._ViewModel;
}
Instead of using this.cfsExpander you can try to use the FindName method. Maybe this will return you the correct instance.
object item = this.FindName("expander_name");
if ((item!=null)&&(item is Expander))
{
Expander exp = item as Expander;
exp.DataContext = this._ViewModel;
}
Try if its work for you.
Of course, this._ViewModel has to expose a property of type ICommand named GetCfsResultCommand but I think this has been already done.
While this was a hacky approach I found an intermediate solution to get the listbox item value to the view model. I ended up using the selection changed event and passing the value directly to a public property wihtin my view model. Not the best approach but it resolved the issue short term
private void ResultListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (((ListBox)sender).SelectedItem != null)
_ViewModel.SelectedItemID = (((ListBox)sender).SelectedItem as QueryResult).ID.ToString();
MySelectedValue = (((ListBox)sender).SelectedItem as QueryResult).ID.ToString();
this.NotifyPropertyChanged(_ViewModel.SelectedItemID);
}
For this to fire I did have to also setup a property changed handler within the view to push the change to the VM. You can disregard the MySelectedValue line as it is secondary code I have in place for testing.
For those intereted the generic property changed handler
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(string info)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
I have a DataGridCell that contains a ComboBox.
I want, that when I fire 'SelectionChanged' event of it, a CollectionViewSource of a different column (eventually - at runtime, cell) CellEditingTemplate's Resources should be populated with data according to the selected value for this row.
Maybe DataTrigger, ActionTrigger, EventTrigger, maybe by code, XAML I don't care, I just need a solution.
Thanks a lot!
Related: Accessing control between
DataGridCells, dynamic cascading
ComboBoxes
If I understand your question right, you will fill the contents of a combobox in a cell based on the selection of a combobox in another cell that is in the same row of the DataGrid.
If yes:
First Solution (IMO the preferable)
Make a ViewModel that represents the rows data (a simple wrapper around your data object). Bind the ItemsSource-property of the destination ComboBox to a IEnumerable-property that you provide from your viewmodel.
Bind the SelectedItem from the source-ComboBox to another property of your ViewModel. Every time this source-property changes in your ViewModel, you change the contents of the list that is provided by the ViewModel.
Use for the desintation (list) property a ObservableCollection<T>. The source property is up to you.
Here is an approximately example. I call the class VM (for ViewModel) but this changes nothing on your current solution. MVVM can also be used partial.
public class DataObjectVM : DependencyObject {
public static readonly DependencyProperty SelectedCategoryProperty =
DependencyProperty.Register("SelectedCategory", typeof(CategoryClass), typeof(DataObjectVM), new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault,delegate (DependencyObject d,DependencyPropertyChangedEventArgs e){
((DataObjectVM)d).SelectedCategoryChanged(e);
}));
ObservableCollection<ItemClass> _items=new ObservableCollection<ItemClass>();
void SelectedCategoryChanged(DependencyPropertyChangedEventArgs e) {
// Change here the contents of the _items collection.
// The destination ComboBox will update as you desire
// Do not change the _items reference. Only clear, add, remove or
// rearange the collection-items
}
// Bind the destination ComboxBox.ItemsSource to this property
public IEnumerable<ItemClass> DestinationItems {
get {
return _items;
}
}
// Bind to this property with the source ComboBox.SelectedItem
public CategoryClass SelectedCategory {
get { return (CategoryClass)GetValue(SelectedCategoryProperty); }
set { SetValue(SelectedCategoryProperty, value); }
}
}
Add a constructor to this class that takes your data object and make some wrapper properties to the rest the properties you need to provide in the DataGrid. If they are alot, you can also make one property that provides your data object and the bind directly to it. Not nice, but it will do the job.
You also can (must) pre-initialize the SelectedCategory with data from your business object. Do this also in the constructor.
As a ItemsSource for the DataGrid you give an IEnumerable of the DataObjectVM-class that wrapps all items you want to show.
Alternative way with VisualTreeHelper
If you want to do it manual, register in the code behind a handler for the ComboBox.SelectionChangedEvent and change then the ItemsSource of the destination ComboBox manual. The business-object you will get with the EventArgs. The destination ComboBox you must search in the visual tree (Use the VisualTreeHelper). The events can be wired also if you use the DataGridTemplateColumn class and add a DataTemplate with the corresponding ComboBoxes.
But I think this is realy not very simple to do and can be error prone. The above solution is much easier.
Here is the code you propably are looking for:
private void CboSource_SelectionChanged(object sender, SelectionChangedEventArgs e) {
ComboBox cbo = (ComboBox)sender;
FrameworkElement currentFe = VisualTreeHelper.GetParent(cbo) as FrameworkElement;
while (null != currentFe && !(currentFe is DataGridRow)) {
currentFe = VisualTreeHelper.GetParent(currentFe) as FrameworkElement;
}
if (null != currentFe) {
List<ComboBox> list = new List<ComboBox>();
FindChildFrameworkElementsOfType<ComboBox>(currentFe,list);
// Requirement 1: Find ComboBox
foreach (ComboBox cboFound in list) {
if (cboFound.Name == "PART_CboDestination") {
// This is the desired ComboBox
// Your BO is available through cbo.Found.DataContext property
// If don't like to check the name, you can also depend on the
// sequence of the cbo's because I search them in a deep search
// operation. The sequence will be fix.
}
}
List<DataGridCell> cells = new List<DataGridCell>();
FindChildFrameworkElementsOfType<DataGridCell>(currentFe,cells);
// Requirement 2: Find Sibling Cell
foreach (DataGridCell cell in cells) {
// Here you have the desired cell of the other post
// Take the sibling you are interested in
// The sequence is as you expect it
DataGridTemplateColumn col=cell.Column as DataGridTemplateColumn;
DataTemplate template = col.CellTemplate;
// Through template.Resources you can access the CollectionViewSources
// if they are placed in the CellTemplate.
// Change this code if you will have an edit cell template or another
// another construction
}
}
}
void FindChildFrameworkElementsOfType<T>(DependencyObject parent,IList<T> list) where T: FrameworkElement{
DependencyObject child;
for(int i=0;i< VisualTreeHelper.GetChildrenCount(parent);i++){
child = VisualTreeHelper.GetChild(parent, i);
if (child is T) {
list.Add((T)child);
}
FindChildFrameworkElementsOfType<T>(child,list);
}
}
And this is the markup I used:
<DataGrid.Columns>
<DataGridTemplateColumn Header="Source" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox Name="PART_CboSource" SelectionChanged="CboSource_SelectionChanged" ItemsSource="!!YOUR ITEMS SOURCE!!" SelectedItem="{Binding Category}">
</ComboBox>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Destination">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox Name="PART_CboDestination"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
Accessing the CollectionViewSource
To access the CollectionViewSource, put it into the resources section of the corresponding DataTemplate, not of the panel, then you will have direct access to them. IMO is this location anyway more appropriate than the resources-container of the grid.
If you dont't want to do this, check the state of the following post:
How to get logical tree of a DataTemplate
Setup:
I have a combo-box, it's itemsource bound to an ObservableCollection<T> of a custom class, one property is a List<myenum>.
I have an itemscontrol which is databound to the combo-box's selected item List<myenum> property.
The itemscontrol datatemplate creates a list of radiobuttons, each representing the individual enum values in the list.
The Desire:
When I change the value in the combo-box the itemscontrol source is updated. What I want to occur, is if a radio button in the new itemscontrol source is the same as the selected radiobuton in the previous list (before it was updated), this to be checked.
Current Idea:
Asign a Checked event to the radio buttons, which maintains a myenum property in the window class which can be compared against. Make the IsChecked property of the radiobox bind to a converter and compare against the myenum property. To achieve this, I have made the window class extend from IValueConverter, this way the converter function has access to the myenum property.
Issue:
I don't know how to get the IsChecked binding to use the window as the converter. I have tried using relative source in the converter part of the binding, but that doesn't work
IsChecked="{Binding Converter={RelativeSource={RelativeSource Self}}}"
Preferred Answers:
Assistance on correcting the binding syntax if it's possible this way.
Ideas of a more appropriate way of achieving what I'd like.
I also do not know how to use the window as a value converter in xaml. Instead create a standalone value converter class with a public property for the enum type. Next, in the constructor of the window, get a reference to the instance of the value converter and store it in a private member.
XAML:
<local:MyValueConverter x:Key="ConvertSomething" />
Code behind:
private MyValueConverter _myValueConverter;
public Window1()
{
InitializeComponent();
_myValueConverter = FindResource("ConvertSomething") as MyValueConverter;
}
private void RadioButton_Checked(object sender, RoutedEventArgs e)
{
// You can access _myValueConverter here and set its public enum property.
}