Accessing a component in a ViewModel C# - c#

I have a class that extends ViewModelBase in C#. There is already a trigger on a checkbox:
public bool PrintPackingCode
{
get
{
return this.reportConfiguration.PrintPackingCode;
}
set
{
this.reportConfiguration.PrintPackingCode = value;
this.OnPropertyChanged("PrintPackingCode");
}
}
I want to hook into that event and render a GroupBox to disable, yet I can't find a way to access the GroupBox. In the .xaml I gave my Box a name of PackingcodeGroupBox. All methods and hint I found weren't aplieable. My tries inculded:
Direct Access: PackingcodeGroupBox.Enabled = false;
Using a x:Name
this.Resources["mykey"]
Here some more Code:
//At program start assign the view it's view model:
new SmlKonfigurationWindow(new SmlKonfigurationWindowVm(reportConfiguration, smlKonfigurationDialogVm));
public SmlKonfigurationWindow(ISmlKonfigurationWindowVm viewModel)
{
this.DataContext = viewModel;
this.viewModel = viewModel;
this.InitializeComponent();
this.ShowDialog();
}
The xaml:
<CheckBox Content="Content" IsChecked="{Binding Path=PrintPackingCode, UpdateSourceTrigger=PropertyChanged}" Name="PrintPackingCode"/>
<GroupBox Header="Verpackungscode" Name="VerpackungscodeGroupbox">
//Stuff to be disabled
</GroupBox>

IsEnabled is ambiental property which means that if you disable the GroupBox all controls inside that group box will also be disabled.
Try to add a binding on GroupBox like so:
IsEnabled="{Binding PrintPackingCode}"
You can also bind IsEnabled to check box if you give name to the check box.
<CheckBox x:Name="myCheckBox" .../>
<GroupBox IsEnabled="{Binding ElementName=myCheckBox, Path=IsChecked}"/>

On your vm create a new property say
private bool _isGroupEnabled;
public bool IsGroupEnabled
{
get
{
return _isGroupEnabled;
}
set
{
_isGroupEnabled = value;
this.OnPropertyChanged("IsGroupEnabled");
}
}
Now tie into the notify process by adjusting your set for PrintPackingCode
set
{
this.reportConfiguration.PrintPackingCode = value;
IsGroupEnabled = !value; // reverse of packing to enable/disable.
this.OnPropertyChanged("PrintPackingCode");
}
Now bind your groupbox as such:
isEnabled = "{Binding IsGroupEnabled}"

Related

TextBox Two-Way Binding not transfering until Textbox is unfocused. need update on every keyclick

