Develop Reference

How do I reference a custom property value in a WPF UserControl via Binding?

I'm building a WPF app with custom UserControls, and I'm trying to understand how property bindings are supposed to work. I can't get even the most basic binding to work, and it's simple enough to distill into a tiny example, so I figured someone with more WPF experience might be able to put me on the right track.
I've defined a custom UserControl called TestControl, which exposes a Foo property, which is intended to be set in XAML whenever a UserControl is placed.
TestControl.xaml.cs
using System.Windows;
using System.Windows.Controls;
namespace BindingTest
{
public partial class TestControl : UserControl
{
public static readonly DependencyProperty FooProperty = DependencyProperty.Register("Foo", typeof(string), typeof(TestControl));
public string Foo
{
get { return (string)GetValue(FooProperty); }
set { SetValue(FooProperty, value); }
}
public TestControl()
{
InitializeComponent();
}
}
}
The markup for TestControl just defines it as a control with a single button, whose label text displays the current value of the Foo property:
TestControl.xaml
<UserControl x:Class="BindingTest.TestControl"
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:BindingTest"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<Button Content="{Binding Foo}" />
</Grid>
</UserControl>
In my MainWindow class, I just place a single instance of TestControl with its Foo property set to "Hello".
MainWindow.xaml
<Window x:Class="BindingTest.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:BindingTest"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<local:TestControl Foo="Hello" />
</Grid>
</Window>
I would expect that when I build and launch this app, I'd see a window with a single button reading "Hello". However, the button is blank: the Binding doesn't seem to work.
If I add a click handler to the TestControl's button, I can verify that the value is being updated behind the scenes:
// Added to TestControl.xaml.cs:
private void Button_Click(object sender, RoutedEventArgs e)
{
Console.WriteLine("Button clicked; Foo is '{0}'", Foo);
}
// Updated in TestControl.xaml:
// <Button Content="{Binding Foo}" Click="Button_Click" />
When I click the button, I get Button clicked; Foo is 'Hello', but the GUI never updates. I've tried using Path=Foo, XPath=Foo, etc., as well as setting UpdateSourceTrigger=PropertyChanged and verifying updates with NotifyOnTargetUpdated=True... nothing seems to result in the text in the UI being updated to match the underlying property value, even though the property value seems to be getting updated just fine.
What am I doing wrong? I feel like there's just a simple and fundamental misunderstanding in how I'm approaching this.
edit:
Poking around a bit more and reading similar questions has led me to a potential fix: namely, adding a name to the root UserControl element in TestControl.xaml (x:Name="control"), and changing the binding to explicitly specify that control ({Binding Foo, ElementName=control}).
I'm guessing that by default, {Binding Foo} on the Button element just means "find a property named 'Foo' on this Button control", whereas I'd assumed it'd mean "find a property named 'Foo' in the context that this Button is being declared in, i.e. on the TestControl".
Is specifying an explicit ElementName the best fix here?

You have to set the source object of the Binding to the UserControl instance, e.g. like this:
<Button Content="{Binding Foo, RelativeSource={RelativeSource AncestorType=UserControl}}"/>
or
<UserControl ... x:Name="theControl">
...
<Button Content="{Binding Foo, ElementName=theControl}"/>
If you have many such Bindings, you may also set the DataContext of the top level element in the UserControl's XAML to the UserControl instance:
<Grid DataContext="{Binding RelativeSource={RelativeSource AncestorType=UserControl}}">
<Button Content="{Binding Foo}" />
<Button Content="{Binding Bar}" />
</Grid>
You must however avoid to set the DataContext of the UserControl (which is often recommend by "expert" bloggers), because that would break DataContext-based Bindings of the UserControl properties like
<local:TestControl Foo="{Binding SomeFoo}" />

Can't access text of the Textbox in .xaml.cs

