I can't Data Bind to a local variable in WPF/XAML - c#

I want a textbox to display the value of a variable when I click it (an iteration of 1 to 100), I do not know what I am doing Wrong:
When I run the project nothing is displayed in the text box.
What is the best way to display variables in a text box?
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace dataBindingTest
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
public string myText { get; set; }
public void Button_Click_1(object sender, RoutedEventArgs e)
{
int i = 0;
for (i = 0; i < 100; i++)
{
myText = i.ToString();
}
}
}
}
XAML:
<Window x:Class="dataBindingTest.MainWindow"
Name="windowElement"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button Content="Button" HorizontalAlignment="Left" Height="106" Margin="71,95,0,0" VerticalAlignment="Top" Width="125" Click="Button_Click_1"/>
<TextBlock x:Name="myTextBox" HorizontalAlignment="Left" Height="106" Margin="270,95,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="187" Text= "{Binding myText, ElementName=windowElement}" />
</Grid>
</Window>

Your current myText property has no way of notifying the WPF binding system when its value has changed, so the TextBlock wont be updated.
If you make it a dependency property instead it automatically implements change notification, and the changes to the property will be reflected in the TextBlock.
So if you replace public string myText { get; set; } with all of this code it should work:
public string myText
{
get { return (string)GetValue(myTextProperty); }
set { SetValue(myTextProperty, value); }
}
// Using a DependencyProperty as the backing store for myText. This enables animation, styling, binding, etc...
public static readonly DependencyProperty myTextProperty =
DependencyProperty.Register("myText", typeof(string), typeof(Window1), new PropertyMetadata(null));

implement INotifyPropertyChanged:
public partial class MainWindow : Window, INotifyPropertyChanged
{
public MainWindow()
{
this.InitializeComponent();
}
private string _txt;
public string txt
{
get
{
return _txt;
}
set
{
if (_txt != value)
{
_txt = value;
OnPropertyChanged("txt");
}
}
}
private void Button_Click(object sender, RoutedEventArgs e)
{
txt = "changed text";
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
XAML:
<TextBox Text="{Binding txt}"/>
<Button Click="Button_Click">yes</Button>
and don't forget about adding the DataContext property of your window:
<Window ... DataContext="{Binding RelativeSource={RelativeSource Self}}"/>

Try this:
public partial class MainWindow : Window, INotifyPropertyChanged
{
public MainWindow()
{
InitializeComponent();
this.DataContext = this;
}
public string myText { get; set; }
public void Button_Click_1(object sender, RoutedEventArgs e)
{
BackgroundWorker bw = new BackgroundWorker();
bw.DoWork += delegate
{
int i = 0;
for (i = 0; i < 100; i++)
{
System.Windows.Threading.Dispatcher.CurrentDispatcher.Invoke((Action)(() => { myText = i.ToString(); OnPropertyChanged("myText"); }));
Thread.Sleep(100);
}
};
bw.RunWorkerAsync();
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string name)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(name));
}
}
}
XAML file:
<Grid>
<Button Content="Button" HorizontalAlignment="Left" Height="106" Margin="71,95,0,0" VerticalAlignment="Top" Width="125" Click="Button_Click_1"/>
<TextBlock x:Name="myTextBox"
HorizontalAlignment="Right" Height="106" Margin="0,95,46,0"
TextWrapping="Wrap" VerticalAlignment="Top" Width="187"
Text= "{Binding myText}" />
</Grid>

You should implement INotifyPropertyChanged in your "MainWindow" so your "myTextBlock" can automatically pick up changes from your data and update.
So your "MainWindow" should look like:
public partial class MainWindow : Window, INotifyPropertyChanged
{
public MainWindow()
{
InitializeComponent();
}
private string _myText;
public string myText {
get{return _myText;}
set{_myText = value;
if(PropertyChanged!=null) PropertyChanged(this, new PropertyChangedEventArgs("myText")) ;
}
}
public event PropertyChangedEventHandler PropertyChanged;
etc.....
}