In C#/UWP, How to get a two-way binding to update the field on every key-click in a textbox,rather than once at the end of typing by unfocus the Textbox control after filling it out? Here are the details:
I have a textbox that is bound to a class string variable.
<StackPanel Name="MyStackPanel Margin="10">
<TextBox Header="MyTextBox:Item1"
Text="{Binding MyField, Mode=TwoWay}"/>
<Button Name="MyButton" Content="Next" Click="Next_Item"/>
</StackPanel>
public class MyItem {
public string MyField {get;set;}
}
public class MyPage : Page {
MyItem MyItem1 = new MyItem();
MyItem MyItem2 = new MyItem();
public MyPage() {
MyStackPanel.DataSource = MyItem1;
}
bool toggle = false;
public MyButton_Click( ... ) {
if (!toggle) {
MyStackPanel.DataSource = MyItem2;
MyTextBox.Header = "MyTextBox:Item2";
toggle = true;
}
else {
MyStackPanel.DataSource = MyItem1;
MyTextBox.Header = "MyTextBox:Item1";
toggle = false;
}
}
The problem i'm having is that when i fill out MyTextBox, and then click MyButton without unfocusing the MyTextBox Control, in this case the Two-Way binding doesn't work to copy the Text of MyTextBox back to the binding object MyItem1.MyField. However, binding works if I type something into MyTextBox, then unfocus the MyTextBox control, and then click Button.
Any Items on how to fix this problem?
If you want the source to be updated as you type, set the UpdateSourceTrigger of the binding to PropertyChanged.
Check this
micosoft doc

WPF Button IsEnabled Binding failed

I want to binding Button IsEnabled to my ViewModel. So I tried this:
<Button Content="{Binding Icon}" Command="{Binding Connect}" IsEnabled="{Binding ConnectBtnEnable, Mode=TwoWay}" />
And in the viewmodel:
private bool _ConnectBtnEnable = true;
public bool ConnectBtnEnable
{
get { return _ConnectBtnEnable; }
set { _ConnectBtnEnable = value; OnPropertyChanged(); }
}
But when I set the property in the use:
public void Connect()
{
ConnectBtnEnable = false;
}
It doesn't work, What is the problem. Thanks in advance!
In case you are using a command for your button, it's recommended not to separately bind the IsEnabled property of the button. Instead you should provide the correct value in the "CanExecute" method implementation of the command. That should enable or disable the button accordingly.
You can refer this article for a sample ICommand implementation - https://www.codeproject.com/Tips/813345/Basic-MVVM-and-ICommand-Usage-Example
Also, to update a control - make sure to update properties of VM (not member fields); so that the notification updates will be triggered, and the bound target (control state) is updated.
Because you need to set ConnectBtnEnable instead of _ConnectBtnEnable. It is a good example that you should name your private fields in other way than properties. For example, _connectBtnEnable.

Automatic updte of ListView items

I am new to WPF Binding. Is there any way the listview automatically update when one of the item in ItemSource modifies its own dependecny property. I was trying it to do with FreezableCollection.
My code is given below and the aim is to update the listbox when the textbox is modified.
MainWindow.xaml
<Grid x:Name="mainDataGrid">
<StackPanel Orientation="Horizontal">
<ListView x:Name="membersListView" ItemsSource="{Binding}" MinWidth="100"/>
<StackPanel>
<TextBox x:Name="selectedItemTextBox" Text="{Binding ElementName=membersListView, Path=SelectedItem.Name, Mode=TwoWay}" MinWidth="200"/>
</StackPanel>
</StackPanel>
</Grid>
MainWindow.cs
public partial class MainWindow : Window
{
ViewModel vm;
public MainWindow()
{
InitializeComponent();
vm = new ViewModel();
vm.Add(new Model() { Name = "Name1" });
vm.Add(new Model() { Name = "Name2" });
this.DataContext = vm;
}
}
public class Model : Freezable
{
public String Name
{
get { return (String)GetValue(NameProperty); }
set { SetValue(NameProperty, value); }
}
public override string ToString()
{
return Name;
}
// Using a DependencyProperty as the backing store for Name. This enables animation, styling, binding, etc...
public static readonly DependencyProperty NameProperty =
DependencyProperty.Register("Name", typeof(String), typeof(Model), new PropertyMetadata(""));
protected override Freezable CreateInstanceCore()
{
return new Model();
}
}
public class ViewModel : FreezableCollection<Model>
{
}
Ok,
Right now your ListView is showing the String Representation of your models, That's why you had to override the "ToString()" method... because you couldn't get it to understand to show the Name property.
Now what happens is that your TextBox changes the Name property well but your listbox doesn't know that "Name" property has changed... because it's looking at ToString()
if you set the "DisplayMemberPath" of your ListView to "Name" , it will not look at ToString(), but rather "Name"... like this:
<ListView x:Name="membersListView" ItemsSource="{Binding}" DisplayMemberPath="Name" MinWidth="100"/>
Note that in this mode if you change the Name property using textbox, the textbox won't update the value of "Name" Property instantly until it loses focus, so to fix that change the binding of textbox text to this:
<TextBox x:Name="selectedItemTextBox" Text="{Binding ElementName=membersListView, Path=SelectedItem.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" MinWidth="200"/>
I've added "UpdateSourceTrigger=PropertyChanged" to ensure that as you start changing the text of TextBox, the Name property is updated instantly.
:) hope it helps.

Bind a WPF View to couple of DataContexts

Objective: Set the visibility of a control based on the selected value of a ComboBox
Issue: The property that is being used to check the visibility is in the VM, however I don't know how to use it as DataContext is already defined to another object, i.e would I need to bind 2 datacontexts?!
Details:
I have a CustomControl that I load in my view associating to it a DataContext (a List of objects that is displayed as a grid:
<GUI:Counterparties_UserInputs x:Name="UserInputs" DockPanel.Dock="Right" DataContext="{Binding Source={StaticResource counterpartiesDataView}}"/>
In that user control I have some StackPanel which visibility should be triggered based on the selection of a ComboBox:
<ComboBox ItemsSource="{Binding Source={StaticResource CounterpartyTypes}}" SelectedValue="{Binding SelectedCounterpartyType}"/>
<StackPanel Visibility="{Binding Path=SelectedCounterpartyType,Converter={StaticResource SelectedValueToVisible}}"/>
The issue I have is that the code behind is never hit as I don't find how to associate an "extra" DataContext to the view.
Here is my code behind:
public partial class Counterparties_UserInputs : UserControl
{
...
public Counterparties_UserInputs()
{
// this.DataContext = _cptyUserInputsVM;
_cptyUserInputsVM = new Counterparties_UserInputs_VM();
InitializeComponent();
}
}
And the ViewModel where the Property "SelectedCounterpartyType" is never hit:
public class Counterparties_UserInputs_VM : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private string _selectedCounterpartyType;
public string SelectedCounterpartyType
{
get
{
return _selectedCounterpartyType;
}
set
{
_selectedCounterpartyType = value;
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs("SelectedCounterpartyType"));
}
}
}
}
I've seen that answer already but it's not exactly what I am doing... So would really appreciate your help! Thank you!