This is odd. I have a Textblock (call it ErrorMessage_Textblock) in .xaml and when I tried to access and change the text of it in .xaml.cs, it throws me an error saying "The name 'ErrorMessage_Textblock' does not exist in the current context"
Basically, the ErrorMessage_Textblock is suppose to be empty when the program runs. When the user clicks the Start Button, my code in .xaml.cs checks to see if the user filled all the necessary information in the Textboxes. If there are some missing information, it will pass on a string to the ErrorMessage_Textblock -- like "please enter where to save the files."
SideMenuControl.xaml:
<UserControl x:Class="Fasetto.Word.SideMenuControl"
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:Fasetto.Word"
xmlns:core="clr-
namespace:Fasetto.Word.Core;assembly=Fasetto.Word.Core"
mc:Ignorable="d" d:DesignWidth="900" d:DesignHeight="1000"
Background="#FF2D2D30">
<UserControl.Template>
<ControlTemplate TargetType="UserControl">
<Border>
//some code ...
<Button
Click="StartButton"
Content="Start" FontSize="30" Padding="1,1,1,1" Foreground="Lime"
BorderBrush="Red"
/>
<TextBlock x:Name="ErrorMessage_Textblock" Foreground="OrangeRed"
FontFamily="/VIL_GUI_V5.0;component/Fonts/#Lato Light"
Margin="50,10,50,510" FontSize="20"
/>
SideMenuControl.xaml.cs: (note: line 7 throws me an error in VS)
public void StartButton(object sender, RoutedEventArgs e) {
if (Fasetto.Word.Core.IoC.Settings.Monaco_Report_Type.EditedText
== null || Fasetto.Word.Core.IoC.Settings.Monaco_Report_Type.EditedText == "")
{
//do something
ErrorMessage_Textblock = "please enter Report Type (Monaco)";
}

I found my own answer. You already have access to a Button, so you can find the grid it belongs to. Then, you can find the TextBlock. Only thing is that the TextBlock belongs to the same grid as the Button.
For the complete guide and code, click this link:
https://stackoverflow.com/a/35484118/10772348

How do I retrieve the controls created by a DataTemplate?

I have a list of objects that I need to represent as a list of buttons.
These buttons should normally act as a regular Button; when the checkbox is checked, they should work as ToggleButtons and remain pressed. But I also need them to be mutually exclusive, like a RadioButton (only one can only be toggled at any time).
I tried using a RadioButton as the template for my ItemsControl, but they are not mutually exclusive (I guess that they are not actually children of the same control).
So I thought to use a ToggleButton as the template, manually uncheck it if the checkbox is not checked, and manually handle the mutual exclusion.
However, I can't find a way to retrieve the toggle buttons for the other items in the list to uncheck them.
Here's my XAML:
<Window x:Class="WpfApp9.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"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<UniformGrid Rows="1">
<UniformGrid.Resources>
<DataTemplate x:Key="template">
<ToggleButton Name="Toggle"
Checked="ToggleButton_Checked"
Content="{Binding}"/>
</DataTemplate>
</UniformGrid.Resources>
<ItemsControl Name="lst" ItemTemplate="{StaticResource template}" />
<CheckBox Name="CheckToggle"
HorizontalAlignment="Center"
VerticalAlignment="Center">
TOGGLE
</CheckBox>
</UniformGrid>
</Window>
And this is my code-behind:
using System.Windows;
using System.Windows.Controls.Primitives;
namespace WpfApp9
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
lst.ItemsSource = new[] { "foo", "bar", "baz" };
}
private void ToggleButton_Checked(object sender, RoutedEventArgs e)
{
var toggle = (ToggleButton)sender;
// If the checkbox is not checked, release the button immediately
if (CheckToggle.IsChecked != true)
toggle.IsChecked = false;
// now how do I uncheck the other ToggleButtons?
}
}
}

I ended up solving the problem above in a different way.
In the question I said that
I tried using a RadioButton as the template for my ItemsControl, but they are not mutually exclusive (I guess that they are not actually children of the same control)
but I didn't realize I could use the GroupName property to force them into the same group. At this point the template can be this:
<DataTemplate x:Key="template">
<RadioButton Checked="RadioButton_Checked"
GroupName="SomeGroupName"
Content="{Binding}"/>
</DataTemplate>
And I get my mutually exclusive buttons without handling them manually.

Copy String of a ListViewItem into a TextBox

