We Keep Coding

C# WPF: Can't connect texbox.Text to label.Content via a class

Why isn't this working. I want to create a user input with a textbox in the UserInputPage and display it on the label in the UserLabelPage, but I get the error that FirstUserLabel = null. How do I fix this or am I doing it the wrong way? Thanks in advance for your time.
Dirk
App.xaml.cs:
namespace PlayertoLabeltest
{
public partial class App : Application
{
public static MainWindow ParentWindowRef;
}
}
MainWindow.xaml:
<Grid>
<DockPanel>
<Frame x:Name="ParentFrame" NavigationUIVisibility="Hidden"/>
</DockPanel>
</Grid>
MainWindow.xaml.cs:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
App.ParentWindowRef = this;
this.ParentFrame.Navigate(new UserInputPage());
}
}
UserInputPage.xaml:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBox x:Name="singlePlayer_Input" Grid.Row="1" Grid.Column="1" Width="150" Height="30" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBox Grid.Row="1" Grid.Column="2" Width="150" Height="30" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Button Click="UserInputToLabel_Click" Grid.Row="3" Grid.Column="3" Width="100" Height="50" Content="Click Here"/>
</Grid>
UserInputPage.xaml.cs:
public partial class UserInputPage : Page
{
private Player FirstPlayer_Input;
private TextBox SinglePlayer_TextBox;
public UserInputPage()
{
InitializeComponent();
}
public void UserInputToLabel_Click(object sender, RoutedEventArgs e)
{
SinglePlayer_TextBox = singlePlayer_Input;
//System.Diagnostics.Debug.WriteLine(singlePlayer_Input.Text);
FirstPlayer_Input = new Player(SinglePlayer_TextBox.Text);
FirstPlayer_Input.PlayertoLabel();
App.ParentWindowRef.ParentFrame.Navigate(new UserLabelPage());
}
}
UserLabelPage.xaml:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label x:Name="singlePlayer_Label" Content="" Grid.Row="1" Grid.Column="1" Width="150" Height="30" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
UserLabelPage.xaml.cs:
public partial class UserLabelPage : Page
{
private Player FirstPlayer_Label;
public UserLabelPage()
{
InitializeComponent();
FirstPlayer_Label = new Player(singlePlayer_Label);
}
}
Player.cs:
class Player
{
private string FirstUser_Input;
private Label FirstUser_Label;
public Player(string text)
{
FirstUser_Input = text;
System.Diagnostics.Debug.WriteLine(FirstUser_Input);
}
public Player(Label FirstUser)
{
FirstUser_Label = FirstUser; //This one gives FirstUser_Label = null
//FirstUser_Label.Content = "Rubeus Hagrid"; //This One works
PlayertoLabel();
}
public void PlayertoLabel()
{
FirstUser_Label.Content = FirstUser_Input;
System.Diagnostics.Debug.WriteLine(FirstUser_Input);
}
}