You need to make the property tell the binding that it has updated. The standard way to do this is via:
Implementing INotifyPropertyChanged
Making the myText property a DependencyProperty
Another maybe less used way is to raise the event manually, like this:
public void Button_Click_1(object sender, RoutedEventArgs e)
{
myText = "Clicked";
BindingOperations.GetBindingExpressionBase(myTextBox, TextBlock.TextProperty).UpdateTarget();
}
Note that your TextBlock has the confusing name myTextBox

Related

How do I access XAML bound class properties in code? (C#, WPF form)

In the example below, I am using XAML to set the DataContext to a class name, not an object name (as far as I can tell). The binding works - the txtEcho textbox shows what is entered in the txtName textbox when the latter loses focus. I want to be able to access the properties of this class in code-behind so I need an object reference. I could create a Person object and set the DataContext to that but the pattern in the books I am consulting does not do that - the class name is used and an object is not explicitly created in the examples in these textbooks.
<Window x:Class="WpfApplication5.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication5"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<local:Person x:Key="personData" />
</Window.Resources>
<Grid>
<Grid.DataContext>
<Binding Source="{StaticResource personData}" />
</Grid.DataContext>
<TextBlock HorizontalAlignment="Left" Margin="27,41,0,0" TextWrapping="Wrap" Text="Name" VerticalAlignment="Top" Height="23"/>
<TextBox x:Name="txtName" Text="{Binding Name}" HorizontalAlignment="Left" Height="23" Margin="78,42,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
<TextBox x:Name="txtEcho" Text="{Binding Name}" HorizontalAlignment="Left" Height="23" Margin="262,42,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
</Grid>
</Window>
The code is
namespace WpfApplication5
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
//txtFreedom.Text = <what exactly?>.Name; // no object reference!
}
}
class Person : INotifyPropertyChanged
{
string name;
public string Name
{
get { return this.name; }
set
{
this.name = value;
OnPropertyChanged("Name");
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
You could access the Person instance that you create in your XAML like this:
private void Button_Click(object sender, RoutedEventArgs e)
{
Person person = this.Resources["personData"] as Person;
txtFreedom.Text = person.Name;
}
I found a way, with mm8's help. The code is now
namespace WpfApplication5
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public static Person oPerson;
public MainWindow()
{
InitializeComponent();
oPerson = this.Resources["personData"] as Person;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
txtFreedom.Text = oPerson.Name;
}
}
public class Person : INotifyPropertyChanged
{
string name;
public string Name
{
get { return this.name; }
set
{
this.name = value;
OnPropertyChanged("Name");
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
The differences are, Declare a public static variable to hold a Person object.
public static Person oPerson;
In the MainWindow() method set it to the behind-the-scenes Person instance.
oPerson = this.Resources["personData"] as Person;
I had to make the class public to stop a compiler accessibility objection.
public class Person : INotifyPropertyChanged
Now I can reference the properties of the instance.
private void Button_Click(object sender, RoutedEventArgs e)
{
txtFreedom.Text = oPerson.Name;
}

Data binding in WPF using code behind

I have a scenario where I would want to bind a string property to a text box on the UI when the string property changes.I would want to change the property in the code behind.Please find my work below :
XAML :
<Window x:Class="databinding.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:test="clr-namespace:databinding"
Title="MainWindow" Height="350" Width="525">
<Grid>
<TextBox Text="{Binding mobile1}" Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" />
<TextBox Text="{Binding mobile2}" Height="23" HorizontalAlignment="Left" Margin="10,43,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" />
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="10,76,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
</Grid>
Please find the MainWindow.xaml.cs below :
namespace databinding
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
void button1_Click(object sender, RoutedEventArgs e)
{
talk ta = new talk();
ta.test();
}
}
}
Please find the class where I have defined my properties :
mobile.cs :
namespace databinding
{
public class mobile:INotifyPropertyChanged
{
string mobile1model;
string mobile2model;
public string mobile1 { get { return mobile1model; } set { mobile1model = value; OnPropertyChanged(new PropertyChangedEventArgs("mobile1")); } }
public string mobile2 { get { return mobile2model; } set { mobile2model = value; OnPropertyChanged(new PropertyChangedEventArgs("mobile2")); } }
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(PropertyChangedEventArgs e)
{
if (PropertyChanged != null)
{
PropertyChanged(this, e);
}
}
}
}
now I have a test class where I change the property value :
test.cs :
namespace databinding
{
public class talk:MainWindow
{
public void test()
{
mobile mb = new mobile();
mb.mobile1 = "This is mobile 1";
mb.mobile2 = "This is mobile 2";
}
}
}
The problem statement here is that when I click the button1 the properties get updated but the textboxes on the UI does not get updated,also I am looking if the textboxes are updates as soon as the property changes or is it going to wait till the second property changes to get updated? Appreciate your support for this query.
Thanks in advance.
Create one instance of mobile class, set it as Window.DataContext and call test() on that instance
public partial class MainWindow : Window
{
private readonly mobile _mb = new mobile();
public MainWindow()
{
InitializeComponent();
DataContext = _mb;
}
public void test()
{
_mb.mobile1 = "This is mobile 1";
_mb.mobile2 = "This is mobile 2";
}
void button1_Click(object sender, RoutedEventArgs e)
{
this.test();
}
}

Trying to understand how i can bind a WPF DP in a different class

I am trying WPF to develop a tiny scoreboard.
In this project i have 3 XAML files.
ControlDisplay.xaml : Here is where i set the points for team 1 and team 2 in the scoreboard. Right now i only have 1 textbox for the scoreboard title.
Layout1.xaml : First layout, contains only a title for now.
Layout2.xaml : Second layout, same as above, only contains a title.
My idea is as following. I update one singleton class that has one property Title. Both Layout1 and Layout2's label for the title will bind to this singleton class property Title.
I created the basic structure for it.
ControlDisplay.xaml:
public partial class ControlDisplay : Window
{
private IScoreboardData _scoreboardData;
private Layout1 _layout1;
private Layout2 _layout2;
public ControlDisplay()
{
InitializeComponent();
_scoreboardData = SimpleInjectorContainer.Container.GetInstance<IScoreboardData>();
}
private void ShowLayout1(object sender, RoutedEventArgs e)
{
_scoreboardData.Title = "Test";
_layout1 = new Layout1();
_layout1.Show();
}
private void ShowLayout2(object sender, RoutedEventArgs e)
{
_scoreboardData.Title = "Test";
_layout2 = new Layout2();
_layout2.Show();
}
}
Layout1.xaml.cs (layout2 is a copy of layout1 codewise, just a different class name)
public partial class Layout1 : Window
{
private IScoreboardData _scoreboardData;
public Layout1()
{
_scoreboardData = SimpleInjectorContainer.Container.GetInstance<IScoreboardData>();
InitializeComponent();
}
}
Layout1.xaml
<Window x:Class="SmallScoreboard.Layout1" .... x:Name="LayoutOne">
<StackPanel>
<Label DataContext="{Binding ElementName=LayoutOne}" Content="{Binding _scoreboardData.Title}" />
</StackPanel>
</Window>
ScoreboardData.cs
public ScoreboardData : IScoreboardData
{
public string Title { get; set; }
}
This obviously does not work since i don't register a dependency property anywhere? How can i register a dependency property inside the ScoreboardData class? or is there a better way to solve this?
I want to be able to add more layouts in the future and i hope that i don't have to add the base binding logic to each and everyone of those layout(x).xaml.cs files.
Update
This is my Layout1.xaml file right now:
<Window x:Class="Simple_Scoreboard.Layout1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Layout" Height="500" Width="800"
ScrollViewer.VerticalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollBarVisibility="Hidden"
WindowStyle="None"
AllowsTransparency="True"
ResizeMode="CanResizeWithGrip"
x:Name="LayoutOne" MouseLeftButtonDown="DWindow_MouseLeftButtonDown">
<StackPanel>
<Label Content="{Binding Path=Title, Mode=OneTime}" FontSize="30" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Center" VerticalContentAlignment="Center" Margin="0,10,0,0" FontWeight="Bold"></Label>
<Button Content="Button" Click="Button_Click_1"/>
</StackPanel>
</Window>
and the Layout1.xaml.cs
public partial class Layout1 : Window
{
public IScoreboardData _scoreboardData;
public Layout1()
{
InitializeComponent();
_scoreboardData = ScoreboardContainer.Container.GetInstance<IScoreboardData>();
DataContext = _scoreboardData;
}
private void DWindow_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
DragMove();
}
private void Button_Click_1(object sender, RoutedEventArgs e)
{
_scoreboardData.Title = "Click change title";
}
}
and finally the ScoreboardData class:
class ScoreboardData : IScoreboardData, INotifyPropertyChanged
{
private string _title;
public string Title
{
get { return _title; }
set
{
_title = value;
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs("Title"));
}
}
#region INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
#endregion
}
I think your problem is in binding to a private field _scoreboardData;
you should make it a public property. But much better solution would be to bind to a window DataContext.
in the window constructor
public Layout1()
{
_scoreboardData = SimpleInjectorContainer.Container.GetInstance<IScoreboardData>();
InitializeComponent();
DataContext = _scoreboardData;
}
In the XAML
<Window x:Class="SmallScoreboard.Layout1" .... x:Name="LayoutOne">
<StackPanel>
<Label Text="{Binding Title}" />
</StackPanel>
</Window>
This way you have your scoreBoardData as Window DataContext and all bindings without explicitly specified source will bind to that object.
UPDATE:
ScoreboardData should implement INotifyPropertyChanged..
public class ScoreboardData :IScoreboardData, System.ComponentModel.INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private string _title;
public string Title
{
get { return _title; }
set
{
_title = value;
if(PropertyChanged!=null)
PropertyChanged(this,new PropertyChangedEventArgs("Title"));
}
}
}