So I'm working on a calculator, basically a copy of the Windows Version, as a training excercise. I have implemented a History of past calculations, and I was asked to transform this history from TextBox to Listview.
What I want to do is copy one of the past calculations back into the Calculator TextBox when I click on it, just like in the Windows Calculator.
My ListViewCode:
<ListView Grid.Column="0" Grid.Row="1" Foreground="#616161" Name="history" Background="Transparent"
HorizontalAlignment="Stretch" BorderThickness="0" Margin="10,10,10,0">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<EventSetter Event="MouseLeftButtonDown" Handler="RetrievePastCalculation" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
And this is the RetrievePastCalculation method, but it doesn't work, nothing happens when I click on a ListViewItem. I'm new to WPF by the way.
private void RetrievePastCalculation(object sender, MouseButtonEventArgs e)
{
innerTextBox.Text = history.SelectedItems.ToString();
}
This is where I add items to the ListView I think, it's the Equal button method:
private void ButtonEquals_Click(object sender, RoutedEventArgs e)
{
Calculator calculate = new Calculator();
textBox.Text = calculate.Calculate(innerTextBox.Text);
history.Items.Add(innerTextBox.Text + "=" + textBox.Text);
innerTextBox.Clear();
}

history.SelectedItems is a collection, so calling ToString on it won't give you anything other than the name of the type. If you try it in the debugger (which you should), you'll see that it returns System.Windows.Controls.SelectedItemCollection. Now, at this point you can either fix your issue one of two ways: you can continue to use your current event-based approach, or you can use binding.
Events
With events, you can hook a handler to the Selected event for each ListItem that you add to the list:
private void ButtonEquals_Click(object sender, RoutedEventArgs e)
{
Calculator calculate = new Calculator();
textBox.Text = calculate.Calculate(innerTextBox.Text);
var item = new ListViewItem();
item.Content = innerTextBox.Text + "=" + textBox.Text;
item.Selected += HistoryItem_Selected //hooks the handler to the 'Selected' event
history.Items.Add(item);
innerTextBox.Clear();
}
then define the handler itself:
private void HistoryItem_Selected(object sender, RoutedEventArgs e)
{
// here 'sender' will be the ListItem which you clicked on
// but since it's an object we need to cast it first
ListViewItem listItem = (ListViewItem)sender;
// now all that's left is getting the text and assigning it to the textbox
innerTextBox.Text = listItem.Content.ToString();
}
Binding
Binding is much simpler as far as the amount of code is concerned, but has a steeper learning curve. Here, instead of setting the TextBox.Text property directly, we will specify a binding expression. This means that the value will always be the same as that of the bound expression.
<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">
<Grid>
<StackPanel>
<ListView Grid.Column="0" Grid.Row="0" Name="history" />
<TextBox Text="{Binding ElementName=history, Path=SelectedItem.Content}" />
<Button Name="ButtonEquals" Content="equals" Click="ButtonEquals_Click"/>
</StackPanel>
</Grid>
</Window>
I've run this in a new WPF project and it works as expected: the text box displays whatever text is in the clicked item from the list.
One thing to note is that both solutions assume that you are assigning strings to the ListViewItem Content. As you may know, you can assign other controls or any object to the Content property of a UI Control (ListViewItem inherits from Control). That's why the ListViewItem.Add method takes an argument of type object and is not restricted to one of type string. If you assigned anything other than a string in your button click event handler, both of the two cases above would likely break.