How to group checkboxes in treeview wpf mvvm when selection range is [0,1]

I have made a tree View in wpf Using MVVM .
it is working fine but here is one problem that leaf node contains some checkboxes and user have only two options either to select one or none .
So here how i can restricted user to select maximum only one cold drink.
I did one trick but it didn't work that when i have already selected a drink and then i select another one than i set the last selected value in the observable collection to false but it doesn't affect on view and selected check boxes remains selected although in collection only one option's value is true.
I cant use radio button instedof checkbox becasue user can select none of the options and i cant give an additional option for none of the above.
If any one have any solution so please let me know I'll be very thankful.
updated question:
i think i didn't define my problem in a proper way so i am giving my code snipperts here hope by this i'll get the solution o f my problem...
My View Model Class
namespace TestViewModels
{
public class ViewModel :ViewModelBase
{
private ObservableCollection<AvailableProducts> _MyTreeViewProperty
public ObservableCollection<AvailableProducts> MyTreeViewProperty
{
get { return _MyTreeViewProperty
set { _MyTreeViewProperty value;
RaisePropertyChanged("MyTreeViewProperty");}
}
}
public class AvailableProducts
{
private string _BrandName;
public string BrandName
{
get { return _BrandName
set { _BrandName = value; }
}
private bool _IsExpanded;
public bool IsExpanded
{
get
{
return _IsExpanded;
}
set
{
_IsExpanded = value;
}
}
private ObservableCollection<ProductTypes> _MyProductTypes
public ObservableCollection<ProductTypes> MyProductTypes
{
get { return _MyProductTypes}
set { _MyProductTypes= value; }
}
}
public class ProductTypes
{
private string _ProductTypeName;
public string ProductTypeName
{
get { return _ProductTypeName;
set { _ProductTypeNamevalue; }
}
private ObservableCollection<ProductSubTypes> _ProdSubTypes;
public ObservableCollection<ProductSubTypes> ProdSubTypes
{
get { return _ProdSubTypes;}
set { _ProdSubTypes;= value; }
}
}
public class ProductSubTypes
{
private string _ProductSubTypeName;
public string ProductSubTypeName
{
get { return _ProductSubTypeName;
set { _ProductSubTypeName;}
}
private int _ParentID;
public int ParentID
{
get { return _ParentID;}
set { _ParentID;= value; }
}
private bool _IsAssigned;
public bool IsAssigned
{
get { return _IsAssigned; }
set
{
_IsAssigned = value;
if _ParentID;!= 0)
{
//updating data in database
//Calling and setting new collection value in property
//issue : updated collection sets in setter of MyTreeViewProperty but before calling getter
// it comes to IsAssigned getter so view doesnt get updated collection of MyTreeViewProperty
}
RaisePropertyChanged("IsAssigned");
}
}
}
}
View
<Page x:Class="ShiftManagerViews.Pages.ProductTreeSelection
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
DataContext="{Binding ProductsTree, Source={StaticResource Locator}}"
mc:Ignorable="d" Width="870" Height="665"
>
<TreeView Margin="10,10,0,13" ItemsSource="{Binding MyTreeViewProperty, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Left"
VerticalAlignment="Top" Width="800" Height="Auto" MinHeight="400" MaxHeight="800">
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
</Style>
</TreeView.ItemContainerStyle>
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:AvailableProducts}"
ItemsSource="{Binding MyProductTypes}">
<WrapPanel>
<Image Width="20" Height="20" Source="/ShiftManagerViews;component/Images/12.bmp"/>
<Label Content="{Binding BrandName}" FontSize="14"/>
</WrapPanel>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:ProductTypes}"
ItemsSource="{Binding ProdSubTypes}">
<WrapPanel>
<Image Width="18" Height="15" Source="/ShiftManagerViews;component/Images/12.bmp"/>
<Label Content="{Binding ProductTypeName}" FontSize="13"/>
</WrapPanel>
</HierarchicalDataTemplate>
<!-- the template for showing the Leaf node's properties-->
<DataTemplate DataType="{x:Type local:ProductSubTypes}">
<StackPanel>
<CheckBox IsChecked="{Binding IsAssigned, Mode=TwoWay}" Content="{Binding ProductSubTypeName}" Height="25">
</CheckBox>
</StackPanel>
</DataTemplate>
</TreeView.Resources>
</TreeView>
What about using a ListBox to display sub-items instead of a TreeView? You can style that so the items contain a CheckBox to show IsSelected instead of highlighting the item.
I'd suggest your user interface is wrong. If the user can only pick one then it would be better to swap these for radio buttons and add a "None of the above" option. That'll then give you the behaviour you want for free and your UI will be more intuitive.
EDIT: Since you say you can't add a "None" option and want to use a checkbox (even though I strongly disagree on checkboxes where a radio button is more appropriate - a common UI error)...
The technical problem you are probably facing is that an ObservableCollection only raises notification events if the collection itself changes. i.e. Only if items are added or removed. It does not raised events when items within the collection change, therefore the changing the status of the checkbox in the code will not raise the event for the UI binding to act on.
One solution to this to write a custom class that extends ObservableCollection that does provide this behaviour
From MSDN:
If you need to know if someone has changed a property of one of the
items within the collection, you'll need to ensure that the items in
the collection implement the INotifyPropertyChanged interface, and
you'll need to manually attach property changed event handlers for
those objects. No matter how you change properties of objects within
the collection, the collection's PropertyChanged event will not fire.
As a matter of fact, the ObservableCollection's PropertyChanged event
handler is protected—you can't even react to it unless you inherit
from the class and expose it yourself. You could, of course, handle
the PropertyChanged event for each item within the collection from
your inherited collection
I upvoted Rachel's answer, it is a common way in WPF to databind sets of radio buttons or check boxes. If you still want to go the tree view way, below code works. All view related code is in the view, so below code follows MVVM principles. If you are a MVVM purist you can put the code behind and a TreeView control in a user control if you do not want any code behind.
XAML:
<TreeView ItemsSource="{Binding Path=Drinks}">
<TreeView.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding .}" Checked="OnCheckBoxChecked" Unchecked="OnCheckBoxUnchecked" Loaded="OnCheckBoxLoaded" />
</DataTemplate>
</TreeView.ItemTemplate>
</TreeView>
Code behind + VM:
public partial class Window1
{
public Window1()
{
InitializeComponent();
DataContext = new VM();
}
private void OnCheckBoxChecked(object sender, System.Windows.RoutedEventArgs e)
{
foreach (CheckBox checkBox in _checkBoxes.Where(cb => cb != sender))
{
checkBox.IsChecked = false;
}
(DataContext as VM).CurrentDrink = (sender as CheckBox).Content.ToString();
}
private void OnCheckBoxUnchecked(object sender, System.Windows.RoutedEventArgs e)
{
(DataContext as VM).CurrentDrink = null;
}
private void OnCheckBoxLoaded(object sender, System.Windows.RoutedEventArgs e)
{
_checkBoxes.Add(sender as CheckBox);
}
private List<CheckBox> _checkBoxes = new List<CheckBox>();
}
public class VM
{
public List<string> Drinks
{
get
{
return new List<string>() { "Coffee", "Tea", "Juice" };
}
}
public string CurrentDrink { get; set; }
}
I did one trick but it didn't work that when i have already selected a
drink and then i select another one than i set the last selected value
in the observable collection to false but it doesn't affect on view
and selected check boxes remains selected although in collection only
one option's value is true.
Make sure that your child objects (AvailableProducts
and SubProductTypes) also implement INotifyPropertyChanged, this will make sure that the UI receives changes when modify the object.
Once all of you objects update the UI properly you will be able to layer in, and test, whatever custom business logic you need.
So if you have a product type that can only have one sub chosen, you could add a property on ProductType called OnlyAllowOneChild. Whenever, a child object raises a IsAssigned changed event, the parent can set false all other children. This of course requires you to have the parent either register for the children's PropertyChangedEvent, or got grab an EventAggregator (MVVMLight Messenger, or PRISM EvenAggregator) and create a messaging system.
Finally i am succeeded to solve my problem.
on Is Assigned property i am updating my database values and calling a method in view using MVVM Light messaging and passing currently selected leaf's parent id in it as a parameter...
Added a property in class Product Types to expand the parent node of the last selected leaf..
In view's method i am refreshing data context's source and passing currently selected leaf's parent id tO the VM to set its Is Expanded property value to true...
By this my view is working perfectly as same as i want...
If any body have solution better than this than I'll be happy to know.

Categories