I'm using Fluent Ribbon in a MVVM design pattern, with a View/ViewModel. My goal is to change the body according to which tab is selected. I could use either SelectedTabItem or SelectedTabIndex and lookup the corresponding view. However, neither fire when the tab selection changes. In the View I have...
<Fluent:Ribbon Grid.Row="0" SelectedTabItem="{Binding SelectedRibbonTab}" SelectedTabIndex="{Binding SelectedRibbonTabIndex}">
</Fluent:Ribbon>
<ContentControl Grid.Row="1" Content="{Binding RibbonTabContent}"/>
In the ViewModel I have...
// Used both Item and Index for troubleshoothing, but need only one or the other for implementation
private IDictionary<string, FrameworkElement> RibbonTabViews;
private List<FrameworkElement> RibbonTabViewsList;
public RibbonTabItem SelectedRibbonTab
{
get
{
return selectedRibbonTab;
}
set
{
Update(() => SelectedRibbonTab, ref selectedRibbonTab, value, false);
UpdateContentControl();
}
}
public int SelectedRibbonTabIndex
{
get
{
return selectedRibbonTabIndex;
}
set
{
Update(() => SelectedRibbonTabIndex, ref selectedRibbonTabIndex, value, false);
UpdateContentControl(value);
}
}
public FrameworkElement RibbonTabContent
{
get { return ribbonTabContent; }
set { Update(() => RibbonTabContent, ref ribbonTabContent, value, false); }
}
protected void UpdateContentControl()
{
RibbonTabContent = RibbonTabViews[SelectedRibbonTab.Header.ToString()];
}
protected void UpdateContentControl(int index)
{
RibbonTabContent = RibbonTabViewsList[index];
}
I know I don't need both bindings but for the sake of troubleshoot I have both Item and Index. I would think in the ViewModel SelectedRibbonTab and SelectedRibbonTabIndex would be called each time the tab changed. Unfortunately, that doesn't appear to be the case. I have breakpoints at the setters and getters for each and neither are hit when changing tabs. What am I missing? I've been using this approach for years with Microsoft Ribbon but for some reason these don't fire in Fluent Ribbon. Any help would be great, thank you.
You have to set the binding mode to TwoWay to get updated values in your ViewModel.
Related
so I am trying to use the CheckBox Control with MVVM logic. However the only event existing is CheckedChanged, which also triggers if I am navigating from the page for example.
I am searching for a Clicked event, like a button has.
Do I need to create a custom control with custom renderer, or is there a better solution?
Looking forward to replies.
[EDIT]
To provide more information about my issue, I will put code examples below.
My CheckBoxes are inside a ListView. Each CheckBox is defined like this in XAML:
<CheckBox
IsChecked="{Binding IsCompleted}">
<CheckBox.Behaviors>
<prism:EventToCommandBehavior
EventName="CheckedChanged"
Command="{Binding SubTaskStateChangedCommand}"/>
</CheckBox.Behaviors>
</CheckBox>
The ItemSource of the ListView has a property IsCompleted and a DelegateCommand SubTaskStateChangedCommand. It is worth mentioning that i am using Prism.
In the constructor:
SubTaskStateChangedCommand = new DelegateCommand(OnSubTaskStateChangedCommandExecuted);
Class SubTaskModel:
public DelegateCommand SubTaskStateChangedCommand { get; set; }
private void OnSubTaskStateChangedCommandExecuted()
{
//Do something
}
private bool _isCompleted;
public bool IsCompleted
{
get { return _isCompleted; }
set { _isCompleted = value; OnPropertyChanged(); }
}
So when I am navigating to another page in my ViewModel using the Prism NavigationService, the OnSubTaskStateChangedCommandExecuted Method gets triggered. However, I noticed that when this happens, the IsCompleted value DOES NOT change.
What's the appropriate way to handle running an async operation when an item is selected from a two-way bound control such as a combobox (wpf data binding)?
When I have a two-way binding property (e.g. SelectedValue on ComboBox) I don't think I can use Stephen Cleary's NotifyTaskCompletion because when a user selects a value from the dropdown, the ComboBox itself would need to modify the bound Result property, which is the Task's result.
The only viable solution I've come up with is calling an async Task -method from the databound setter without awaiting the result. This should be fine as long as the async-method triggers a property changed event for whatever ui-related stuff is being done, and that any exceptions are picked up and propagated to the ui accordingly, right?
I assume this would be a common case in async WPF applications. How do you guys approach this?
My solution so far:
<ComboBox
ItemsSource="{Binding PossibleItems}"
DisplayMemberPath="Name"
SelectedValue="{Binding SelectedItem}"/>
...
public Item SelectedItem
{
get { return m_selectedItem; }
set
{
m_selectedItem = value;
OnPropertyChanged();
InitializeAsyncAndFirePropertyChanged(); // async Task method not awaited - gives compiler warning CS4014
}
}
public async Task InitializeAsyncAndFirePropertyChanged(ObservableCollection<RFEnvironment> possibleRfEnvironments)
{
//should check this method for exceptions and propagate them to the UI via databinding
OtherDataBoundProperty = await GetSomeStringFromWebAsync();
}
public string OtherDataBoundProperty
{
get { return m_otherDataBoundProperty; }
set
{
m_otherDataBoundProperty = value;
OnPropertyChanged();
}
}
Note: I have found similar questions asked, but none that addresses two-way bindings on controls such as a Combobox.
If you are using a functional reactive MVVM framework such as ReactiveUI, you would simply observe the SelectedItem property and kick off any operation you want when the property is set. e.g.:
this.WhenAnyValue(x => x.SelectedItem)
.Subscribe(async _ => await InitializeAsyncAndFirePropertyChanged());
A property itself should ne be kicking off background operations, but a view model may do this when a property is set.
Please refer to the docs for more information: https://reactiveui.net/docs/concepts/.
I have a similar issue with async call in property setter when using WCF databinding.
My solution is slightly better, because in your case when an exception occurs in InitializeAsyncAndFirePropertyChanged, no exception is thrown nor caught. The modified code is below. It uses task continuation to throw an exception and raising OnPropertyChanged. OnPropertyChanged call can stay in an original place, it depends on your needs.
public class MyViewModel: INotifyPropertyChanged
{
private readonly TaskScheduler _uiScheduler;
public MyViewModel()
{
_uiScheduler = TaskScheduler.FromCurrentSynchronizationContext();
}
public Item SelectedItem
{
get { return m_selectedItem; }
set
{
m_selectedItem = value;
InitializeAsyncAndFirePropertyChanged()
.ContinueWith(t =>
{
if (t.Exception != null)
{
throw t.Exception;
}
OnPropertyChanged();
}, _uiScheduler);
}
}
public async Task InitializeAsyncAndFirePropertyChanged(ObservableCollection<RFEnvironment> possibleRfEnvironments)
{
//should check this method for exceptions and propagate them to the UI via databinding
OtherDataBoundProperty = await GetSomeStringFromWebAsync();
}
public string OtherDataBoundProperty
{
get { return m_otherDataBoundProperty; }
set
{
m_otherDataBoundProperty = value;
OnPropertyChanged();
}
}
.... other code to support INotifyPropertyChanged
}
I created a new WPF MVVM application via Online Templates->WPF in VS2010->WPF MVVM project template. I created a checkbox labeled "Refresh Enabled?" next to the "Refresh" button that I wanted to enable/disable the "Refresh" button when clicked. I bound the IsChecked property of my checkbox to aMainWindowViewModel property I called CanRefreshDate, and it raises RaisePropertyChanged(()=>CanRefreshDate); in its setter. Also in the MainWindowViewModel, I added my newly created CanExecuteRefreshDate(), which returns the bool of CanRefreshDate property. However, when I click the checkbox, the button "Refresh" is never enabled/disabled to match. What is the proper way to fix this, and is this an oversight in the template or what?
Here's my modifications to the template code:
Xaml:
<CheckBox Content="Refresh Enabled?"
IsChecked="{Binding CanRefreshDate}"/>
MainWindowViewModel.cs:
private bool _CanRefreshDate;
public bool CanRefreshDate
{
get { return _CanRefreshDate; }
set
{
if (_CanRefreshDate != value)
{
_CanRefreshDate = value;
RaisePropertyChanged(() => CanRefreshDate);
}
}
}
public ICommand RefreshDateCommand { get { return new DelegateCommand(OnRefreshDate, CanExecuteRefreshDate); } }
private bool CanExecuteRefreshDate()
{
return CanRefreshDate;
}
I noticed that the template had RaiseCanExecuteChanged() misspelled RasieCanExecuteChanged() in DelegateCommand.cs and changed that. I was able to get it all working by removing RaiseCanExecuteChanged() and modifying the
public event Handler CanExecuteChanged;
to :
public event EventHandler CanExecuteChanged
{
add { CommandManager.RequerySuggested += value; }
remove { CommandManager.RequerySuggested -= value; }
}
However, I would like to know what the proper solution for this is and why the template doesn`t work. Am i missing something, doing something wrong or what? Please create a new solution and use the template I did and tell me what is going on! Thanks!
The author fixed the issue and released version 4.1 of the template yesterday.
I have a list of ToggleButtons being used as the ItemTemplate in a ListBox similar to this answer using the MultiSelect mode of the Listbox. However I need to make sure at least one item is always selected.
I can get the proper behavior from the ListBox by just adding an item back into the ListBox's SelectedItems collection on the ListBox.SelectionChanged event but my ToggleButton still moves out of its toggled state so I think I need to stop it earlier in the process.
I would like to do it without setting IsEnabled="False" on the last button Selected because I'd prefer to stay with the Enabled visual style without having to redo my button templates. Any ideas?
You can override the OnToggle method to prevent toggling the state, by not calling the base implementation :
public class LockableToggleButton : ToggleButton
{
protected override void OnToggle()
{
if (!LockToggle)
{
base.OnToggle();
}
}
public bool LockToggle
{
get { return (bool)GetValue(LockToggleProperty); }
set { SetValue(LockToggleProperty, value); }
}
// Using a DependencyProperty as the backing store for LockToggle. This enables animation, styling, binding, etc...
public static readonly DependencyProperty LockToggleProperty =
DependencyProperty.Register("LockToggle", typeof(bool), typeof(LockableToggleButton), new UIPropertyMetadata(false));
}
Have you tried using RadioButtons instead? It normally can't be deselected without selecting another one. It can also be styled to look like a ToggleButton:
<RadioButton Style="{StaticResource {x:Type ToggleButton}}"/>
Or, if you already have a Style for it, just make it BasedOn="{x:Type ToggleButton}". Note that the Visual Studio Editor shows an error in the first case, but it compiles and works fine.
This is hackey, but if you don't want custom code you could always use the property "IsHitTestVisible", when you don't want them to uncheck it, simply set IsHitTestVisible equal to false. However, they may be able to tab to the control and toggle it using the space bar.
Thomas's answer works fine, but you don't even need the extra dependency property. Your button will update correctly if you have the class inherit from ToggleButton so you can override the OnToggle method, and you change the IsChecked bound property on the ViewModel.
Xaml:
<myControls:OneWayFromSourceToTargetToggle x:Name="MyCustomToggleButton"
Command="{Binding Path=ToggleDoStuffCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}}"
IsChecked="{Binding Path=ToggleIsCheckedConditionVar,
Mode=OneWay}"
/>
Added ToggleButton Class:
public class OneWayFromSourceToTargetToggle : ToggleButton
{
/// <summary>
/// Overrides the OnToggle method, so it does not set the IsChecked Property automatically
/// </summary>
protected override void OnToggle()
{
// do nothing
}
}
Then in the ViewModel just set bool ToggleIsCheckedCondition to true or false. This is a nice way to do it because you are following good MVVM practices.
ViewModel:
public bool ToggleIsCheckedCondition
{
get { return _toggleIsCheckedCondition; }
set
{
if (_toggleIsCheckedCondition != value)
{
_toggleIsCheckedCondition = value;
NotifyPropertyChanged("ToggleIsCheckedCondition");
}
}
}
public ICommand ToggleDoStuffCommand
{
get {
return _toggleDoStuffCommand ??
(_toggleDoStuffCommand = new RelayCommand(ExecuteToggleDoStuffCommand));
}
}
private void ExecuteToggleDoStuffCommand(object param)
{
var btn = param as ToggleButton;
if (btn?.IsChecked == null)
{
return;
}
// has not been updated yet at this point
ToggleIsCheckedCondition = btn.IsChecked == false;
// do stuff
}
}
Adding a little bit to #Joachim-Mairböck's great answer in case you want to do the same programmatically:
new RadioButton {
...
GroupName = "myButtonGroup"
Style = Application.Current.TryFindResource(typeof(ToggleButton)) as Style
...
}
I have an INotifyProperty Screen item that I have bound to a wpf control.
Ok... I Simplified everything and am posting more code. I have a MainViewModel with the selected screen property.
public Screen SelectedScreen
{
get { return this.selectedScreen; }
set
{
this.selectedScreen = value;
this.OnPropertyChanged("SelectedScreen");
}
}
I have a textbox that is bound to this property:
<TextBlock Text="{Binding Path=SelectedScreen.ScreenNumber}" />
This all works initially. I have created another control that is changing the selected screen with the following code.
public Screen SelectedScreen
{
get { return (Screen)GetValue(SelectedScreenProperty); }
set
{
this.SetValue(SelectedScreenProperty, value);
for (int x = 0; x < this.Screens.Count; ++x)
this.Screens[x].IsSelected = false;
value.IsSelected = true;
}
}
public ObservableCollection<Screen> Screens
{
get { return (ObservableCollection<Screen>)GetValue(ScreensProperty); }
set { this.SetValue(ScreensProperty, value); }
}
public static readonly DependencyProperty SelectedScreenProperty =
DependencyProperty.Register("SelectedScreen",
typeof(Screen),
typeof(ScreenSelection));
public static readonly DependencyProperty ScreensProperty =
DependencyProperty.Register("Screens",
typeof(ObservableCollection<Screen>),
typeof(ScreenSelection),
new UIPropertyMetadata(new ObservableCollection<Screen>()));
This screen selection control is working. When I change screens and put a breakpoint on the set property of SelectedScreen it is called which then calls the SelectedScreen property of the MainViewModel. So the event is firing, but the textbox isn't updated even though it binds correctly the first time.
Does the class which contains the SelectedScreen property implement INotifyPropertyChanged? When the SelectedScreen property changes, the containing class should raise the PropertyChanged event, and typically, WPF should update the Binding.
Thank you gehho for looking at this. I figured it out and there is no way you had enough information to be able too. I was inheriting from ViewModelBase in the MainViewModel that was inheriting from ObservableObject where I implemented INotifyPropertyChanged. The problem is that I implemented the methods for INotifyPropertyChanged in both classes and WPF was listening to the wrong one. Very obscure. Very annoying. Very lasjkdf;ashdoh