You could bind the value of the TextBox to the SelectedItem of the ListView. Here's an example:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel>
<ListView Grid.Column="0" Grid.Row="0" Foreground="#616161" Name="history" Background="Transparent"
HorizontalAlignment="Stretch" BorderThickness="0" Margin="10,10,10,0">
<ListViewItem>Calc1</ListViewItem>
<ListViewItem>Calc2</ListViewItem>
</ListView>
<TextBox Text="{Binding ElementName=history, Path=SelectedItem.Content}" />
</StackPanel>
</Page>

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListView Grid.Column="0" Grid.Row="0" Foreground="#616161" Name="history" BorderThickness="1,1" Height="50" Width="200" SelectionChanged="history_SelectionChanged">
<ListViewItem>
<TextBlock> A ListView</TextBlock>
</ListViewItem>
<ListViewItem>
with several
</ListViewItem>
<ListViewItem>
items
</ListViewItem>
</ListView>
<TextBox Grid.Row="1" Text="{Binding ElementName=history,Path=SelectedValue.Content}"
BorderThickness="1,1" Height="50" Width="200" />
</Grid>
It's better if you do it using XAML code. try to select item 0 and 1 to see the difference and understand how listboxworks.
now replace the text of textbox binding with following:
Text="{Binding ElementName=history,Path=SelectedValue.Content.Text}"
and seee the output for item 0. Hopefully you'll achieve desired output with a lot less effort.
Now that you have explained the whole problem i think you need to implement a converter in the text binding of TextBox. like below text
Text="{Binding ElementName=history,Path=SelectedValue.Content.Text,Converter={StaticResource mytextconverter}}"
and write down a logic to extract a part of text on the basis of '=' char. It's very easy to write a converter class. to write a converter follow the below link:
WPF Converter example

WPF Maintain Keyboard Focus

I'm creating a UserControl consisting of a TextBox and a ListView. I want keyboard focus to remain with the TextBox as long as the control has keyboard focus (selection changes in the ListView shouldn't remove keyboard focus from the TextBox).
I've tried catching GotKeyboardFocus in the ListView and passing keyboard focus back to the TextBox using Keyboard.Focus(), but this seems to cancel any selection operation in the ListView. The below code shows the problem. Does anyone know how to achieve this functionality?
<Window x:Class="WpfApplication5.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<StackPanel>
<TextBox x:Name="TextBox1" />
<ListView x:Name="ListBox1" Keyboard.GotKeyboardFocus="ListBox1_GotKeyboardFocus">
<ListViewItem Content="Able" />
<ListViewItem Content="Baker" />
<ListViewItem Content="Charlie" />
</ListView>
</StackPanel>
</Window>
using System.Windows;
using System.Windows.Input;
namespace WpfApplication5
{
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
}
private void ListBox1_GotKeyboardFocus(object sender, KeyboardFocusChangedEventArgs e)
{
Keyboard.Focus(TextBox1);
}
}
}

Instead, have you considered just capturing keystrokes and putting those keystrokes into your TextBox?
<Window PreviewKeyDown="Window_PreviewKeyDown" >
<Grid>
<TextBox x:Name="TextBox1" />
<ListBox />
</Grid>
</Window>
Then in your window's code-behind:
private void Window_PreviewKeyDown(object sender, KeyEventArgs e)
{
TextBox1.Text += e.Key.ToString();
}
You'll have to do extra work for anything like special characters (backspace, etc), and obviously a Key handler for your "Enter" or "Post" operation, but it gives you the ability to just free-form type while the Window has focus and to properly handle the keystrokes as necessary.

It looks like it's possible to change focus in the MouseUp event. I think if you do it too early, like in the GotKeyboardFocus event, you'll steal focus before the listview can handle the event and select the chosen item.
<StackPanel>
<TextBox x:Name="TextBox1" />
<ListView x:Name="ListBox1" MouseUp="ListBox1_MouseUp">
<ListViewItem Content="Able" />
<ListViewItem Content="Baker" />
<ListViewItem Content="Charlie" />
</ListView>
</StackPanel>
private void ListBox1_MouseUp(object sender, MouseButtonEventArgs e)
{
TextBox1.Focus();
}

If you are calling your WPF window from a WinForm you must use this:
System.Windows.Forms.Integration.ElementHost.EnableModelessKeyboardInterop(wpfWindow);
wpfWindow.show();
from the MSDN documentation.
Thats how I solved my keyboard problem.
IceX

This is a hack, but what if instead of listening to the GotKeyboardFocus event, you listen to the SelectionChanged event on the ListBox?

Put Focusable=false on your ListView.

Ok, this was driving me crazy. Even though set focus to UserControl every time lost focus, still couldn't get my command hot keys to work. All I had to do was to set the property Focusable to true, and voilà, it's working!