locked
How to refresh TextBox from viewmodel

    Question

  • Hello all.

    I'm using databinding to change the foreground color of a textbox (SolidBrush). It works fine since the Propertychanged Event gets raised and thus the UI knows about the change. The problem is however, that the changes do not reflect until I reload the page again (for example, by navigation away and coming back again).

    I'm using the same procedure to change the background color of the exact same textbox and that is working without having to reload the page.
    Is there some way to "refresh" the textbox from the viewmodel even if this would stay in contradition to the VM being ignorant about the view?

    Thanks for your opinion.

    Filipe

    Thursday, January 31, 2013 5:05 PM

Answers

  • Hopefully this example will help discover what happens:

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <TextBox Text="Text" Foreground="{Binding Fore}" VerticalAlignment="Top"/>
            <Button Content="GO" HorizontalAlignment="Center" Click="Button_Click_1"/>
    </Grid>

    -

    using System.ComponentModel;
    using Windows.UI;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Media;
    
    namespace App10
    {
        public sealed partial class MainPage : Page, INotifyPropertyChanged
        {
            public event PropertyChangedEventHandler PropertyChanged;
    
            private void OnPropertyChanged(string propertyName)
            {
                if (PropertyChanged != null)
                    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
    
            Brush fore;
            public Brush Fore
            {
                get { return fore; }
                set { fore = value; OnPropertyChanged("Fore"); }
            }
            public MainPage()
            {
                this.DataContext = this;
                this.InitializeComponent();
            }
            bool b;
            private void Button_Click_1(object sender, RoutedEventArgs e)
            {
                Fore = b? new SolidColorBrush(Colors.Red) : new SolidColorBrush(Colors.Blue);
                b = !b;
            }
        }
    }
    

    Please remember to post language-related XAML C# VB questions to the relevant forum.

    Friday, February 01, 2013 7:09 AM
  • I created a sample for you :)

    See this:

     public class BindingToTextBoxViewModel : INotifyPropertyChanged
        {
            /// <summary>
            /// The background color.
            /// </summary>
            private SolidColorBrush _background;
    
            /// <summary>
            /// The foreground color.
            /// </summary>
            private SolidColorBrush _foreground;
    
            /// <summary>
            /// The yellow SolidColorBrush.
            /// </summary>
            private SolidColorBrush _yellow;
    
            /// <summary>
            /// The green SolidColorBrush.
            /// </summary>
            private SolidColorBrush _green;
    
            /// <summary>
            /// The blue SolidColorBrush.
            /// </summary>
            private SolidColorBrush _blue;
    
            /// <summary>
            /// The red SolidColorBrush.
            /// </summary>
            private SolidColorBrush _red;
    
            /// <summary>
            /// Initializes a new instance of the <see cref="BindingToTextBoxViewModel" /> class.
            /// </summary>
            public BindingToTextBoxViewModel()
            {
                _yellow = new SolidColorBrush(Colors.Yellow);
                _green = new SolidColorBrush(Colors.Green);
                _blue = new SolidColorBrush(Colors.Blue);
                _red = new SolidColorBrush(Colors.Red);
                _foreground = _yellow;
                _background = _red;
                ChangeForegroundColorCommand = new RelayCommand(ChangeForeground);
                ChangeBackgroundColorCommand = new RelayCommand(ChangeBackground);
            }
    
            private void ChangeBackground(object obj)
            {
                Background = Background == _red ? _blue : _red;
            }
    
            private void ChangeForeground(object obj)
            {
                Foreground = Foreground == _yellow ? _green : _yellow;
            }
    
            /// <summary>
            /// The property changed.
            /// </summary>
            public event PropertyChangedEventHandler PropertyChanged;
    
            /// <summary>
            /// Gets or sets the background.
            /// </summary>
            public SolidColorBrush Background
            {
                get
                {
                    return _background;
                }
    
                set
                {
                    _background = value;
                    OnPropertyChanged();
                }
            }
    
            /// <summary>
            /// Gets or sets the foreground.
            /// </summary>
            public SolidColorBrush Foreground
            {
                get
                {
                    return _foreground;
                }
    
                set
                {
                    _foreground = value;
                    OnPropertyChanged();
                }
            }
    
            /// <summary>
            /// Gets the change foreground color command.
            /// </summary>
            /// <value>
            /// The change foreground color command.
            /// </value>
            public ICommand ChangeForegroundColorCommand { get; private set; }
    
            /// <summary>
            /// Gets the change background color command.
            /// </summary>
            /// <value>
            /// The change background color command.
            /// </value>
            public ICommand ChangeBackgroundColorCommand { get; private set; }
    
            /// <summary>
            /// The on property changed.
            /// </summary>
            /// <param name="propertyName">The property name.</param>
            [NotifyPropertyChangedInvocator]
            protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
            {
                PropertyChangedEventHandler handler = PropertyChanged;
                if (handler != null)
                {
                    handler(this, new PropertyChangedEventArgs(propertyName));
                }
            }
        }


     <TextBox Text="This is a binding test" FontSize="40" Foreground="{Binding Foreground}" Grid.Column="1" Grid.Row="1" Background="{Binding Background}" Margin="10,144,605,393"/>
            <Button Content="Change background color" Grid.Column="1" Grid.Row="1"  Command="{Binding ChangeBackgroundColorCommand}"/>
            <Button Content="Change foreground color" Grid.Column="1" Grid.Row="1" Margin="246,295,0,295" Command="{Binding ChangeForegroundColorCommand}"/>
    public sealed partial class BindingToTextBoxPage : Page
        {
            public BindingToTextBoxPage()
            {
                this.InitializeComponent();
                DataContext = new BindingToTextBoxViewModel();
            }
    
            /// <summary>
            /// Invoked when this page is about to be displayed in a Frame.
            /// </summary>
            /// <param name="e">Event data that describes how this page was reached.  The Parameter
            /// property is typically used to configure the page.</param>
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
            }
        }

    Get it here:

    https://github.com/saramgsilva/MyMSDNSamples/tree/master/src/MSDN%20Samples


    Sara Silva - Microsoft Visual C# MVP
    My blog | My Windows 8 Store Apps Samples | More Samples
    Follow me in Twitter @saramgsilva

    My Windows 8 Store Apps: Female Pill | Galinho (Tic tac Toe) | 24 | My Snake
    My Windows Phone Apps

    Friday, February 01, 2013 11:25 AM

