WPF enable buttons group - c#

In first column i have list of groups ("First","Second"). In second column i have 5 button's. I want to enable or disable group of button's after choosing their group in first column. How to do this in MVVM pattern?
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new Data();
}
}
public class Data
{
public List<string> Items { get; set; }
public Data()
{
Items = new List<string>();
Items.Add("First");
Items.Add("Second");
}
}
Xaml:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<ListView ItemsSource="{Binding Items}" Grid.Column="0">
<ListView.ItemTemplate>
<DataTemplate>
<Label Content="{Binding .}"></Label>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Button Content="First" Grid.Column="1" HorizontalAlignment="Left" Height="30" Margin="21,24,0,0" VerticalAlignment="Top" Width="76" IsEnabled="False"/>
<Button Content="Second" Grid.Column="1" HorizontalAlignment="Left" Height="30" Margin="102,48,0,0" VerticalAlignment="Top" Width="76" IsEnabled="True"/>
<Button Content="First" Grid.Column="1" HorizontalAlignment="Left" Height="30" Margin="33,83,0,0" VerticalAlignment="Top" Width="76" IsEnabled="False"/>
<Button Content="Second" Grid.Column="1" HorizontalAlignment="Left" Height="30" Margin="126,93,0,0" VerticalAlignment="Top" Width="76" IsEnabled="True" RenderTransformOrigin="1.088,-0.075"/>
<Button Content="Second" Grid.Column="1" HorizontalAlignment="Left" Height="30" Margin="93,186,0,0" VerticalAlignment="Top" Width="76" IsEnabled="True"/>
</Grid>

