We Keep Coding

PopUp binding not done correctly

I have a listview which on mouse enter to a particular column, i try to launch a popup in viewmodel class by setting isOpen to true in MyAction2() function which gets called on when user enters mouse on that column of listview.
I observe that when the mouse-enter to that column.It calls my function (MyAction2() function in ViewModel, see code written below) but even on setting the isopen variable to true in MyAction2(), The set-get method of binded isOpen not get called. Now i feel there is problem in binding. Which normally should be correct i feel some thing is missing but i dont know what.
My Xaml (containing teh opup and the column in ListView which on mouse enter calls an event called MyAction2() in ViewModel):
<Grid>
<StackPanel>
<Popup Margin="10,10,0,13" Name="Popup1" IsOpen="{Binding PopUpLaunched,Mode=TwoWay}" Placement="Top" PopupAnimation="Fade" StaysOpen="True" HorizontalAlignment="Left" VerticalAlignment="Top" Width="194" Height="200" MinWidth="500" MinHeight="500">
<StackPanel>
<Border Background="Red">
<TextBlock Name="McTextBlock" Background="LightBlue"> This is popup text </TextBlock>
</Border>
</StackPanel>
</Popup>
</StackPanel>
</Grid>
ViewModel.cs
private bool popUpLaunched;
public bool PopUpLaunched {
get {
return popUpLaunched;
} //Get set never gets called even after the popUpLaunched=true in the MyAction2() call
set {
popUpLaunched = value;
OnPropertyChanged("PopUpLaunched");
}
}
private void MyAction2(object param) //The function which gets called on mouse event but do not pop ups the popup
{
popUpLaunched = true;
}
Whats wrong and where is wrong ?

You should set the PopupLaunched property instead of setting the popUpLaunched field for the setter to get called and the PropertyChanged event to get raised:
private void MyAction2(object param)
{
PopUpLaunched = true;
}

In order to implement such a binding, you can make that property a Dependency property like this
public static readonly DependencyProperty PopUpLaunched = DependencyProperty.Register(
"popUpLaunched", typeof(bool), typeof(MainPage), new PropertyMetadata(null));
public bool popUpLaunched
{
get { return (bool)GetValue(PopUpLaunched); }
set { SetValue(PopUpLaunched, value); }
}
If you are not working on the MainPage, change that typeof(MainPage) argument respectively. And adjust getter and setter for your needs.

Bind ColumnSpan in XAML in Universal App Windows 10

I'm trying to change the ColumnSpan based on a value from my ViewModel in a UWP for Windows 10 using the following:
<Setter Target="ProgramView.ColumnSpan" Value="{Binding
IsProgramViewVisible, Converter={StaticResource OneIfVisibleConverter}}"/>
I'm having 2 problems:
a) It doesn't allow me to bind
b) It can't find the converter even though it's declared in my Page's resources.
When I move my mouse over the above, it displays an error:
Catastrophic Failure: (Exception from HRESULT: 0X8000FFFF (E_UNEXPECTED)
The error occurs whether I define my converter or not, so I'm assuming the problem is with the binding.
Is there a way I can achieve this?
Thanks.

Since we cant provide an accurate solution without seeing your code.
Here is a check list you can follow to find out the bug:
1.Debug your Converter and check if it is returning desired value for all test cases.
2.Check if all the names are proper and there isn't any typo in ur xaml.
Here is an implementation for binding column span with an vm and updating it with a command bound to the click event.
<Page.Resources>
<local:BoolToColumnSpanConverter x:Key="BoolToColumnSpanConverter" />
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.DataContext>
<local:Items />
</Grid.DataContext>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Rectangle HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="Red"
Grid.ColumnSpan="{Binding span, Converter={StaticResource BoolToColumnSpanConverter}}" />
<Button Click="Button_Click"
Content="change span"
Grid.ColumnSpan="2"
Grid.Column="2"
Margin="5"
Command="{Binding ChangeSpanCommand, Mode=OneWay}" />
</Grid>
the code behind:
The Converter just converts true to 2 and false to 1
The command is bound to a method in the VM called UpdateSpan which just turns the boolean inverse.
When the button is pressed , since it is bound to the command the command is called, since it just returns a new relaycommand with the UpdateSpan as a parameter this method is executed .. which will update the span boolean triggering a change which is notified by the System thru the OnPropertyChanged event and the value converter is executed turning the columnspan to 1 and 2 .
public class BoolToColumnSpanConverter : IValueConverter
{
public object Convert( object value , Type targetType , object parameter , string language )
{
var b = (bool)value;
return b ? 2 : 1;
}
public object ConvertBack( object value , Type targetType , object parameter , string language )
{
throw new NotImplementedException();
}
}
public class Items : INotifyPropertyChanged
{
private bool _span;
public bool span
{
get { return _span; }
set
{
if (value != _span) _span = value;
OnPropertyChanged();
}
}
public ICommand ChangeSpanCommand {
get
{
return new RelayCommand(() => UpdateSpan());
}
}
public Items()
{
span = true;
}
public void UpdateSpan()
{
span = !span;
}
#region Notify Property Changed Members
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged( [CallerMemberName]string propertyName = null )
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this , new PropertyChangedEventArgs(propertyName));
}
}
#endregion
}
public class RelayCommand : ICommand
{
public event EventHandler CanExecuteChanged;
public bool CanExecute( object parameter )
{
return true;
}
public void Execute( object parameter )
{
this._action();
}
private Action _action;
public RelayCommand( Action action )
{
this._action = action;
}
}