All replies

  • Hopefully this example will help discover what happens:

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <TextBox Text="Text" Foreground="{Binding Fore}" VerticalAlignment="Top"/>
            <Button Content="GO" HorizontalAlignment="Center" Click="Button_Click_1"/>
    </Grid>

    -

    using System.ComponentModel;
    using Windows.UI;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Media;
    
    namespace App10
    {
        public sealed partial class MainPage : Page, INotifyPropertyChanged
        {
            public event PropertyChangedEventHandler PropertyChanged;
    
            private void OnPropertyChanged(string propertyName)
            {
                if (PropertyChanged != null)
                    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
    
            Brush fore;
            public Brush Fore
            {
                get { return fore; }
                set { fore = value; OnPropertyChanged("Fore"); }
            }
            public MainPage()
            {
                this.DataContext = this;
                this.InitializeComponent();
            }
            bool b;
            private void Button_Click_1(object sender, RoutedEventArgs e)
            {
                Fore = b? new SolidColorBrush(Colors.Red) : new SolidColorBrush(Colors.Blue);
                b = !b;
            }
        }
    }
    

    Please remember to post language-related XAML C# VB questions to the relevant forum.

    Friday, February 01, 2013 7:09 AM
  • I created a sample for you :)

    See this:

     public class BindingToTextBoxViewModel : INotifyPropertyChanged
        {
            /// <summary>
            /// The background color.
            /// </summary>
            private SolidColorBrush _background;
    
            /// <summary>
            /// The foreground color.
            /// </summary>
            private SolidColorBrush _foreground;
    
            /// <summary>
            /// The yellow SolidColorBrush.
            /// </summary>
            private SolidColorBrush _yellow;
    
            /// <summary>
            /// The green SolidColorBrush.
            /// </summary>
            private SolidColorBrush _green;
    
            /// <summary>
            /// The blue SolidColorBrush.
            /// </summary>
            private SolidColorBrush _blue;
    
            /// <summary>
            /// The red SolidColorBrush.
            /// </summary>
            private SolidColorBrush _red;
    
            /// <summary>
            /// Initializes a new instance of the <see cref="BindingToTextBoxViewModel" /> class.
            /// </summary>
            public BindingToTextBoxViewModel()
            {
                _yellow = new SolidColorBrush(Colors.Yellow);
                _green = new SolidColorBrush(Colors.Green);
                _blue = new SolidColorBrush(Colors.Blue);
                _red = new SolidColorBrush(Colors.Red);
                _foreground = _yellow;
                _background = _red;
                ChangeForegroundColorCommand = new RelayCommand(ChangeForeground);
                ChangeBackgroundColorCommand = new RelayCommand(ChangeBackground);
            }
    
            private void ChangeBackground(object obj)
            {
                Background = Background == _red ? _blue : _red;
            }
    
            private void ChangeForeground(object obj)
            {
                Foreground = Foreground == _yellow ? _green : _yellow;
            }
    
            /// <summary>
            /// The property changed.
            /// </summary>
            public event PropertyChangedEventHandler PropertyChanged;
    
            /// <summary>
            /// Gets or sets the background.
            /// </summary>
            public SolidColorBrush Background
            {
                get
                {
                    return _background;
                }
    
                set
                {
                    _background = value;
                    OnPropertyChanged();
                }
            }
    
            /// <summary>
            /// Gets or sets the foreground.
            /// </summary>
            public SolidColorBrush Foreground
            {
                get
                {
                    return _foreground;
                }
    
                set
                {
                    _foreground = value;
                    OnPropertyChanged();
                }
            }
    
            /// <summary>
            /// Gets the change foreground color command.
            /// </summary>
            /// <value>
            /// The change foreground color command.
            /// </value>
            public ICommand ChangeForegroundColorCommand { get; private set; }
    
            /// <summary>
            /// Gets the change background color command.
            /// </summary>
            /// <value>
            /// The change background color command.
            /// </value>
            public ICommand ChangeBackgroundColorCommand { get; private set; }
    
            /// <summary>
            /// The on property changed.
            /// </summary>
            /// <param name="propertyName">The property name.</param>
            [NotifyPropertyChangedInvocator]
            protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
            {
                PropertyChangedEventHandler handler = PropertyChanged;
                if (handler != null)
                {
                    handler(this, new PropertyChangedEventArgs(propertyName));
                }
            }
        }


     <TextBox Text="This is a binding test" FontSize="40" Foreground="{Binding Foreground}" Grid.Column="1" Grid.Row="1" Background="{Binding Background}" Margin="10,144,605,393"/>
            <Button Content="Change background color" Grid.Column="1" Grid.Row="1"  Command="{Binding ChangeBackgroundColorCommand}"/>
            <Button Content="Change foreground color" Grid.Column="1" Grid.Row="1" Margin="246,295,0,295" Command="{Binding ChangeForegroundColorCommand}"/>
    public sealed partial class BindingToTextBoxPage : Page
        {
            public BindingToTextBoxPage()
            {
                this.InitializeComponent();
                DataContext = new BindingToTextBoxViewModel();
            }
    
            /// <summary>
            /// Invoked when this page is about to be displayed in a Frame.
            /// </summary>
            /// <param name="e">Event data that describes how this page was reached.  The Parameter
            /// property is typically used to configure the page.</param>
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
            }
        }

    Get it here:

    https://github.com/saramgsilva/MyMSDNSamples/tree/master/src/MSDN%20Samples


    Sara Silva - Microsoft Visual C# MVP
    My blog | My Windows 8 Store Apps Samples | More Samples
    Follow me in Twitter @saramgsilva

    My Windows 8 Store Apps: Female Pill | Galinho (Tic tac Toe) | 24 | My Snake
    My Windows Phone Apps

    Friday, February 01, 2013 11:25 AM
  • Thank you very much!
    Saturday, February 02, 2013 10:14 PM
  • Thank you Sara!
    Saturday, February 02, 2013 10:14 PM