Create your VM classes like:
public class Data:INotifyPropertyChanged
{
public ObservableCollection<MyRecord> Items
{
get{
return _items;
}
set{
_items=value;
OnProperyChanged("Items")
}
}
public Data()
{
Items = new ObservableCollection<MyRecord>()
{
new MyRecord(){Title:"First",IsEnable:false}),
new MyRecord(){Title:"Second",IsEnable:false})
};
}
//---------------------------------------------------------------
public event PropertyChangedEventHandler PropertyChanged;
private void OnProperyChanged(string propertyName)
{
if (PropertyChanged != null)
{
var handler= PropertyChanged ;
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
public class MyRecord:INotifyPropertyChanged
{
private int _title;
private bool _isEnable;
public int Title
{
get
{
return _title;
}
set
{
_title= value;
OnProperyChanged("Title")
}
}
public bool IsEnable
{
get
{
return _isEnable;
}
set
{
_isEnable= value;
OnProperyChanged("IsEnable")
}
}
//---------------------------------------------------------------
public event PropertyChangedEventHandler PropertyChanged;
private void OnProperyChanged(string propertyName)
{
if (PropertyChanged != null)
{
var handler= PropertyChanged ;
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
Now in your Xaml bind the IsEnabled property of each Button to appropriate property...
You can write the following code with BooleanToVisibilityConverter:
//First add BooleanToVisibilityConverter to the window resources
// When you know Items[0] is FIRST use some code like this>>
IsEnabled="{Binding Items[0].IsEnable, converter={StaticResource BooleanToVisibilityConverter}}"
Sample:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<ListView ItemsSource="{Binding Items}" Grid.Column="0">
<ListView.ItemTemplate>
<DataTemplate>
<Label Content="{Binding .}"></Label>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Button Content="First"
IsEnabled="{Binding Items[0].IsEnable, converter={StaticResource BooleanToVisibilityConverter}}"
Grid.Column="1" HorizontalAlignment="Left" Height="30" Margin="21,24,0,0" VerticalAlignment="Top" Width="76"/>
<Button Content="Second"
IsEnabled="{Binding Items[1].IsEnable, converter={StaticResource BooleanToVisibilityConverter}}"
Grid.Column="1" HorizontalAlignment="Left" Height="30" Margin="102,48,0,0" VerticalAlignment="Top" Width="76"/>
<Button Content="First"
IsEnabled="{Binding Items[0].IsEnable, converter={StaticResource BooleanToVisibilityConverter}}"
Grid.Column="1" HorizontalAlignment="Left" Height="30" Margin="33,83,0,0" VerticalAlignment="Top" Width="76"/>
<Button Content="Second"
IsEnabled="{Binding Items[1].IsEnable, converter={StaticResource BooleanToVisibilityConverter}}"
Grid.Column="1" HorizontalAlignment="Left" Height="30" Margin="126,93,0,0" VerticalAlignment="Top" Width="76" RenderTransformOrigin="1.088,-0.075"/>
<Button Content="Second"
IsEnabled="{Binding Items[1].IsEnable, converter={StaticResource BooleanToVisibilityConverter}}"
Grid.Column="1" HorizontalAlignment="Left" Height="30" Margin="93,186,0,0" VerticalAlignment="Top" Width="76"/>
</Grid>
OK, every things is good until this step. Now if you make IsEnable property of each item to TRUE, then the buttons must be Enabled And conversely. To perform it you can:
Write a Command in your Data class and make a binding between each List
item and the command.
Use ListView.SelectionChanged event to make IsEnable property of the Clicked item to TRUE. Note: Now, the type of each item in the ListView is MyRecord.

The best solution to your problem is to use a IValueConverter, in this example I created a convert named GroupToBooleanConverter receiving the value of the selected item in the first column by the parameter value and the button group by parameter 'parameter ', the code converter is below:
public class GroupToBooleanConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
var selectedGroup = value as string;
var buttonGroup = (string)parameter;
return buttonGroup.Equals(selectedGroup);
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
Now in its XAML you must reference the namespace of your turn, in my example the namespace convert is namespaceOfConverter, and must be imported to convert through it, is as follows:
xmlns:converters="clr-namespace:namespaceOfConverter"
Place the attribute up on your Window tag in your XAML. Now you must reference the convert, putting it in the Window resources:
<Window.Resources>
<converters:GroupToBooleanConverter x:Key="GroupToBoolean" />
</Window.Resources>
I called your ListView of lsvGroups:
<ListView ItemsSource="{Binding Items}" x:Name="lsvGroups" Grid.Column="0">
....
Now just use the converter in your buttons, performing binding in the property IsEnabled:
IsEnabled="{Binding SelectedItem, ElementName=lsvGroups,Converter={StaticResource GroupToBoolean},ConverterParameter=First}"
OBs: In the place of First you put the name of group associate with button.

Related

How to dynamically add grids into grid

For my current projet i want to make an UI where information are displayed on "tile" which i designed as a Grid with other Label and progress bar into. But i can't figure out how to make those tiles displayed on my main grid.
I already tried Gridview that didn't work with the exemples on the web and making someway without grid isn't really easy.
This is the grid to insert as many times as needed
<Grid Margin="10" Background="AntiqueWhite" Grid.Row="0" Grid.Column="0">
<Label Content="{Binding fieldname}" FontFamily="Arial Black" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,20,0,0"/>
<Label Content="{Binding datebegin}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="85,85,0,0" FontFamily="Arial Black" FontSize="18" />
<Label Content="{Binding dateend}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="285,85,0,0" FontFamily="Arial Black" FontSize="18" />
<ProgressBar Margin="0,150,0,0" Value="{Binding progression}" Background="White" BorderBrush="Black" VerticalAlignment="Top" Height="50" />
</Grid>
I need a way to add the exact tile produced into a grid (or anything else that can get onto a scrollviewer with 3 column and unlimited lines obviously).
Below is the xmal. I have used ItemsControl and the WrapPanel as ItemsPanelTemplate to wrap the ItemsControl's items
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Content="Add" Height="26" Width="75" Command="{Binding Add}" Grid.Row="0"/>
<ScrollViewer Height="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Row="1">
<ItemsControl ItemsSource="{Binding Items}" HorizontalAlignment="Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Margin="10,10,0,0" BorderBrush="Black" BorderThickness="1">
<StackPanel Width="200" Height="Auto">
<Label Content="{Binding fieldname}" FontFamily="Arial Black" FontSize="20" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,10,0,0"/>
<Label Content="{Binding datebegin}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,10,0,0" FontFamily="Arial Black" FontSize="18" />
<Label Content="{Binding dateend}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,10,0,0" FontFamily="Arial Black" FontSize="18" />
<ProgressBar Value="{Binding progression}" Margin="5,10,5,10" Background="White" BorderBrush="Black" VerticalAlignment="Top" Height="20" />
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
And the viewmodel is
public class Item
{
public string fieldname
{
get;
set;
}
public string datebegin
{
get;
set;
}
public string dateend
{
get;
set;
}
public string progression
{
get;
set;
}
public Item(int number)
{
fieldname = "Filed name " + number;
datebegin = "12-12-12";
dateend = "14-12-12";
progression = (5 * number).ToString();
}
}
public class ViewModel
{
public ICollection<Item> Items
{
get;
private set;
}
public ViewModel()
{
Items = new ObservableCollection<Item>();
}
public ICommand Add
{
get
{
return new RelayCommand((a) =>
{
Items.Add(new Item(Items.Count));
});
}
}
}
Relaycommand
public class RelayCommand : ICommand
{
private Action<object> execute;
private Predicate<object> canExecute;
public RelayCommand(Action<object> execute, Predicate<object> canExecute = null)
{
this.execute = execute;
this.canExecute = canExecute;
}
public bool CanExecute(object parameter)
{
return canExecute == null || canExecute(parameter);
}
public void Execute(object parameter)
{
execute(parameter);
}
public event EventHandler CanExecuteChanged
{
add
{
CommandManager.RequerySuggested += value;
}
remove
{
CommandManager.RequerySuggested -= value;
}
}

Binding of control visibility to ViewModel property doesn't work

I'm in the process of converting a fairly large WPF app from three-layer into MVVM, and in the process learning MVVM. So far, I haven't delved into too much detail around Bindings (etc), so bear with me.
I'm trying to bind the System.Windows.Visibility of multiple controls to a public property ("State") of the ViewModel. When the parent TabItem loads, the State property is read and handled as desired. When subsequent changes to the property are made, however, they appear to be ignored. I've (re-re-re-)checked Bindings, debugged the Converters, etc, and this is driving me crazy.
ViewModel:
public class MarketingListViewModel: IDisposable, INotifyPropertyChanged
{
private UiState state;
public event PropertyChangedEventHandler PropertyChanged;
public UiState State
{
get { return state; }
set
{
if (state != value)
{
state = value;
NotifyPropertyChanged("State");
}
}
}
public MarketingListViewModel()
{
State = UiState.View;
}
private void NotifyPropertyChanged(String info)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
}
View:
<UserControl 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:diag="clr-namespace:System.Diagnostics;assembly=WindowsBase"
mc:Ignorable="d" x:Class="WpfCrm.tabListManager" xmlns:DPH="clr-namespace:DPH" >
<UserControl.Resources>
<DPH:MarketingListViewModel x:Key="listVM" />
<!-- Note that the above line is giving me an "Object reference not set to an instance of an object" error -->
</UserControl.Resources>
<Grid x:Name="gridMain" DataContext="{StaticResource listVM}" >
<Border Grid.Row="0" Grid.Column="1" Margin="10"
Style="{StaticResource WidgetStyle}" >
<Grid x:Name="gridListManagement" >
<Label x:Name="labelManageLists" Content="Manage Lists" MouseDown="labelManageLists_MouseDown"
Style="{StaticResource WidgetTitleStyle}"
Grid.Row="0" Grid.Column="0" />
<StackPanel Grid.Row="0" Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Right" >
<Label x:Name="llNewList" Content="new" MouseDown="llNewList_MouseDown"
Style="{StaticResource LinkLabelStyle}"
HorizontalAlignment="Right" />
<Label x:Name="llCloseManageLists" Content="close" MouseDown="llCloseManageLists_MouseDown"
Style="{StaticResource LinkLabelStyle}"
HorizontalAlignment="Right" />
</StackPanel>
<Label x:Name="labelListName" Content="Name" Grid.Row="1" Grid.Column="0" />
<Grid Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" >
<ComboBox x:Name="cbLists" SelectedIndex="-1" SelectionChanged="cbLists_SelectionChanged" IsReadOnly="True"
ItemsSource="{Binding Path=AllMarketingLists}"
DisplayMemberPath="Name"
SelectedValuePath="Id"
Visibility="{Binding Path=State, Converter={StaticResource ViewStateToVisibilityConverter} }"/>
<TextBox x:Name="tbListName"
Text="{Binding Path=OList.Name}"
Visibility="{Binding Path=State, Converter={StaticResource EditStateToVisibilityConverter} }"/>
</Grid>
<Label x:Name="labelListDescription" Content="Description" Grid.Row="2" Grid.Column="0" />
<Grid Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" >
<TextBlock x:Name="textblockListDescription" TextWrapping="Wrap"
Text="{Binding Path=OList.Notes}"
Visibility="{Binding Path=State, Converter={StaticResource ViewStateToVisibilityConverter} }"
Grid.ColumnSpan="2" />
<TextBox x:Name="tbListDescription" TextWrapping="Wrap"
Text="{Binding Path=OList.Notes}"
Visibility="{Binding Path=State, Converter={StaticResource EditStateToVisibilityConverter} }"
Grid.ColumnSpan="2" />
</Grid>
<StackPanel Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" HorizontalAlignment="Right" Orientation="Horizontal" >
<Button x:Name="buttonEditList" Content="Edit" Click="buttonEditList_Click"
Visibility="{Binding Path=State, Converter={StaticResource ViewStateToVisibilityConverter} }"
Width="60" Margin="3" />
<Button x:Name="buttonSaveList" Content="Save" Click="buttonSaveList_Click"
Visibility="{Binding Path=State, Converter={StaticResource EditStateToVisibilityConverter} }"
Width="60" Margin="3" />
<Button x:Name="buttonCancel" Content="Cancel" Click="buttonCancel_Click"
Visibility="{Binding Path=State, Converter={StaticResource EditStateToVisibilityConverter} }"
Width="60" Margin="3" />
</StackPanel>
</Grid>
</Border>
</Grid>
And the code-behind has a few methods like:
private void buttonEditList_Click(object sender, RoutedEventArgs e)
{
listVM.State = UiState.Edit;
}
Does anyone have ideas on why the controls aren't updating their visibility after the State change?
Kind thanks,
DPH
EDIT -- Converters:
[ValueConversion(typeof(WpfCrm.UiState), typeof(System.Windows.Visibility))]
public class EditStateToVisibilityConverter: IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
UiState state = (UiState)value;
if (state == UiState.View) return Visibility.Collapsed;
else return Visibility.Visible;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return null;
}
}
[ValueConversion(typeof(WpfCrm.UiState), typeof(System.Windows.Visibility))]
public class ViewStateToVisibilityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
UiState state = (UiState)value;
if (state == UiState.View) return Visibility.Visible;
else return Visibility.Collapsed;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return null;
}
}
You seem to be used two different instances of your view model, one declared and used in XAML
<UserControl.Resources>
<DPH:MarketingListViewModel x:Key="listVM" />
</UserControl.Resources>
<Grid DataContext="{StaticResource listVM}" >
and one in code-behind (from comment):
listVM = new MarketingListViewModel();
You should of course be using only one. So change your code behind declaration to
listVM = (MarketingListViewModel)Resources["listVM"];
OK, there is a mistake. You declare listVM as
var listVM = new MarketingListViewModel();
But this is not the listVM from your XAML. In XAML you have created another instance of MarketingListViewModel. So, when you try to change listVM that was declared in code, nothing happens because this object is not DataContext of your Grid.
In your Click handler you have to write the following:
private void buttonEditList_Click(object sender, RoutedEventArgs e)
{
var _listVM = (MarketingListViewModel)FindResource("listVM");
_listVM.State = UiState.Edit;
}
OR replace your listVM declaration in code-behind with this one:
listVM = (MarketingListViewModel)FindResource("listVM");
Then you won't need to change event handlers.
Hope, it helps.

Binding to ItemsSource not working

I have done the following in XAML
<ItemsControl x:Name="CursorLegendIC" Grid.Column="0" Grid.Row="1" ItemsSource="{Binding}" Margin="0,0" Padding="0,0,0,-300">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Ellipse Width="8" Height="8" HorizontalAlignment="Left" Margin="0,0,0,-16" Fill="{Binding SeriesColor, Converter={StaticResource ColorToBrushConverter}}" />
<TextBlock Margin="10,0,0,0" HorizontalAlignment="Left" TextWrapping="Wrap" FontSize="11" FontWeight="Bold" Foreground="{Binding SeriesColor, Converter={StaticResource ColorToBrushConverter}}" Text="{Binding SeriesName}"/>
<TextBlock FontSize="11" HorizontalAlignment="Left" TextWrapping="Wrap" Margin="10,-3,0,4" Foreground="{Binding SeriesColor, Converter={StaticResource ColorToBrushConverter}}" Text="{Binding YValue, StringFormat=\{0:0.000\}}" />
<TextBlock FontSize="11" HorizontalAlignment="Left" TextWrapping="Wrap" Margin="10,-8,0,4" Foreground="{Binding SeriesColor, Converter={StaticResource ColorToBrushConverter}}" Text="{Binding RenderableSeries.YAxisId}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
And I have set the data context accordingly:
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
CursorLegendIC.DataContext = this.RolloverSeriesWithoutFirstData;
}
And set the Observable collection property as public
public ObservableCollection<SeriesInfo> RolloverSeriesWithoutFirstData
{
get
{
ObservableCollection<SeriesInfo> Temp = rolloverModifier.SeriesData.SeriesInfo;
return Temp;
}
}
But binding is still not working!
It seems to only take the binding at the first instance.
When data collection is later added, the binding changes does not seem to take effect.
Any help? Thanks
Your issue is that the instance (the entire collection) of the property SeriesInfo changes, without the owner of RolloverSeriesWithoutFirstData (lets call it MyWindow) is notified of the change. Either make your own event, or implemenet INotifyPropertyChanged. I've made an example with INPC:
class SeriesData : INotifyPropertyChanged
{
private ObservableCollection<SeriesInfo> _seriesInfo;
public ObservableCollection<SeriesInfo> SeriesInfo
{
set{ SetProperty(ref _seriesInfo, value); }
}
public event PropertyChangedEventHandler PropertyChanged;
private bool SetProperty<T>(ref T storage, T value, [CallermemberName] string propertyName = null)
{
if(Equals(storage,value)) return false;
storage = value;
var handler = PropertyChanged;
if(handler != null)
handler(this, new PropertyChangedEventArgs(propertyName));
return true;
}
}
In MyWindow you does this:
class MyWindow : Window, INotifyPropertyChanged
{
public ObservableCollection<SeriesInfo> RolloverSeriesWithoutFirstData
{
get{ return rolloverModifier.SeriesData.SeriesInfo; }
}
public event PropertyChangedEventHandler PropertyChanged;
public MyWindow()
{
// Get rolloverModifier
rolloverModifier.SeriesData.PropertyChanged += SeriesDataPropertyChanged;
}
private void SeriesDataPropertyChanged(object sender, PropertyChangedEventArgs e)
{
switch(e.PropertyName)
{
case "SeriesInfo":
RaisePropertyChanged("RolloverSeriesWithoutFirstData");
break;
}
}
private void RaisePropertyChanged([CallerMemberName] string propertyName = null)
{
var handler = PropertyChanged;
if(handler != null)
handler(this, new PropertyChangedEventArgs(propertyName));
}
Now SeriesData notifies it's listeners (our case MyWindow) that one of it's properties has changed value. MyWindow will then relay that notification to it's listeners (the bindings) that it's property: RolloverSeriesWithoutFirstData has changed.
Assuming that you are using MVVM pattern, you should remove the code behind and just bind to your ObservableCollection :
<ItemsControl x:Name="CursorLegendIC" Grid.Column="0" Grid.Row="1" ItemsSource="{Binding RolloverSeriesWithoutFirstData}" Margin="0,0" Padding="0,0,0,-300">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Ellipse Width="8" Height="8" HorizontalAlignment="Left" Margin="0,0,0,-16" Fill="{Binding SeriesColor, Converter={StaticResource ColorToBrushConverter}}" />
<TextBlock Margin="10,0,0,0" HorizontalAlignment="Left" TextWrapping="Wrap" FontSize="11" FontWeight="Bold" Foreground="{Binding SeriesColor, Converter={StaticResource ColorToBrushConverter}}" Text="{Binding SeriesName}"/>
<TextBlock FontSize="11" HorizontalAlignment="Left" TextWrapping="Wrap" Margin="10,-3,0,4" Foreground="{Binding SeriesColor, Converter={StaticResource ColorToBrushConverter}}" Text="{Binding YValue, StringFormat=\{0:0.000\}}" />
<TextBlock FontSize="11" HorizontalAlignment="Left" TextWrapping="Wrap" Margin="10,-8,0,4" Foreground="{Binding SeriesColor, Converter={StaticResource ColorToBrushConverter}}" Text="{Binding RenderableSeries.YAxisId}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
+Questions: what is rolloverModifier ? is rolloverModifier.SeriesData.SeriesInfo modified?
You just need to implement the INotifyPropertyChanged Interface in the class that you defined your RolloverSeriesWithoutFirstData property in. As that property has no setter, you will have to manually raise the NotifyPropertyChanged event whenever you update the collection:
(pseudo code):
rolloverModifier.SeriesData.SeriesInfo = DataAccess.GetNewCollection();
NotifyPropertyChanged("RolloverSeriesWithoutFirstData");
Change
CursorLegendIC.DataContext = this.RolloverSeriesWithoutFirstData
for
CursorLegendIC.ItemsSource= this.RolloverSeriesWithoutFirstData
Or as You can see in the above answer, remove code behind and use clear mvvm

MVVM-Light Different binding source triggers all ViewModels in context

I'm getting a strange behavior in a test model for mvvm-light:
I created one Window and setted two resources, one grid with two distinct dataContext, the problem is that the two view models are receiving the response even if I'm using only the side of one dataContext. Is there a way to set only the specified data context to fire to the view model that I indicate?
XAML Code:
<Window x:Class="POCWPFValidation.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:POCWPFValidation.ViewModel"
Title="MainWindow" Height="350" Width="525" >
<Window.Resources>
<vm:MainViewModel x:Key="Main"/>
<vm:SecondaryView x:Key="Sec"/>
</Window.Resources>
<Grid>
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Vertical" DataContext="{Binding Source={StaticResource Main}}">
<CheckBox Content="CheckBox" IsChecked="{Binding CheckBox1Checked}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<CheckBox Content="CheckBox" IsChecked="{Binding CheckBox2Checked}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<CheckBox Content="CheckBox" IsChecked="{Binding CheckBox3Checked}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<CheckBox Content="CheckBox" IsChecked="{Binding CheckBox4Checked}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBox Text="{Binding StringTest, UpdateSourceTrigger=PropertyChanged}" />
<Button Content="Button" Command="{Binding Teste}" HorizontalAlignment="Left" VerticalAlignment="Top" Background="{x:Null}" DataContext="{Binding Mode=OneWay}"/>
<Button Content="Button" Command="{Binding Teste2}" CommandParameter="{Binding ElementName=TextBox1, Path=Text}" HorizontalAlignment="Left" VerticalAlignment="Top" Background="{x:Null}" DataContext="{Binding Mode=OneWay}"/>
</StackPanel>
<StackPanel Orientation="Vertical" DataContext="{Binding Source={StaticResource Sec}}">
<CheckBox Content="CheckBox" IsChecked="{Binding CheckBox1Checked}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<CheckBox Content="CheckBox" IsChecked="{Binding CheckBox2Checked}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<CheckBox Content="CheckBox" IsChecked="{Binding CheckBox3Checked}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<CheckBox Content="CheckBox" IsChecked="{Binding CheckBox4Checked}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBox Text="{Binding StringTest, UpdateSourceTrigger=PropertyChanged}" />
<Button Content="Button" Command="{Binding Teste}" HorizontalAlignment="Left" VerticalAlignment="Top" Background="{x:Null}" DataContext="{Binding Mode=OneWay}"/>
<Button Content="Button" Command="{Binding Teste2}" CommandParameter="{Binding ElementName=TextBox1, Path=Text}" HorizontalAlignment="Left" VerticalAlignment="Top" Background="{x:Null}" DataContext="{Binding Mode=OneWay}"/>
</StackPanel>
</StackPanel>
</Grid>
</Window>
The views are the same, so just change the name to SecondaryView
namespace POCWPFValidation.ViewModel
{
public class MainViewModel : ViewModelBase
{
private bool m_blnCheckBox1Checked;
private bool m_blnCheckBox2Checked;
private bool m_blnCheckBox3Checked;
private bool m_blnCheckBox4Checked;
public bool CheckBox1Checked
{
get { return m_blnCheckBox1Checked; }
set
{
Set(ref m_blnCheckBox1Checked, value, true);
}
}
public bool CheckBox2Checked
{
get { return m_blnCheckBox2Checked; }
set
{
Set(ref m_blnCheckBox2Checked, value, true);
}
}
public bool CheckBox3Checked
{
get { return m_blnCheckBox3Checked; }
set
{
Set(ref m_blnCheckBox3Checked, value, true);
}
}
public bool CheckBox4Checked
{
get { return m_blnCheckBox4Checked; }
set
{
Set(ref m_blnCheckBox4Checked, value, true);
}
}
string m_strStringTest = string.Empty;
public string StringTest
{
get { return m_strStringTest; }
set
{
Set(ref m_strStringTest, value, true);
}
}
public RelayCommand<string> Teste2 { get; private set; }
public RelayCommand Teste { get; private set; }
public MainViewModel()
{
Teste = new RelayCommand(MyAction, MyCanExecute);
Teste2 = new RelayCommand<string>(MyAction2, MyCanExecute2);
}
private void MyAction()
{
}
private void MyAction2(string seila)
{
}
private bool MyCanExecute2(string teste)
{
return !string.IsNullOrWhiteSpace(teste);
}
private bool MyCanExecute()
{
if (CheckBox1Checked && CheckBox2Checked && CheckBox3Checked && CheckBox4Checked && StringTest.Equals("teste"))
{
return true;
}
return false;
}
}
}
EDIT:
Sorry, I was not clear with my question, let me try again: like I told before, I have two view models and two distinct datacontext in mainWindow one for each viewmodel. Every time some property on any of these view models changes all the canExecute method of the two viewmodels are triggered. Change some property on view A and the can execute will be triggered on views A and B. Is there a way to only trigger at the specific CanExecute responsible view?
CanExecute is not triggered by the property changes but by CommandManager.RequerySuggested event. Don't worry about when its invoked WPF handles that

WPF: What's the proper way to do nested Binding

I have 3 models: Machine, Part, and Component. On my ui, I have bound one listbox to a list of Machines and a second listbox to the selected Machine's list of Parts. Now when the user selects a part, I would like to bind a datagrid to the selected part's list of components. I tried setting the datagrid's itemssource to:
ItemsSource="{Binding ElementName=PartSelectList, Path=SelectedItem.Components}"
I also tried setting its datacontext and itemssource
DataContext={Binding ElementName=PartSelectList, Path=SelectedItem}
ItemsSource={Binding Components}
However the datagrid does not automatically update if changes are made to the part's list of components via methods such as
part.Bags.Add(new Component(..));
Anyone have suggestions on how I should approach this?
Update: I have a class MachineCollection which implements INotifyPropertyChanged. In my xaml.cs code I create my MachineCollection object and bind the MainGrid to it's Machines property:
Page1.xaml.cs:
private MachineCollection machines
public Page1()
{
machineCollection = new MachineCollection();
MainGrid.DataContext = machineCollection.Machines
actionThread = new Thread(InitLists);
actionThread.Start();
}
public void InitLists()
{
machineCollection.Machines.AddRange(dbCon.GetAllMachines());
}
Classes:
public class MachineCollection : INotifyPropertyChanged
{
public List<Machine> Machines
{
get { return machines; }
set { machines = value; NotifyPropertyChanged("Machines"); }
}
}
public class Machine : INotifyPropertyChanged
{
public List<Part> Parts
{
get { return parts; }
set { parts = value; NotifyPropertyChanged("Parts");
}
}
public class Part : INotifyPropertyChanged
{
public List<Component> Components
{
get { return components; }
set { components = value; NotifyPropertyChanged("Components");
}
}
public class Component : INotifyPropertyChanged
{
public int Length
{
get { return length; }
set { length = value; NotifyPropertyChanged("Length");
}
}
XAML:
<Page>
<Grid Name="MainGrid">
<ListBox x:Name="MachineSelectList" HorizontalAlignment="Left" VerticalAlignment="Bottom"
Height="114" Width="231"
Foreground="White" Background="#FF7A7A7A" FontSize="16" BorderBrush="#FFC13131"
ItemsSource="{Binding}" IsSynchronizedWithCurrentItem="True">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="200">
<TextBlock Text="{Binding SerialNumber}" TextAlignment="Left" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<Button Name="DeleteMachine" Tag="{Binding SerialNumber}" HorizontalAlignment="Right" VerticalAlignment="Center" Height="20"
Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" Focusable="False" Click="Btn_Click" >
<Image Source="..\Resources\Images\delete.png" Stretch="Uniform"/>
</Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox Name="PartSelectList" HorizontalAlignment="Left" VerticalAlignment="Bottom"
Height="164" Width="231"
Background="#FF7A7A7A" Foreground="White" FontSize="16" BorderBrush="#FFC13131"
ItemsSource="{Binding Path=Parts}" IsSynchronizedWithCurrentItem="True">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="200">
<TextBlock Text="{Binding PartNumber}" TextAlignment="Left" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<Button Name="DeletePart" Tag="{Binding PartNumber}" HorizontalAlignment="Right" VerticalAlignment="Center" Height="20"
Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" Focusable="False" Click="Btn_Click" >
<Image Source="..\Resources\Images\delete.png" Stretch="Uniform"/>
</Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Page>
One way to solve this is using ObservableCollection, which is made for situations like this.
public ObservableCollection<Part> Parts
{
get { return parts; }
set { parts = value; NotifyPropertyChanged("Parts");
}
Or you could implement the interface INotifyCollectionChanged manually
The problem is, basically, that the binding system does not know when you call Add. If you were reassigning the Parts property each time, then the system would just redraw everything, so it would reflect the changes too, but if ObservableCollection is not a problem, that's the prefered way

Categories