Suggestion : I would suggest binding the values which would produce much cleaner code and easier understanding.
Nevertheless, please find below, the answer for your question
I believe, the error happens inside your UserInputPage.xaml.cs:
FirstPlayer_Input = new Player(SinglePlayer_TextBox.Text);
Inside your player class, the variable private Label FirstUser_Label; is not initiated in one of the constructor (public Player(string text)).
So, Initiate it like below,
`public Player(string text)
{
FirstUser_Input = text;
FirstUser_Label = new Label(); //This line ensures that the FirstUser_Label is not null. It has a empty label value by default.
System.Diagnostics.Debug.WriteLine(FirstUser_Input);
}`
Note: Haven't tested the code myself.
Update: 2019-11-04
Note: Below code is not clean. I would repeat, better approach is to use data binding and notify the property changes.
Make your label as static as below.
class Player
{
private string FirstUser_Input;
private static Label FirstUser_Label; //Making the variable as static
Then, when your label page initializes, modify the code as below to access the static property
public partial class UserLabelPage : Page
{
private Player FirstPlayer_Label;
public UserLabelPage()
{
InitializeComponent();
singlePlayer_Label.content = Player.FirstUser_Label.content; //singlePlayer_Lable is the x:name of the xaml object. Setting the object's content while initializing the component.
}
}
Note: I haven't tested the code. But, on theory, this should work fine.

In a WPF application using Visual Studio, how can I bind a usercontrol to a usercontrol variable?

I'm not sure if I asked the question correctly, because I am not finding the answer by searching the internet. I am creating a wizard window. I have a window that has a title at the top and buttons at the bottom that will stay there throughout changing the pages. So in the xaml.cs for the window, I have a list of UserControls that will contain all of the views for the wizard. I also have a property/field that holds the current view. I want to create a xaml UserControl tag that binds to the current view property. It should change when I change the current view property (I have already implemented the INotifyChanged interface). The current view property will be changed by c#. Here is the code that I have(simplified to show whats needed), and when I run it nothing shows in the view area:
WizardWindow.xaml:
<Window x:Class="WizardWindow.WizardWindow"...>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Text="Wizard Title"/>
</Grid>
<Grid Grid.Row="1">
<Border Name="WizardWindowPageContent" Margin="5" BorderBrush="Black" BorderThickness="1">
<!--This is what I have tried but isn't working -->
<UserControl Content="{Binding CurrentView}" />
</Border>
</Grid>
<Grid Grid.Row="2" Name="WizardButtons">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0">Cancel</Button>
<Button Grid.Column="2">Back</Button>
<Button Grid.Column="3">Next</Button>
</Grid>
</Grid>
</Window>
WizardWindow.xaml.cs:
using System;
...
using System.Windows.Controls;
namespace WizardWindow
{
public partial class WizardWindow : Window, INotifyPropertyChanged
{
// List of views in the config window
private List<UserControl> views;
// Current view showing in the window
private UserControl currentView;
public UserControl CurrentView
{
get { return currentView; }
set
{
currentView = value;
OnPropertyChanged("CurrentView");
}
}
// Used to keep track of the view index
private int viewIndex;
public WizardWindow ()
{
InitializeComponent();
// Set the screen to the center of the screen
WindowStartupLocation = System.Windows.WindowStartupLocation.CenterScreen;
views = new List<UserControl>();
views.Add(new FirstWizardPage(this));
viewIndex = 0;
CurrentView = views[viewIndex];
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string info)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(info));
}
}
}
}
FirstWizardPage.xaml:
<!-- This should show up in the window -->
<UserControl x:Class="WizardWindow.FirstWizardPage" ... >
<Grid>
<TextBlock>Lorem Ipsum ...</TextBlock>
</Grid>
</UserControl>
FirstWizard.xaml.cs:
using System.Windows.Controls;
namespace WizardWindow
{
public partial class FirstWizardPage : UserControl
{
public FirstWizardPage(WizardWindow window)
{
InitializeComponent();
}
}
}
The given possible duplicate, Window vs Page vs UserControl for WPF navigation?
, is a good solution if I wanted to rewrite my program. However, it is not a solution to my exact problem. Someone else might have a similar problem and need this solution.

you need to use this:
<ContentControl x:Name="MyView"
Content="{Binding CurrentView}" />
It should work for you, but it's not MVVM.

You must binding on property DataContext of your user control, if you want to use MVVM.
I Will show little example for you:
It is MainWindow.xaml:
<Window x:Class="WpfApp2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp2"
xmlns:cefSharp="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<local:Foo DataContext="{Binding UserControlViewModel}"/>
</Grid>
It is MainWindow.xaml.cs:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new MainWindowViewModel();
}
}
It is MainWindowViewModel.cs:
public class MainWindowViewModel
{
public MainWindowViewModel()
{
UserControlViewModel = new UserControlViewModel{ Name = "Hello World" };
}
public UserControlViewModel UserControlViewModel { get; }
}
It is Foo.xaml:
<UserControl x:Class="WpfApp2.Foo"
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"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfApp2"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<TextBlock Text="{Binding Name}"/>
</Grid>
It is FooUsercontrolViewModel.cs
public class FooUserControlViewModel
{
public string Name { get; set; }
}

Error in data binding in Xaml

I have tried data binding in WPF.
But it is showing few errors.Please help me.
I am attaching the code.I have create a simple text block and tried to bind the string. Also I want to know how Windows.datacontext works? In my code it is giving an error. please help me out.
Xaml code
<Window x:Class="Shweta.DataBinding"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="DataBinding" Height="300" Width="300">
<Window.DataContext>
<l:DataBinding />
</Window.DataContext>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="54*" />
<ColumnDefinition Width="224*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="59*" />
<RowDefinition Height="202*" />
</Grid.RowDefinitions>
<Grid Grid.Column="1" Grid.Row="1">
<TextBlock Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="textBlock1" Text="{Binding TextString, TargetNullValue=Test}" VerticalAlignment="Top" Width="68" />
</Grid>
</Grid>
</Window>
**Code behind**
namespace Shweta
{
public partial class DataBinding : Window
{
public DataBinding()
{
InitializeComponent();
Setupviewmodel();
}
private void Setupviewmodel
{
TextString="this worked";
}
public string TextString{get;set;}
}
}

