Update UI and Property at same time in mvvm - c#

I have a textbox ..i want when user put any value in textbox i wan to validate the entered value on LostFocus..
Currently What is happening now my property is updated but my UI is not updated at same time..i amusing below code for that:
<local:Customdatepicker x:Uid="dateValue" x:Name="dateValue" BorderThickness="0"
Visibility="{Binding ShowDatePicker ,UpdateSourceTrigger=PropertyChanged}"
IsEnabled="{Binding FieldValueIsEditable,UpdateSourceTrigger=PropertyChanged}"
DateCoordinates="{Binding CoOrdinates,UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}"
Text="{Binding DateFieldValue,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True, TargetNullValue=''}"
Loaded="dateValue_Loaded" LostFocus="dateValue_LostFocus"
Style="{StaticResource DatePickerStyle}"
Width="{Binding DatePickerWidth,UpdateSourceTrigger=PropertyChanged}"
MouseDoubleClick="dateValue_MouseDoubleClick"
DisplayDate="{Binding DisplayDateFieldValue, Mode=TwoWay}"
>
</local:Customdatepicker>
I have tried below two ways
In first have taken "UpdateSourceTrigger=PropertyChanged" but in this case my UI is not updated
Text="{Binding DateFieldValue,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True, TargetNullValue=''}"
In Second case have taken "UpdateSourceTrigger=LostFOcus" but in this case i didn't get the updated value of textbox.
So how can i Achieve both at one time i.e the updated value in UI.
Also i have use INotifyPropertyChanged ALready this is also not wokring.Please help me how can i solve this.
ViewModel:
private string _datefieldvalue;
public string DateFieldValue
{
get { return _datefieldvalue; }
set
{
value = value == null ? string.Empty : value.Trim();
if (string.IsNullOrEmpty(value))
{
_datefieldvalue = ValidateDateValue("");
FirePropertyChanged();
}
else if (!_datefieldvalue.Equals(value, StringComparison.CurrentCultureIgnoreCase))
{
_datefieldvalue = ValidateDateValue(value);
FirePropertyChanged();
}
}
}
public class BaseObservableObject : INotifyPropertyChanged
{
#region PropertyChangedEventHandler
public event PropertyChangedEventHandler PropertyChanged;
protected void FirePropertyChanged([CallerMemberName] string propName = null)
{
var handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propName));
}
}
#endregion
}

Related

My UserControl's TextBlock binding doesn't update even once

I know this has been asked for many times. I read a lot of them and tried different ways but still could not get it to work.
The xaml code is a UserControl:
<Grid Name="middle">
<d:TextBlock Text="{x:Bind LayerNodeData.CleanName, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Foreground="WhiteSmoke" FontSize="12" FontFamily="Arial" VerticalAlignment="Center" RelativePanel.RightOf="visibleUI" DoubleTapped="OnEditNameBegin" />
</Grid>
I set both this.DataContext and the Grid's DataContext to the data instance.
c#
public ucLayerRow(ImageLayerNode data)
{
LayerNodeData = data;
DataContext = LayerNodeData;
this.InitializeComponent();
middle.DataContext = LayerNodeData;
LayerNodeData.NotifyPropertyChanged("CleanName"); // test if it work
RefreshUI();
}
Model class
public partial class ImageLayerNode : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
if (PropertyChanged != null)
{
// PropertyChanged is always null.
PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
public string mCleanName = string.Empty;
public string CleanName {
get => mCleanName;
set { mCleanName = value; NotifyPropertyChanged();}
}
....
}
I tried add a breakpoint to the PropertyChanged and found that it is always null and thus never get called. I also tried changing the mode to OneWay, TwoWays but still nothing.
The textblock is away empty not even getting a value once.
The user control is added like this to the main page. Not sure if it is related.
var rowUI = new ucLayerRow(layerNode);
layerContainer.Children.Add(rowUI);
My UserControl's TextBlock binding doesn't update even once
During the testing, the problem looks that you use design time for usercontrol. <d:TextBlock/> please remove d: and make your usercontrol like the following.
Xaml
<Grid>
<TextBlock
VerticalAlignment="Center"
FontFamily="Arial"
FontSize="12"
Foreground="Red"
Text="{x:Bind LayerNodeData.CleanName, Mode=OneWay}" />
</Grid>
Code behind
public sealed partial class ucLayerRow : UserControl
{
public ucLayerRow(ImageLayerNode data)
{
this.InitializeComponent();
LayerNodeData = data;
}
public ImageLayerNode LayerNodeData { get; set; }
}
public partial class ImageLayerNode : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
if (PropertyChanged != null)
{
// PropertyChanged is always null.
PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
private string mCleanName = string.Empty;
public string CleanName
{
get => mCleanName;
set { mCleanName = value; NotifyPropertyChanged(); }
}
}