Metro UI not update

I'm just start working on metro app and i'm facing a problem that is dispatcher not updating the UI. My code is below please let me know what was the issue ?
public class Test : DependencyObject
{
public static readonly DependencyProperty CurrentItemProperty =
DependencyProperty.Register("NameOfPerson", typeof(string), typeof(Test), null);
public String NameOfPerson
{
get
{
return (string)GetValue(CurrentItemProperty);
}
set
{
runmethod(value);
}
}
public async void runmethod(String text)
{
await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
{
SetValue(CurrentItemProperty, text);
}
);
}
}
In main page i have an event button click which when fire update textbox.
private void Button_Click_2(object sender, RoutedEventArgs e)
{
Test t = new Test();
t.NameOfPerson = "Hello Umar";
}
MainPage.xaml look like this
<Page
x:Class="TestApplication.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestApplication"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Button Content="Button" HorizontalAlignment="Left" Margin="207,187,0,0" VerticalAlignment="Top" Height="80" Width="255" Click="Button_Click_2"/>
<TextBox x:Name="textB" Text="{Binding NameOfPerson}" HorizontalAlignment="Left" Height="80" Margin="730,187,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="307"/>
</Grid>
</Page>
If you are what you are trying to do is having a button refresh your Text, you should look into the MVVM pattern and have the Binding update your UI.
To do this you'll have to create your Object, in this case, let's say a person.
public class Person
{
public string Name { get; set; }
}
Secondly you would want to have a person inside a viewmodel that you'll update using your button. The viewmodel will derive from BindableBase which is a part of Windows Store applications if you would use such thing as Basic Page. The Viewmodel looks like this:
public class MainPageViewModel : BindableBase
{
public MainPageViewModel()
{
}
private Person person;
public Person Person
{
get { return person; }
set { SetProperty(ref person, value); }
}
public void LoadData()
{
Person = new Person() { Name = "Simple name" };
}
public void UpdatePerson()
{
Person.Name = "Updated Name";
OnPropertyChanged("Person");
}
}
and in case you dont have the bindableBase, it looks like this:
[Windows.Foundation.Metadata.WebHostHidden]
public abstract class BindableBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName] String propertyName = null)
{
if (object.Equals(storage, value)) return false;
storage = value;
this.OnPropertyChanged(propertyName);
return true;
}
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
var eventHandler = this.PropertyChanged;
if (eventHandler != null)
{
eventHandler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
On your MainPage you create the ViewModel and set the DataContext on your Page. Also you would want to handle your object inside your Viewmodel, so you'll create a update method when clicking the button that will modify your Person object:
public sealed partial class MainPage : Page
{
private readonly MainPageViewModel viewModel;
public MainPage()
{
this.InitializeComponent();
viewModel = new MainPageViewModel();
viewModel.LoadData();
this.DataContext = viewModel;
}
private void Button_Tapped(object sender, TappedRoutedEventArgs e)
{
viewModel.UpdatePerson();
}
}
And finally your TextBox in the UI to point at the Person's name property inside the Viewmodel:
<TextBox
x:Name="textB"
Text="{Binding Person.Name}"
HorizontalAlignment="Left"
Height="80"
Margin="730,187,0,0"
TextWrapping="Wrap"
VerticalAlignment="Top"
Width="307" />
I hope this fulfills your question on how you can have a button updating your UI.

WPF C# binding code - why doesn't this simple example work?

I've attached some WPF C# binding code - why doesn't this simple example work? (just trying to understanding binding to a custom object). That is when clicking on the button to increase the counter in the model, the label isn't updated.
<Window x:Class="testapp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button Height="23" HorizontalAlignment="Left" Margin="20,12,0,0"
Name="testButton" VerticalAlignment="Top" Width="126"
Click="testButton_Click" Content="Increase Counter" />
<Label Content="{Binding Path=TestCounter}" Height="37"
HorizontalAlignment="Right" Margin="0,12,122,0"
Name="testLabel2" VerticalAlignment="Top"
BorderThickness="3" MinWidth="200" />
</Grid>
</Window>
namespace testapp1
{
public partial class MainWindow : Window
{
public TestModel _model;
public MainWindow()
{
InitializeComponent();
InitializeComponent();
_model = new TestModel();
_model.TestCounter = 0;
this.DataContext = _model;
}
private void testButton_Click(object sender, RoutedEventArgs e)
{
_model.TestCounter = _model.TestCounter + 1;
Debug.WriteLine("TestCounter = " + _model.TestCounter);
}
}
public class TestModel : DependencyObject
{
public int TestCounter { get; set; }
}
}
thanks
For this simple example, consider using INotifyPropertyChanged and not DependencyProperties!
UPDATE
If you do want to use DPs, use the propdp snippet in VS2010 or Dr WPF's snippets for VS2008?
TestCounter needs to be a DepenencyProperty
public int TestCounter
{
get { return (int)GetValue(TestCounterProperty); }
set { SetValue(TestCounterProperty, value); }
}
// Using a DependencyProperty as the backing store for TestCounter.
//This enables animation, styling, binding, etc...
public static readonly DependencyProperty TestCounterProperty =
DependencyProperty.Register
("TestCounter",
typeof(int),
typeof(TestModel),
new UIPropertyMetadata(0));
You can implement the INotifyPropertyChanged interface in the System.ComponentModel namespace. I usually implement a Changed method that can take a number of property names and check for the event not being set. I do that because sometimes I have multiple properties that depend on one value and I can call one method from all of my property setters.
For instance if you had a Rectangle class with Width and Height properties and an Area read-only property that returns Width * Height, you could put Changed("Width", "Area"); in the property setter for Width.
public class TestModel : INotifyPropertyChanged
{
int m_TestCounter;
public int TestCounter {
get {
return m_TestCounter;
}
set {
m_TestCounter = value;
Changed("TestCounter");
}
}
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
#endregion
void Changed(params string[] propertyNames)
{
if (PropertyChanged != null)
{
foreach (string propertyName in propertyNames)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}

Categories