Okay so first of all read the error messages ... It clearly says that l is not defined in XAML but still you're trying to use it : <l:DataBinding />...
Fix this by declaring l in your XAML :
<Window x:Class="Shweta.DataBinding"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:l="<your l declaration"/>
Another thing is that you haven't implemented INotifyPropertyChanged so you'r value wont get updated anyway.
Implement this like such :
public partial class DataBinding : Window, INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
void NotifyPropertyChanged([CallerMemberName]string propertyName = "")
{
if ( PropertyChanged != null )
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
string text;
public string TextString
{
get { return text; }
set { text = value; NotifyPropertyChanged(); }
}
public DataBinding()
: base()
{
InitializeComponent();
Setupviewmodel();
// as #Nahuel Ianni stated, he has to set DataContext to CodeBehind
// in order to be able to get bindings work
DataContext = this; // <-- only if not binded before
}
public void Setupviewmodel() // forgot to to place ()
// produced error : `A get or set accessor expected`
{
TextString = "this worked";
}
}
Yet another thing is that you have to specify DataContext only when it's not the same as your code behind so you do not need this part :
<Window.DataContext>
<l:DataBinding />
</Window.DataContext>

You are not specifying the DataContext correctly as you are trying to set it up on XAML by using a namespace that has not been declared. For more info on XAML namespaces, check the following link.
In your example it would be on the xaml side:
<Window x:Class="Shweta.DataBinding"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="DataBinding" Height="300" Width="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="54*" />
<ColumnDefinition Width="224*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="59*" />
<RowDefinition Height="202*" />
</Grid.RowDefinitions>
<Grid Grid.Column="1" Grid.Row="1">
<TextBlock Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="textBlock1" Text="{Binding TextString, TargetNullValue=Test}" VerticalAlignment="Top" Width="68" />
</Grid>
</Grid>
</Window>
And in your code behind:
namespace Shweta
{
public partial class DataBinding : Window
{
public DataBinding()
{
InitializeComponent();
this.DataContext = this; // Pay attention to this line!
Setupviewmodel();
}
private void Setupviewmodel()
{
TextString="this worked";
}
public string TextString{get;set;}
}
}
The difference with the original version is that I'm not specifying the DataContext on XAML but on the code behind itself.
The DataContext can be considered as the place where the view will retrieve the information from. When in doubt, please refer to this MSDN article or you could learn about the MVVM pattern which is the pillar of working with XAML.

In order to make this work you have to set the DataContext properly. I'd suggest to create a viewmodel class and bind to that. Also I initialized the binding in the codebehind because your namespaces are missing. You can do that in xaml aswell. For now to give you something to work with try this for your codebehind:
public partial class DataBinding : Window
{
public DataBinding()
{
InitializeComponent();
DataContext = new DataBindingViewModel();
}
}
public class DataBindingViewModel
{
public DataBindingViewModel()
{
Setupviewmodel();
}
private void Setupviewmodel()
{
TextString = "this worked";
}
public string TextString { get; set; }
}
And change your view to this:
<Window x:Class="Shweta.DataBinding"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="DataBinding" Height="300" Width="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="54*" />
<ColumnDefinition Width="224*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="59*" />
<RowDefinition Height="202*" />
</Grid.RowDefinitions>
<Grid Grid.Column="1" Grid.Row="1">
<TextBlock Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="textBlock1" Text="{Binding TextString, TargetNullValue=Test}" VerticalAlignment="Top" Width="68" />
</Grid>
</Grid>
Note that the Text property will only be set at initialization. If you want DataBinding at runtime your DataBindingViewModel will have to implememnt INPC and throw the PropertyChanged Event after setting the property bound to.

WPF: ObservableCollection Memory leak