Refresh View When Binding Object Changes

I have a Textbox in WPF which has its "Text" Property bound to a string "EmployeeSource.ID" with Mode=TwoWay. My problem is that when i change the EmployeeSource object, the binding does not work. What is wrong in my approach?
XAML
<TextBox x:Name="NameTextBox" Margin="5,5,10,5" TextWrapping="Wrap"
Text="{Binding SelectedEmployee.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Grid.Row="1" Grid.Column="1" />
Code Behind
private Employee _selectedEmployee;
public Employee SelectedEmployee
{
get { return _selectedEmployee; }
set
{
_selectedEmployee = value;
UpdateTextBoxes();
}
}
private void UpdateTextBoxes()
{
NameTextBox.Text = SelectedEmployee?.Name;
}
Please try the code below. You need to implement the INotifyPropertyChanged interface inorder to achieve data binding in WPF. This is the basic concept of WPF data binding and MVVM pattern. This should work for you.
Code behind:
public class YourClassName : INotifyPropertyChanged
{
// These fields hold the values for the public properties.
private Employee _selectedEmployee;
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(String info)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
// The constructor is private to enforce the factory pattern.
private YourClassName()
{
_selectedEmployee = new Employee();
}
public Employee selectedEmployee
{
get
{
return this._selectedEmployee;
}
set
{
if (value != this._selectedEmployee)
{
this._selectedEmployee = value;
NotifyPropertyChanged("selectedEmployee");
}
}
}
}
XAML :
<TextBox x:Name="NameTextBox" Margin="5,5,10,5" TextWrapping="Wrap"
Text="{Binding selectedEmployee.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Grid.Row="1" Grid.Column="1" />

WPF data binding not working after Initialize

