After extensive researching I have not found an answer to this problem. I have a list box whose ItemsSource is a collection of Button objects. When I add a button to the collection it appears properly but when clicked the command is not executed. I have already implemented RelayCommand and it is used throughout my code.
C# MVVM WPF
The View
<ListBox ItemsSource="{Binding Buttons}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Button Margin="5,5,5,5"
Content="{Binding Content}"
Command="{Binding ExecuteButtonCommand}"
CommandParameter="{Binding CommandParameter}"
/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The ViewModel
public RelayCommand _executeButtonCommand;
public ICommand ExecuteButtonCommand
{
get
{
if (_executeButtonCommand == null)
_executeButtonCommand = new RelayCommand(exec => this.ButtonCommands(param));
return _executeButtonCommand;
}
}
For Testing I have this code.
public void AddButtons()
{
Buttons= new ObservableCollection<Button>();
Button btn = new Button();
btn.Content = "Generate Files";
btn.Command = "{Binding ExecuteButtonCommand}";
btn.CommandParameter = "Files";
Buttons.Add(btn);
}
But I cannot assign the Command that way. The rest of the button works correctly. So I put the Command= in the view as you see above.
If this has been answered, then I can't find it. The nearest answer is nine years old and does not work.
Thanks for looking.
What is happening is that the ListBox's DataTemplate is trying to bind to a property called ExecuteButtonCommand which doesn't exist in Button object. And then, to bind the parameter, you need to point to your view's DataContext.
Change it to:
<ListBox.ItemTemplate>
<DataTemplate>
<Button Margin="5,5,5,5"
Content="{Binding Content}"
Command="{Binding Command}"
CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=Window},Path=DataContext.MyParameter}"
/>
</DataTemplate>
</ListBox.ItemTemplate>
For clarification, I created a property called "MyParameter" in my ViewModel. Also, in your codebehind, change your button creation code to:
Buttons = new ObservableCollection<Button>();
Button btn = new Button();
btn.Content = "Generate Files";
btn.Command = ExecuteButtonCommand;
Buttons.Add(btn);
And your ExecuteButtonCommand to simply:
public ICommand ExecuteButtonCommand
{
get
{
if (_executeButtonCommand == null)
_executeButtonCommand = new RelayCommand(ButtonCommands);
return _executeButtonCommand;
}
}
I wanted to close this out with the final result in case someone else is searching for the same answer.
Mari set me straight which led to this example below as the final result. There is no "Code Behind." Generation of the buttons is done in the view model. After a button is created it is added to the button collection which is the source for the ListBox. I am only including the code specific to the question.
This is how it ended up.
The View
<ListBox ItemsSource="{Binding Buttons, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="AliceBlue"
BorderBrush="Transparent"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
SelectedItem="">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Button Margin="5,5,5,5"
Content="{Binding Content}"
Command="{Binding Command}"
CommandParameter="{Binding CommandParameter}"
/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The ViewModel - A switch statement is used to determine what button needs to be generated. I gave the button a name because I wanted to be able to find it in the collection and set the Enabled property. But that didn't work and I still haven't found an answer.
public void AddButton(string param)
{
Button btn = new Button();
switch (param)
{
case "Files":
btn.Content = "Do Files";
btn.CommandParameter = "Files";
btn.Name = "Files";
break;
//More items here
}
btn.Command = ExecuteButtonCommand; //The ICommand name. I made this harder than it needed to be!
Buttons.Add(btn);
}
public RelayCommand _executeButtonCommand;
public ICommand ExecuteButtonCommand
{
get
{
if (_executeButtonCommand == null)
_executeButtonCommand = new RelayCommand(param => this.ButtonCommands(param));
return _executeButtonCommand;
}
}
I hope that can help someone.
Related
I'm using Mahapps Metro and Mahapps IconPack.
xmlns:icons="http://metro.mahapps.com/winfx/xaml/iconpacks"
I have a Itemscontrols what works as expected, like this:
<ItemsControl ItemsSource="{Binding MyCollection}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button>
<icons:MaterialDesign Kind="Home"/>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Now I want to set the Icon from the collection for each item.
<ItemsControl ItemsSource="{Binding MyCollection}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button>
<icons:MaterialDesign Kind="{Binding icon}"/>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I have a property which will be added to the collection:
public MahApps.Metro.IconPacks.PackIconMaterialKind MyIcon = MahApps.Metro.IconPacks.PackIconMaterialKind.AbTesting;
If I do so I will get the following error:
Binding' can only be set on a DependencyProperty of a DependencyObject.
I tried to setup the DependencyObject like this:
public static readonly DependencyProperty MyIcon =
DependencyProperty.Register(nameof(MyIcon), typeof(MahApps.Metro.IconPacks.PackIconMaterialKind), typeof(MahApps.Metro.IconPacks.PackIconMaterialKind), new PropertyMetadata(null));
public MahApps.Metro.IconPacks.PackIconMaterialKind myIcon
{
get { return (MahApps.Metro.IconPacks.PackIconMaterialKind)GetValue(dependencyProperty); }
set { SetValue(dependencyProperty, value); }
}
But the GetValue and SetValue are not recognised.
I also tried to set this through a style, but then only the string to the icon will be set as content and not the icon itself.
Can anybody please explain me where I got lost, and how to do this.
Thank you very much.
Thanks for the comments. I was able to figure it out.
I added:
public PackIconMaterialDesign IconMaterialDesign => new PackIconMaterialDesign { Kind = PackIconMaterialDesignKind.AccessAlarm, Height = 30, Width = 30 };
And then I was able to bind it:
<Button Command="{Binding ViewModelRouter}"
CommandParameter="{Binding ViewModelName}"
Style="{StaticResource MenuButton}"
Content="{Binding IconMaterialDesign}" >
Thanks for the comments. I was able to figure it out.
I added:
public PackIconMaterialDesign IconMaterialDesign =>
new PackIconMaterialDesign { Kind =
PackIconMaterialDesignKind.AccessAlarm, Height = 30,
Width = 30 };
And then i was able to bind it:
<Button Command="{Binding ViewModelRouter}"
CommandParameter="{Binding ViewModelName}"
Style="{StaticResource MenuButton}"
Content="{Binding IconMaterialDesign}" >
I have the following view.xaml and I bind a collection(SavedTracksCollection from viewmodel) to this list box and it displays the items in UI.
<phone:PanoramaItem Name="MusicTracks" Header="Saved Tracks" >
<Grid>
<ListBox x:Name="list" ItemsSource="{Binding SavedTracksCollection}" SelectedItem="{Binding SelectedItemTrack,Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<Button Background="Red" >
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding TrackTitle}"/>
<TextBlock Text="{Binding TrackUri}"/>
</StackPanel>
</Button>
<DataTemplate>
</ListBox.ItemTemplate>
</Grid>
</phone:PanoramaItem>
And the i have the following property defined in my viewmodel(this viewmodel is set as data context for my view) for the selecteditem binding "SelectedItemTrack".And i am binding SavedTracksCollection to the itemsource of the list.
private SavedTracksModel _SelectedItemTrack;
public SavedTracksModel SelectedItemTrack
{
get {
return _SelectedItemTrack;
}
set
{
if (value!=null)
_SelectedItemTrack = value;
//RaisePropertyChanged("SelectedItemTrack"); I dont think we need this.Let me know otherwise.
}
}
private List<SavedTracksModel> _SavedTracksCollection = new List<SavedTracksModel>();
public List<SavedTracksModel> SavedTracksCollection
{
get
{
return GetSavedTracks();
}
set
{
this._SavedTracksCollection = value;
RaisePropertyChanged("SavedTracksCollection");
}
}
But i am not able to determine how do i capture the SelectedITem event when user selectes an item from the Listbox .Currently it doesn't trigger the set method of the SelectedITemTrack .Once i capture the event with the details of selected item binding "TrackUri" i want to go to a new page where i can play the track.
any idea how to fix the issue ?
The first solution I can think of, why not just use the SelectionChanged event on ListBox?
<ListBox x:Name="list" ItemsSource="{Binding SavedTracksCollection}"
SelectedItem="{Binding SelectedItemTrack,Mode=TwoWay}"
SelectionChanged="List_OnSelectionChanged"/>
// in code behind
private void List_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
// navigate here after validating the selected item
// or raise Command in your ViewModel programatically
}
I cannot find any examples to make me understand how and if I can change the databind in c# at the click of a button on, in my case a toggleswitch, Basically I have 32 buttons in my app and those 32 buttons act the same but need different text with-in them depending on some toggle switches they are currently databinded so the text can be saved and retrieved from local storage but what values it gets depends on the state of these toggle switches.
So I currently have :
<Button x:Name="_ovButton1" Content="{Binding Source={StaticResource AppSettings}, Path=ovName1_1Value, Mode=TwoWay}" Margin="2,0,250,0" VerticalAlignment="Top" FontSize="14" Height="72" FontWeight="Bold" MouseLeftButtonUp="_ovButton1_MouseLeftButtonUp" MouseLeftButtonDown="_ovButton1_MouseLeftButtonDown" ClickMode="Hover" Hold="_ovButton1_Hold"/>
and I want when a user changes the state of a toggleswitch to change the
{StaticResource AppSettings}, Path=ovName1_1Value, Mode=TwoWay}
to for example:
{StaticResource AppSettings}, Path=ovName1_2Value, Mode=TwoWay}
but I cannot find any example that shows how to do that in c#
what code do I need to do that?
You can specify the target of databinding in code like this:
MyData myDataObject = new MyData(DateTime.Now);
Binding myBinding = new Binding("MyDataProperty");
myBinding.Source = myDataObject;
myText.SetBinding(TextBlock.TextProperty, myBinding);
See more at http://msdn.microsoft.com/en-us/library/ms742863.aspx
-- Edit Note I don't have access to a WP8 Emulator to test this ---
In the view model it looks like this:
public List<string> Members
{
get { return _Members; }
set { _Members = value; OnPropertyChanged(); }
}
public MainVM()
{
// Simulate Asychronous access, such as to a db.
Task.Run(() =>
{
Thread.Sleep(2000);
Members = new List<string>() {"Alpha", "Beta", "Gamma", "Omega"};
});
}
The code behind on the main page sets the datacontext (shared with all the child controls) as such:
public MainWindow()
{
InitializeComponent();
// Set the windows data context so all controls can have it.
DataContext = new MainVM();
}
The Mainpage Xaml to bind to members is like this
<Button Height="30"
Width="80"
Margin="10"
DataContext="{Binding Members}"
Content="{Binding Path=[0] }" />
<Button Height="30"
Width="80"
Margin="10"
DataContext="{Binding Members}"
Content="{Binding Path=[1] }" />
<Button Height="30"
Width="80"
Margin="10"
DataContext="{Binding Members}"
Content="{Binding Path=[2] }" />
<Button Height="30"
Width="80"
Margin="10"
DataContext="{Binding Members}"
Content="{Binding Path=[3] }" />
The result is this visually:
I based this on my blog article Xaml: ViewModel Main Page Instantiation and Loading Strategy for Easier Binding for more info and a fuller example.
I think your best bet is going to be to use a collection of strings and bind to that collection. You can either change the collection when a toggle is switched, or keep 6 collections and bind to the collection that is for the toggle.
Xaml:
<ItemsControl x:Name="Buttons" ItemsSource="{Binding ButtonTextCollection}">
<ItemsControl.ItemsPanel>
<toolkit:WrapPanel/>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Width="100" Height="70" Content="{Binding}" Click="OnButtonClick"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Your code-behind would have the event handler for your button click
private void OnButtonClick(object sender, RoutedEventArgs e)
{
var text = ((Button) sender).Content.ToString();
// Send the text
}
Your ViewModel would hold the ButtonTextCollection property and would change based on the toggle.
public ICollection<string> ButtonTextCollection
{
get { return _buttonTextCollection; }
set
{
_buttonTextCollection = value;
OnPropertyChanged("ButtonTextCollection");
}
}
When you want to change the text, you would change the ButtonTextCollection
public void ChangeButtonText()
{
ButtonTextCollection = new Collection<string> {"A", "B",...};
}
Here is my code. What it doing. I have one textbox(button) with text Book name, when I click on it I can change text in textbox using binding. But now I add another textbox for author name and I dont know how bind it. If I use same method like for Book name its not works or text from book name is too in book author. All text are changed via popup setting page.
My source here: https://dl.dropbox.com/u/40039421/App1.rar.
Image here: https://dl.dropbox.com/u/40039421/helpp.png
public partial class MainPage : INotifyPropertyChanged
{
private ObservableCollection<Book> _books = new ObservableCollection<Book>();
public ObservableCollection<Book> AllBooks
{
get { return _books; }
set { _books = value; }
}
...
private void InitializeData()
{
var bookName1 = new Book { Id = 1, BookName = "Small red apple",AuthorName = "Daniel"};
...
AllBooks.Add(bookName1);
...
OnPropertyChanged("AllBooks");
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(null, new PropertyChangedEventArgs(propertyName));
}
}
private void btnGreenBook_Click(object sender, RoutedEventArgs e)
{
var button = sender as Button;
if (button != null)
{
Popup popup = new Popup();
popup.VerticalOffset = 30;
PopupSettingPage control = new PopupSettingPage();
popup.Child = control;
popup.IsOpen = true;
control.btnSave.Click += (s, args) =>
{
var id = Convert.ToInt32(button.Tag);
var book = AllBooks.FirstOrDefault(sub => sub.Id == id);
if (book != null)
{
book.BookName = control.BookName;
book.OnPropertyChanged("BookName");
}
popup.IsOpen = false;
};
...
Ohh dear, it was a simple mistake :)
You forgot to add the AuthorName in the Xaml of your PopupSettingsPage.xaml
<TextBox x:Name="tbInputAuthorName" Text="{Binding AuthorName, Mode=TwoWay}" VerticalAlignment="Center"/>
And then in MainPage do this
book.BookName = control.BookName;
book.OnPropertyChanged("BookName");
book.AuthorName = control.AuthorName;
book.OnPropertyChanged("AuthorName");
Additional answer based on your comments:
In order to achieve that, You have to remove the second stackpanel in the listbox. Instead, use the WrapPanel control. Search for how to use WrapPanel for WindowsPhone.
And then you have to find some way to set the backgrounds as red or green. Good luck
OK I use wrap panel but problem is still here. I have two panorama items (I post code from item 1 and item 2 have same code only is showing on second panorama page) and problem is still if I save some value to one of item in panorama item 1 this value is too in panorama item 2 and I dont know how make it. Logic is click on panorama 1 item change values in panoam 1 items, click on panorama 2 items change panorama 2 items values. Its look like panoram item 1 have same ID like panoram item 2. Here is full source : https://dl.dropbox.com/u/40039421/App1SecondEdit.rar
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Panorama control-->
<phone:Panorama>
<!--Panorama item 1-->
<phone:PanoramaItem Header="Test">
<Grid x:Name="PanelPanoramaItem1"
Grid.Row="1"
Margin="25,0,12,0">
<ListBox ItemsSource="{Binding AllBooks}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Button Width="140"
Height="140"
toolkit:TiltEffect.IsTiltEnabled="True" Margin="0,0,0,5" Click="Button_Click_1" Tag="{Binding Id}" >
<Button.Template>
<ControlTemplate>
<Grid Background="Chartreuse">
<TextBlock Foreground="Black" Text="{Binding BookName}" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</phone:PanoramaItem>
<!-- END Panorama item 1 -->
I have a User Control,called dCB_Props that contains several objects, most importantly a ComboBox that's bound to an Observable Collection. Though the collection can take any object, it will normally take a UserControl called EditDeleteItem. I've set dCB_Props to use EditDeleteItem as an ItemsTemplate but the events aren't fired. If, on the other hand, I add an instance of EditDeleteItem then the events will get fired. I can't add items this way because the EditDeleteItem will host other controls and I'd need to use different DataTemplates.
EditDeleteItem has two Routed Events called EditClick and DeleteClick.
When the collection changes it fires an event that checks if the item added is of type EditDeleteItem. If so, then it adds handlers to the two aforementioned events.
Part of the xaml for EditDeleteClick:
<WrapPanel x:Name="wp" HorizontalAlignment="Right" Visibility="Hidden" VerticalAlignment="Center" Margin="0,0,5,0">
<Button x:Name="PART_Edit" Width="20" Height="20" Content="{DynamicResource dPen}" Style="{DynamicResource dTranspButton}" Click="btnEdit_Click"/>
<Button x:Name="PART_Delete" Width="20" Height="20" Content="{DynamicResource dCross}" Style="{DynamicResource dTranspButton}" Click="btnDelete_Click"/>
</WrapPanel>
<Label Content="{TemplateBinding Content}" Margin="2,0,45,0" Padding="0,0,0,0" HorizontalAlignment="Left" VerticalContentAlignment="Center"/>
Part of the xaml for dCB_Props:
<ComboBox HorizontalContentAlignment="Stretch" x:Name="PART_cb" Background="Transparent" Margin="0,0,0.367,0" d:LayoutOverrides="HorizontalAlignment" ItemsSource="{Binding Items, ElementName=dcb}" IsDropDownOpen="{Binding IsDropDownOpen,ElementName=dcb, Mode=TwoWay}" Grid.ColumnSpan="3" Style="{DynamicResource DaisyComboBox}" />
<Button x:Name="PART_Edit" Width="20" Height="20" Content="{DynamicResource dPen}" Visibility="Hidden" Style="{DynamicResource dTranspButton}" Margin="2.581,1.48,17.778,-1.48" Grid.Column="1" Click="btnEdit_Click"/>
<Button x:Name="PART_Delete" Width="20" Height="20" Content="{DynamicResource dCross}" Visibility="Hidden" Margin="22.602,1.48,-2.243,-1.48" Style="{DynamicResource dTranspButton}" Grid.Column="1" Click="btnDelete_Click"/>
<Button x:Name="PART_Add" Content="+" Grid.Column="3" Margin="0,0,0,0" Style="{DynamicResource dTranspButton}" Click="btnAdd_Click"/>
Note the above two are codes just for objects, I've left out Column Definitions, Event Triggers, etc.
Part of dCB_Props.xaml.cs code is:
public partial class dCB_Props : UserControl
{
public dCB_Props()
{
this.InitializeComponent();
Items= new ObservableCollection<object>();
Items.CollectionChanged += new System.Collections.Specialized.NotifyCollectionChangedEventHandler(Items_CollectionChanged);
}
void Items_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
if (e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Add)
{
foreach (var o in e.NewItems)
{
if (o.GetType() == typeof(EditDeleteItem))
{
EditDeleteItem itm = (EditDeleteItem)o;
itm.EditClick += new RoutedEventHandler(ItemEdit_Click);
itm.DeleteClick += new RoutedEventHandler(ItemDelete_Click);
}
}
}
}
...//I've left some code here since I don't deem it's that important for the situation
private void ItemEdit_Click(object sender, RoutedEventArgs e)
{
DependencyObject d = GetTemplateChild("PART_cb");
if (d == null) return;
ComboBox cb = (ComboBox)d;
if (cb.SelectedItem != null) RaiseEvent(new RoutedEventArgs(EditClickEvent, e.OriginalSource));
}
}
The above works if I add an item of type EditDeleteItem and remove the ItemTemplate property for the Label that resides inside dCB_Props. It also works if I set the ItemTemplate, shown below, in EditDeleteItem's ContentTemplate. But, as mentioned, I need to use different Data Templates so I assume all Data Templates will have to reside in a Resource Dictionary and then I'd have to use a Template Selector.
Data Template:
<DataTemplate x:Shared="false" x:Key="TagTemplate">
<local:EditDeleteItem x:Name="edItem">
<local:EditDeleteItem.Content>
<StackPanel>
<TextBlock Text="{Binding Path=Content.Label}"/>
<CheckBox Content="Isolated" IsChecked="{Binding Content.IsIsolated}"/>
<CheckBox Content="Match Case" IsChecked="{Binding Content.MatchCase}"/>
<CheckBox Content="Include" IsChecked="{Binding Content.Include}"/>
</StackPanel>
</local:EditDeleteItem.Content>
</local:EditDeleteItem>
</DataTemplate>
I believe I need to use command bindings. But not really sure where to put the CommandBindings, and not so sure how to use them, though I've read a page or two.
Thanks,
Hassan
The events are fired, but you don't catch them, because subscription in Items_CollectionChanged never occurs if ItemTemplate is used.
You should understand how ItemsControl (and ComboBox) works with ItemsSource. ItemsControl use ItemContainerGenerator to populate its visual tree. Each item from ItemsSource wrap into container which derived from ContentControl. Then item is set as a Content, ItemTemplate is set as ContentTemplate and so on. When you put EditDeleteItem into ItemTemplate it becomes a part of visual tree but not an item. That's why there is no EditDeleteItem in e.NewItems and no subscription.
The right way is Commands, as you mentioned. You should declare two commands:
public class EditDeleteItem : UserControl
{
...
public static readonly RoutedUICommand EditCommand = new RoutedUICommand(...);
public static readonly RoutedUICommand DeleteCommand = new RoutedUICommand(...);
...
}
Now the part of template may look like:
<WrapPanel ...>
<Button ... Command="{x:Static EditDeleteItem.EditCommand}"/>
<Button ... Command="{x:Static EditDeleteItem.DeleteCommand}"/>
</WrapPanel>
Then you add command bindings to dCB_Props:
public partial class dCB_Props : UserControl
{
static dCB_Props()
{
...
CommandManager.RegisterClassCommandBinding(
typeof(dCB_Props),
new CommandBinding(EditDeleteItem.EditCommand, OnEditCommandExecuted));
CommandManager.RegisterClassCommandBinding(
typeof(dCB_Props),
new CommandBinding(EditDeleteItem.DeleteCommand, OnDeleteCommandExecuted));
...
}
...
}
You need to implement OnEditCommandExecuted and OnDeleteCommandExecuted in order to handle corresponding commands from EditDeleteItem.
I hope I understood your question correctly ;)