[I'm sorry for my bad English]
In my MainWindow I have some ContentControl and I set his Content to some view called SimpleView. If that SimpleView has ListBox bounded to Collection, The view is alive even if I remove the SimpleView.
All my viewmodels are Implementing INotifyPropertyChanged.
This is my code:
MainWindow.xaml
<Window x:Class="WpfMemory.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>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Content="Set view" Click="SetView" />
<Button Content="Clear view" Click="ClearView" />
</StackPanel>
<ContentControl x:Name="ViewContainer" Grid.Row="1" Margin="4" />
</Grid>
</Window>
In code behind
private void SetView(object sender, RoutedEventArgs e)
{
var simpleViewModel = new ViewModels.SimpleViewModel();
var simpleview = new Views.SimpleView() { DataContext = simpleViewModel };
ViewContainer.Content = simpleview;
}
private void ClearView(object sender, RoutedEventArgs e)
{
ViewContainer.Content = null;
System.GC.Collect();
}
SampleView.xaml
<UserControl x:Class="WpfMemory.Views.SimpleView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition MinWidth="60"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="SomeText" />
<TextBox Text="{Binding SomeText}" Grid.Column="1"/>
<TextBlock Text="Large data" Grid.Row="1"/>
<ListBox ItemsSource="{Binding LargeData,Mode=OneTime}"
Grid.Row="2" Grid.Column="1"
DisplayMemberPath="Name" />
</Grid>
</UserControl>
View models
public sealed class SimpleViewModel : ViewModelBase
{
public SimpleViewModel()
{
var items = Enumerable.Range(1, 10000)
.Select(x => new SimpleItem()
{
Id = x,
Name = "Item " + x
})
.ToArray();
LargeData = new ObservableCollection<SimpleItem>(items);
}
public string SomeText{ get; set; } = "yehudah";
ObservableCollection<SimpleItem> largeData;
public ObservableCollection<SimpleItem> LargeData
{
get { return largeData; }
set { SetProperty(ref largeData, value); }
}
}
public sealed class SimpleItem : ViewModelBase
{
public int Id { get; set; }
public string Name { get; set; }
}
I run the application and Click on SetView and then on ClearView.
Now, in vs diagnostic tools I click on "Take snapshot" And this is the result:
Thanks for any help.

I think you should reset simpleview.DataContext when content control is unloaded.
You can do
simpleview.Unloaded += (_, __) => simpleview.DataContext = null;
when SetView.

More highlighted items in a listbox

I have a ListBox, in which data are put. Simple strings, nothing extreme. But, the user chooses what the data will be and he can and two different (!!!) objects, which have the same name.
Example: It is used with connection with pictures. Every picture has a name. And the user selects pictures and adds them to the listbox. But, if he chooses two pictures with the same name, this happens what selecting items in the listbox:
What shall I do, in order to avoid this? I want only one highlighted and selected item.
The listbox is set on a single selection, and on the selection event, it says that only one item is selected. So it concerns only the highlight.
(using WPF, C#)

To avoid this you'll have to use a wrapper around your strings; your Picture objects seems a good start.
Here is a sample that illustrates the two approaches:
XAML:
<Window x:Class="WpfApplication1.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"
xmlns:local="clr-namespace:WpfApplication1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ListBox x:Name="list1" ItemsSource="{Binding Pictures1}" />
<ListBox x:Name="list2" ItemsSource="{Binding Pictures2}" Grid.Column="1" DisplayMemberPath="Name" />
<TextBox Text="{Binding Text}" Grid.Row="1"/>
<Button Content="+" Grid.Row="1" Grid.Column="1" Click="Button_Click"/>
</Grid>
</Window>
Code behind:
using System.Windows;
using System.Windows.Media;
using System.Windows.Input;
using System.Windows.Controls;
using System.Collections.ObjectModel;
namespace WpfApplication1
{
public partial class MainWindow : Window
{
public class Picture
{
public string Name { get; set; }
}
public string Text { get; set; }
public ObservableCollection<string> Pictures1 { get; set; }
public ObservableCollection<Picture> Pictures2 { get; set; }
public MainWindow()
{
InitializeComponent();
Pictures1 = new ObservableCollection<string>();
Pictures2 = new ObservableCollection<Picture>();
DataContext = this;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
Pictures1.Add(Text);
Pictures2.Add(new Picture { Name = Text });
list1.SelectedItem = Pictures1[0];
list2.SelectedItem = Pictures2[0];
}
}
}
You can also bind more info like the extension, size, or any property that can help the user.
Hope this helps...