I'm having some problems with data binding. It seems that values update up until the point when the form displays, after which it has no interest in updating.
On my view I have a label.
<Label Background="{Binding info_bg}" Foreground="{Binding info_fg}" Margin="5" Grid.Row="0" FontFamily="Arial Rounded MT Bold" FontSize="24" Grid.Column="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" >
<Label.Content>
<AccessText TextWrapping="Wrap" Text="{Binding info}" TextAlignment="Center" VerticalAlignment="Center" />
</Label.Content>
</Label>
In the code behind
public Client()
{
_cvm = new ClientViewModel();
this.DataContext = _cvm;
InitializeComponent();
}
In the ClientViewModel class (extends a CommonBase class which has the INotifyPropertyChanged)
public class ClientViewModel : CommonBase
{
private string _info = "";
public string info
{
get
{
return _info;
}
set
{
_info = value;
NotifyPropertyChanged("info");
}
}
public ClientViewModel()
{
this._info = "TEST UPDATE";
}
When I run this, the label shows TEST UPDATE as expected. In my code behind, I created a Window_KeyUp event to push the keys pressed through to the ClientViewModel class by calling _cvm.ProcessKey(e.Key);
public void ProcessKey(string key)
{
this._info = key;
}
MessageBox.Show(Info); gives me the key I pushed, so I know it's getting through, but the View isn't updating.
CommonBase class in case I've messed up here.
public class CommonBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged(string propertyName)
{
var handler = this.PropertyChanged;
if (handler != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
Thank you.
Do not set the field like this this._info = key;
Instead set the property this.info = key;
This will invoke the set of the property and the PropertyChanged event will be raised. That is what is being observed by the view so it will respond.
(And while you are at it, start the properties with an uppercase.)

Set textbox value when another change in a listview

I have an ObservableCollection containing Hour (object). Inside, I have a Title and a Value properties.
On my view, I have a listview, binding on this collection. Title is a textblock, Value is a textbox (user can input text).
I would like to change the content of all textbox (value) when one change.
A litle bit of code :
public class Hour : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void NotifyPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
public string Title { get; set; }
private int valueContent;
public int Value
{
get { return valueContent; }
set
{
valueContent = value;
NotifyPropertyChanged("Value");
}
}
}
my observablecollection :
private ObservableCollection<Hour> hours;
public ObservableCollection<Hour> Hours
{
get { return hours; }
set
{
hours= value;
NotifyPropertyChanged("Hours");
}
}
xaml :
<ListBox Grid.Column="1" Grid.ColumnSpan="3" Grid.Row="3" Grid.RowSpan="3" ItemsSource="{Binding Hours, Mode=TwoWay}" SelectedItem="{Binding SelectedHour,Mode=TwoWay}" ItemTemplate="{StaticResource HourTemplate}" />
<DataTemplate x:Key="HourTemplate">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" FontSize="18" Width="150" />
<TextBox Text="{Binding Value, Mode=TwoWay}" FontSize="15" Width="150" TextChanged="TextBox_TextChanged" />
</StackPanel>
</DataTemplate>
So, I will have for example :
Title - Value
08h00 - 0
09h00 - 0
10h00 - 0
11h00 - 0
12h00 - 0
I would like, when I change one value (e.g: 10h00), all value after this one change to the value of 10h00.
Here the result expected :
Title - Value
08h00 - 0
09h00 - 0
10h00 - 1 <--- change here
11h00 - 1 <--- change because 10h00 changed
12h00 - 1 <--- change because 10h00 changed
Thanks for your help.
There isn't any clean way to do this.
I would start by adding an event to the Hour class, ValueUpdated. Raise that event in the setter for Value and have the view model listen to it for every Hour object. Have the event pass the sender as a parameter, something like:
public event Action<Hour> ValueUpdated;
//When raising
var handler = ValueUpdated;
if (handler != null)
handler(this);
Now in the view model handler, you need to find the index of the sender, then apply the change to every hour after it.
private void HandleValueUpdate(Hour sender)
{
int senderIndex = allItems.IndexOf(sender);
IEnumerable<Hour> subsequentHours = allItems.Skip(senderIndex + 1);
foreach (Hour h in subsequentHours)
{
h.SetValue(sender.Value);
}
}
You'll probably want to make a way of doing that set without raising the ValueUpdated event, as this won't be very efficent if you do. I modeled that by calling a function instead of setting the property, but how you do it is up to you.

Binding textblock text to property on load

I'm trying to display the number of records retrieved by the query after the window loads. Here's what I have in my XAML:
<TextBlock Name="numRecordsAnalyzed_TAtab" TextWrapping="Wrap" Margin="12,0,0,4" Grid.RowSpan="2">
<Run Text="Records Found: " Foreground="{StaticResource Foreground}" FontSize="12"/>
<Run Text="{Binding Numrecords}" Foreground="Red" FontSize="12"/>
</TextBlock>
Here's my c#:
private int numOfrecords = 0;
public event PropertyChangedEventHandler PropertyChanged;
public string Numrecords
{
get { return Convert.ToString(numOfrecords); }
set
{
OnPropertyChanged("NumOfrecords");
}
}
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
Then I add this to get the number of records and when I debug I see that the variable holds the number and everything but nothing is displayed in the window when the window launches:
numOfrecords = OpenTradesQuery.Count();
What am I missing?
You need to raise PropertyChanged event to notify GUI to update.
Declare property of type int, WPF will automaically call ToString() on your property, you need not to worry about that.
public int Numrecords
{
get { return numOfrecords; }
set
{
if(numOfrecords != value)
{
numOfrecords = value;
OnPropertyChanged("Numrecords");
}
}
}
Set the property:
Numrecords = penTradesQuery.Count();
You can set DataContext in code behind after InitializeComponent() in constructor of Window/UserControl:
DataContext = this;
Also, you can set it in XAML at root level like this:
<Window DataContext="{Binding RelativeSource={RelativeSource Self}}"/>

Categories

Resources