Binding control property to change it during runtime

Question

I'm preparing a some kind of a alphanumeric keyboard control for my project. Unfortunately I have faced a problem with dynamically changing a content of the button during the runtime. Here is an example code:

XAML

<UserControl x:Class="WpfApplication10.AlphaNumericKeyboard"
         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:WpfApplication10"
         mc:Ignorable="d" 
         DataContext="{Binding RelativeSource={RelativeSource Self}}"
         d:DesignHeight="300" d:DesignWidth="800">
<UserControl.Resources>
    <local:LowerUpperCaseConverter x:Key="LowerUpperCaseConverter"/>
    <Style TargetType="Button" x:Key="KeyboardButton">
        <Setter Property="Width" Value="30"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="Background" Value="Black" />
        <Setter Property="Foreground" Value="White" />
    </Style>
    <!--<local:YesNoToBooleanConverter x:Key="YesNoToBooleanConverter" />-->
    <Style x:Key="KeyboardStyle" TargetType="{x:Type StackPanel}">
        <Style.Resources>
            <Style TargetType="{x:Type Button}" BasedOn="{StaticResource KeyboardButton}"/>
        </Style.Resources>
        <Setter Property="OverridesDefaultStyle" Value="True"/>
    </Style>

</UserControl.Resources>
<StackPanel Background="Red" Style="{DynamicResource KeyboardStyle}">
    <TextBox />
    <StackPanel Orientation="Horizontal">
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=q, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=w, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=e, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=r, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=t, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=y, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=u, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=i, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=o, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=p, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal">
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=a, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=s, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=d, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=f, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=g, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=h, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=j, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=k, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=l, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal">
        <Button Content="↑" Click="Button_Click"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=z, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=x, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=c, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=v, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=b, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=n, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
        <Button Content="{Binding Path=IsUppercase, ConverterParameter=m, Converter={StaticResource LowerUpperCaseConverter}, Mode=TwoWay}"/>
    </StackPanel>
</StackPanel>

CS

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;

namespace WpfApplication10
{
/// <summary>
/// Interaction logic for AlphaNumericKeyboard.xaml
/// </summary>
public partial class AlphaNumericKeyboard : UserControl
{
    public bool IsUppercase { get; set; }

    public AlphaNumericKeyboard()
    {
        //this.IsUppercase = true;
        InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        this.IsUppercase = !this.IsUppercase;
        this.UpdateLayout();
    }
}

//[ValueConversion(typeof(bool), typeof(string))]
public class LowerUpperCaseConverter : IValueConverter
{
    public object Convert(object value, Type targetType,
        object parameter, CultureInfo culture)
    {
        return (bool)value ? parameter.ToString().ToUpper() : parameter.ToString().ToLower();
    }

    public object ConvertBack(object value, Type targetType,
        object parameter, CultureInfo culture)
    {
        return true;
    }
}

}

It is properly working when I run it. It displays upper or lowercase letters on buttons depending on IsUppercase property but only if it is set before InitializeComponents(); . After that when I change the IsUppercase property by clicking an upward pointing arrow symbol it doesn't seem to take any effect.

So my question is: how to bind control property to change it during runtime?

Answer 1

You either need to implement a DependencyProperty or implement the INotifyPropertyChanged interface to update the UI controls from code behind.

Try this:

public partial class AlphaNumericKeyboard : UserControl, INotifyPropertyChanged
{
    private bool isUppercase;
    public bool IsUppercase
    {
        get { return isUppercase; }
        set
        {
            isUppercase = value; 
            NotifyPropertyChanged("IsUppercase");
        }
    }

    ...

    /// Implement INotifyPropertyChanged interface correctly
}

Please follow the link to find out how to correctly implement the INotifyPropertyChanged interface.