Here's the answer to my problem.
Binding directly in a Setter is not allowed for Universal App (Windows Store & Windows Phone Apps), but works ok with WPF.
<Setter Target="ProgramView.ColumnSpan" Value="{Binding
IsProgramViewVisible, Converter={StaticResource OneIfVisibleConverter}}"/>
Triggers/DataTriggers are not supported in XAML and have been replaced by the VisualStateManager as explained in DataTriggers in WinRT post in StackOverflow.
I found various explanations on how to resolve this so here are a few links you might also find helpful:
Handling VisualState in Universal apps with Behavior SDK and MVVM
A Behavior to handle VisualState in Universal apps with MVVM
Using a Style Selector
Adventures in Windows 8: Placing items in a GridView with a ColumnSpan or RowSpan (also mentioned by #Bit)
So my solution as mentioned above was to use the VisualStateManager, more specifically, `DataTriggerBehavior.
One mistake which cost me a lot of time was to try to use this in conjunction with existing AdaptiveTrigger MinWindowWidth as I wanted to set my a VisualState based on the size and based on a binded property. This turned out to be a nightmare and it's a shame that there isn't a better mixture of the 2. Maybe there is a solution and I'm still missing something but for now my solution was a follows:
Define my various VisualStates and set the various properties within it:
<VisualState x:Name="ListOnly">
<VisualState.Setters>
<Setter Target="ProgramList.(Grid.Column)" Value="0" />
....
</VisualState.Setters>
</VisualState>
Check my app's orientation and width from the MainPage.Xaml in the Page_SizeChanged event and create a static property in the App.cs and set it from there:
private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (ApplicationView.GetForCurrentView().Orientation ==
ApplicationViewOrientation.Landscape)
{
App.IsLandscape = (ApplicationView.GetForCurrentView()
.VisibleBounds.Width < 600) ? false : true;
}
else
{
App.IsLandscape = false;
}
}
From the relevant page that loaded in the Frame of MainPage i.e. ListPage.xaml for example, I created a function called SizeChanged in the relevant ViewModel i.e. ListPageViewModel and I call this from within the Page_SizeChange event of the page:
private void Page_SizeChanged(object sender, Windows.UI.Xaml.SizeChangedEventArgs e)
{
this.GetViewModel.SizeChanged();
}
The SizeChange method in the relevant ViewModel will change a property that's binded to the DataTrigger based on my app's orientation and size:
public void SizeChanged()
{
if (!App.IsLandscape)
{
...
this.ActivePart = ActivePartEnum.ListOnly.ToString();
...
}
else
{
...
this.ActivePart = ActivePartEnum.Both.ToString();
...
}
}
Finally in the relevant XAML Page, call the DataTriggerBehaviour:
<Interactivity:Interaction.Behaviors>
<Core:DataTriggerBehavior Binding="{Binding ActivePart}"
ComparisonCondition="Equal" Value="ListOnly">
<Core:GoToStateAction StateName="ListOnly" />
</Core:DataTriggerBehavior>
....
</Interactivity:Interaction.Behaviors>
With the above, you should be able to apply a specific template based on orientation and size of your app and can be expanded if needed. One thing I will be looking into further is behaviour but couldn't get it to work and had to move on for now, but that would be an even better solution I think.
Hope this helps anyway and thanks for everyone's feedback.

Toggle Button Two Way Binding Not Working (Universal Windows Platform)

I am trying to bind the "IsChecked" property on the ToggleButton to "ModelView.IsEnabled".
"ModelView.IsEnabled" is always "false"
but somehow the ToggleButton can still show as "Checked".
Is there anything wrong with the binding?
XAML
...
<Page.Resources>
<ModelView:ModelView x:Key="ModelView"/>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ToggleButton IsChecked="{Binding Source={StaticResource ModelView}, Path=IsEnabled, Mode=TwoWay}">
<TextBlock >UWP Toggle Button</TextBlock>
</ToggleButton>
</Grid>
...
ModelView.cs
using...
namespace App2
{
class ModelView : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public event EventHandler CanExecuteChanged;
private bool _isEnabled;
public bool IsEnabled
{
get {
return _isEnabled;
}
set
{
_isEnabled = false;
OnPropertyChanged("IsEnabled");
}
}
protected void OnPropertyChanged(string name)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(name));
}
}
}
}

Try this, it worked to me:
1. Xaml code changes:
<Grid>
<Grid.DataContext>
<soHelpProject:MainViewModel/>
</Grid.DataContext>
<ToggleButton IsChecked="{Binding IsToggled, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}">
<TextBlock >UWP Toggle Button</TextBlock>
</ToggleButton>
</Grid>
regards,

In your class ModelView, change IsEnabled from this:
public bool IsEnabled
{
get {
return _isEnabled;
}
set
{
_isEnabled = false;
OnPropertyChanged("IsEnabled");
}
}
to this:
public bool IsEnabled
{
get {
return _isEnabled;
}
set
{
_isEnabled = value;
OnPropertyChanged("IsEnabled");
}
}
EDIT: If i use _isEnabled = !value; as you suggested, it still works, with button and state now showing opposite values:
EDIT 2: Now, if you want to properly test your binding, then you could add an extra regular button and do this:
private void button1_Click(object sender, RoutedEventArgs e)
{
myModelView.IsEnabled = !myModelView.IsEnabled;
}
so you can watch your ToggleButton switch between true and false every time you click Test Button. Please note that Test Button is not bound to anything, it's just for testing purposes. See corresponding XAML at the bottom.
The problem is that the way you're doing it, "forcing" IsEnabled to be always false, you're actually sabotaging your own code...:O)
And finally, it is not clear from your code when/where you're assigning your DataContext. Please see below how to do it.
XAML:
<Page.DataContext>
<local:MyModelView/>
</Page.DataContext>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ToggleButton x:Name="toggleButton1" Content="ToggleButton" IsChecked="{Binding IsEnabled, Mode=TwoWay}" HorizontalAlignment="Center"/>
<TextBlock x:Name="textBlock1" Text="{Binding IsEnabled}" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="126,0,201,286" />
<Button x:Name="button1" Click="button1_Click" Margin="127,400,0,220" Content="Test Button" Height="35" />
</Grid>
Code-behind:
private void Page_Loaded(object sender, RoutedEventArgs e)
{
myModelView = new MyModelView();
this.DataContext = myModelView;
}

I've run into the same problem, be it not with a ToggleButton, but with a TextBox, where I wanted to format the text the user had entered.
In your case you want to change the IsChecked property in your viewmodel and have it reflected in the User Interface straight away (so always be unchecked). The reason you want that is of absolutely no importance.
The problem is that with UWP the getter of your property gets called as you would expect when you click the ToggleButton. The normal action for the ToggleButton is to change from unchecked to checked (and vice versa) and that is what happens in your case. But then you expect that NotifyPropetyChanged signals the control in the UI. And that's where it goes wrong. The getter never gets called when the setter is executed (including NotifyPropertyChanged), so the UI doesn't reflect what you did in your setter.
This is very different from what the TwoWay Binding used to do (and still does in WPF). So there is nothing wrong with your code, but it seems that the binding mechanism has changed, although Microsoft claims it didn't. If you would use x:Bind, it works fine, so hat might solve your problem.
To clarify things more I have taken your example and modified it slightly, to show the problem.
I've put a ToggleButton on the page with a TwoWay binding to a viewmodel, exactly as you did. Clicking on the ToggleButton will switch its state from checked to unchecked and vice versa, even though the setter in my viewmodel Always sets the property to false (so unchecked).
But I've also added a normal button, that I've bound to a command that also modifies the property that the ToggleButton is bound to. Clicking this button calls the setter on the property the ToggleButton is bound to. Of course the setter gets called just the same, but after that the binding to the ToggleButton gets called, so NotifyPropertyChanged in this case does cause a UI update.
If you use the debugger, you can see exactly what i mean.
So your problem can be solved by using x:Bind, or by figuring out another way to update the UI, which you shouldn't have to do if Binding was still working as it used to. Maybe Microsoft has implemented some kind of optimization that now destroys classic Binding.
No special things, just a MainPage and a viewmodel.
My code for MainPage.xaml
<Page x:Class="App10.MainPage"
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:local="using:App10"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<local:ViewModel x:Key="viewModel" />
</Page.Resources>
<Grid x:Name="mainGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Margin="10,20,10,0">
<Button
x:Name="Button"
Content="UWP Normal button"
Command="{Binding Source={StaticResource viewModel}, Path=SwitchIschecked}"
HorizontalAlignment="Stretch" />
<ToggleButton
x:Name="toggleButton"
Margin="0,10,0,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
IsChecked="{Binding Source={StaticResource viewModel}, Path=IsChecked,
Mode=TwoWay}">
<TextBlock>UWP Toggle Button</TextBlock>
</ToggleButton>
</StackPanel>
</Grid>
</Page>
The code for MainPage.xaml.cs
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
namespace App10
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
}
}
And the code for ViewModel.cs
using System;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Input;
namespace App10
{
public class ViewModel : INotifyPropertyChanged
{
private bool _isChecked;
// property for TwoWay binding with ToggleButton
public bool IsChecked
{
get
{
return _isChecked;
}
set
{
// extra var just to check 'value'
var _value = value;
// now always set it to false
_isChecked = false;
// Try to pass value of _isChecked to user interface
// because there is no check whether the value really
// has changed
// But this only works if the setter is not being called
// directly from the control the property is bound to
OnPropertyChanged();
}
}
private ICommand _switchChecked;
// ICommand for normal button, binding to Command
// calls method to set Property for ToggleButton
public ICommand SwitchIschecked
{
get
{
if ( _switchChecked == null )
_switchChecked = new ChangeChecked( new Action( ChangeVar ));
return _switchChecked;
}
set
{
_switchChecked = value;
}
}
// This will set the property for the ToggleButton
private void ChangeVar()
{
IsChecked = !IsChecked;
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged( [CallerMemberName] string propertyName = null )
{
var handler = PropertyChanged;
handler?.Invoke( this, new PropertyChangedEventArgs( propertyName ) );
}
}
/// <summary>
/// Quick class to implement ICommand
/// </summary>
class ChangeChecked : ICommand
{
Action _execute;
public ChangeChecked( Action execute )
{
_execute = execute;
}
public event EventHandler CanExecuteChanged;
public bool CanExecute( object parameter )
{
return true;
}
public void Execute( object parameter )
{
_execute();
}
}
}

IsEnabled property is indicating whether the user can interact with the control. IsPressed is readonly property. So IsChecked is probably what you need.

How to change ToggleButton from ViewModel?

I came across an interesting issue.
Summary: I can't change the state of a toggle button from the ViewModel. The same problem seems to be with Microsoft ToggleButton as well as Telerik Controls.
ViewModel:
private bool? _isToggleChecked;
public bool? IsToggleChecked
{
get { return _isToggleChecked; }
set
{
if(_isToggleChecked == value)
return;
_isToggleChecked = value;
RaisePropertyChanged(()=>IsToggleChecked);
}
}
public VM()
{
FireCommand = new DelegateCommand(OnFire);
}
private void OnFire()
{
if (IsToggleChecked == null)
{
IsToggleChecked = true;
return;
}
IsToggleChecked = !IsToggleChecked;
}
public DelegateCommand FireCommand { get; set; }
View: (Microsoft ToggleButton could be used instead with the same behavior)
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel>
<telerik:RadToggleButton Height="50" IsChecked="{Binding IsToggleChecked}" />
<Button Command="{Binding FireCommand}" Height="20" />
</StackPanel>
</Grid>
View Code Behind:
public MainPage()
{
InitializeComponent();
DataContext = new VM();
}
How is this possible? How can I change the toggle state programmaticaly?
Many Thanks,

I had a problem with binding IsChecked on a RadRibbonToggleButton when I had the button bound to a command.
The workaround I found was to use a two way binding, but prevent the binding updating the source by using UpdateSourceTrigger=Explicit
IsChecked="{Binding IsLocked, Mode=TwoWay, UpdateSourceTrigger=Explicit}"
This works for me.
It is described as a known issue in WPF here

To me this is a Nullable property problem, that telerik control doesn't support for some reason. If so, check on provider's site for available solutions/ service packs or simply make your property NON Nullable and refactor your code.
Regards.

C# .NET4 WPF - Set combobox selecteditem from a string

Im all new in the world of C# and .net platform,so please be easy on me.
This forum helped me in a few problems that i came into while doing my project,but im now stuck on this for a few days.
What i'm trying to achieve is to set the selecteditem of a combobox by passing a string to it.
The scenario is :
I have a datatable and im setting the combo's itemssource to that datatable.DefaultView.
Also i set the DisplayMemberPath of the combo,and so far everything is ok,the items show up in the combobox.
Beside this i have a string with some value that i have inside the combobox too.
So i'm trying to set the selecteditem of the combo like this :
combo.SelectedItem = mystring;
As you can guess,it's not working. Strangely,when i do this:
combo.Items.Add(mystring);
combo.SelectedItem = mystring;
It's working. So this is why I'm confused!
EDIT:
I just found the solution :
combo.ItemsSource = datatable.DefaultView;
combo.DisplayMemberPath = "yourpath";
combo.SelectedValuePath = "yourpath";
combo.SelectedValue = mystring;
So the trick was to set the SelectedValuePath and the SelectedValue properties.
I don't know is this a good programming practice,but this does exactly what i needed.

You're doing something wrong.
Here's a demo app that shows this (the project should be named "StringCombo").
<Window
x:Class="StringCombo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
ResizeMode="CanResize">
<Window.DataContext>
<ViewModel
xmlns="clr-namespace:StringCombo" />
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ComboBox
Name="OldeFashonedCombo" />
<Button
Grid.Column="1"
Content="Select Olde Waye"
Click="Button_Click" />
<ComboBox
Grid.Row="1"
ItemsSource="{Binding Strings}"
SelectedItem="{Binding SelectedString}" />
<Button
Grid.Row="1"
Grid.Column="1"
Content="Select New Way"
Command="{Binding SelectString}" />
</Grid>
</Window>
We've got two combos and two buttons. One uses the old winforms method of codebehind to manipulate the combo, and the other uses the new MVVM pattern.
In both scenarios, the user clicks the button, it sets the combo's SelectedValue, and the combo updates on the ui.
Here's the codebehind version:
public MainWindow()
{
InitializeComponent();
OldeFashonedCombo.Items.Add("One");
OldeFashonedCombo.Items.Add("Two");
OldeFashonedCombo.Items.Add("Three");
}
private void Button_Click(object sender, RoutedEventArgs e)
{
OldeFashonedCombo.SelectedItem = "Two";
}
Notice I'm not using the same "instance" of "Two"; there is no need as strings are "interned," or the same instance is automatically reused, in the .NET platform. object.ReferenceEquals("Two","Two") is always true.
So, I add strings to the Items collection, and when the button is clicked I set the SelectedItem to "Two". SelectedItem is the actual instance within the Items collection that should be selected. SelectedValue is the display value; you can select by this IIRC, but I wouldn't do that as a best practice.
Here's the MVVM version:
public sealed class ViewModel : INotifyPropertyChanged
{
public ObservableCollection<string> Strings { get; private set; }
public ICommand SelectString { get; private set; }
public string SelectedString { get; set; }
public ViewModel()
{
Strings = new ObservableCollection<string>();
Strings.Add("Foo");
Strings.Add("Bar");
Strings.Add("Baz");
SelectString = new SelectStringCommand
{
ExecuteCalled = SelectBar
};
}
private void SelectBar()
{
SelectedString = "Bar";
// bad practice in general, but this is just an example
PropertyChanged(this, new PropertyChangedEventArgs("SelectedString"));
}
public event PropertyChangedEventHandler PropertyChanged;
}
/// <summary>
/// ICommands connect the UI to the view model via the commanding pattern
/// </summary>
public sealed class SelectStringCommand : ICommand
{
public Action ExecuteCalled { get; set; }
public bool CanExecute(object parameter)
{
return true;
}
public event EventHandler CanExecuteChanged;
public void Execute(object parameter)
{
ExecuteCalled();
}
}
Again, because of interning, I do not have to use the same "instance" of the string. To see how the ViewModel connects to the UI, check the bindings on the ComboBox and the Button (If you haven't looked into it yet, I'd strongly suggest ditching codebehind for MVVM. It may take a little more effort to figure it out, but its MUCH better in the long run).
ANYHOW, if you run this app you'd see that BOTH versions work as expected. When you click the button, the combo box is updated properly. This suggests that your code is wrong in some other way. Not sure what, as you haven't given us enough detail to determine this. But if you run the sample and compare it closely with your code, you might be able to figure this out.

I think using the findby will work so something like
combo.ClearSelection();
combo.Items.FindByValue(mystring).Selected = true;