I need to bind a button's command inside a datatemplate like below:
<GridViewColumn.CellTemplate>
<DataTemplate>
<Button Content="-" Cursor="Hand" Width="50"
Background="Red" x:Name="removeButton"
Command="{Binding Remove}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
Unfortunately it does not work. How can I bind a command in a button insade a datatemplate?
I found that thread in the forum:
Bindings in nested WPF DataTemplates
but the method given by person, who answered this question, does not work as well. I think, that something has changed in WPF since this time, I would you grateful for your help.
If Remove is defined in the view model of the parent ListView, you could bind to it using a RelativeSource:
Command="{Binding DataContext.Remove,
RelativeSource={RelativeSource AncestorType=ListView}}"
You could also set the AncestorType to Window or UserControl depending on where the command property is defined and where the DataTemplate is applied.
Related
I have a custom button set up inside a ListView ItemTemplate. The Listview's ItemSource is bound to a collection of items, pretty standard. I have a few labels in the listview as well, and everything works fine except the button.
Binding the button to one of the properties won't work at all using {Binding buttonName} but it will sort of work if I use {Binding Items/buttonName, ElementName=listView} - the only problem is, when I do it this way, every single button in that listView will have the exact same buttonName.
Now the issue stems from my custom button's DataContext being set to Self; unfortunately, it has to be set to Self because the custom style I'm using needs this. If I try to change the button to a UserControl instead (with the button as a child, and the DataContext set on that), then I can't use the Command property of the button for some reason.
Here's a simplified version of my ListView making use of the custom button:
<ListView x:Name="listView" ItemsSource="{Binding MyPeopleData}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Label Content="{Binding PersonName}"/>
<ct:RevealButton Content="{Binding Items/recommendation, ElementName=listView}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
As I said above, this will make every item in the listview use the same recommendation property rather than using it's own one.
If I try to use
<ct:RevealButton Content="{Binding recommendation}"/>
It just won't work, which makes sense given the DataContext of the custom button, which is below:
<Button x:Class="RevealButton" Width="{Binding Width}" Height="{Binding Height}" Background="{Binding ButtonBackground}" DataContext="{Binding RelativeSource={RelativeSource Self}}" Style="{DynamicResource ButtonRevealStyleC}" mc:Ignorable="d">
<Button.ContentTemplate>
<DataTemplate>
<ContentPresenter Content="{TemplateBinding Content}" />
</DataTemplate>
</Button.ContentTemplate>
</Button>
So this ended up being an XY Problem. Because the modified style I was using had a poorly bound property, it was failing when the parent control didn't have a DataContext set to self.
This is what it was:
<SolidColorBrush Opacity="0.8" Color="{Binding ButtonBackground.Color}" />
And ButtonBackground was a dependency property exposed by my custom Button, so binding the style in this way meant it only worked if the Button's context was itself. Changing it to this:
<SolidColorBrush Opacity="0.8" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ButtonBackground.Color}" />
Fixed the DataContext dependency, which in turn fixes the heirarchy of problems above.
Okay I have a mildly complex piece of functionality here. I'd like to know A) If I am doing it properly. If not, what should I change? 2) If it is proper, what is the best solution to my problem?
I have a main window with a ListView of items. If I click one of these, the right hand Grid Column in this window should populate with a DataGrid with information on the item selected. If I click another item in the ListView, it should change to another DataGrid.
I have seen some ContentPresenter examples but I cannot get this to work, so I stripped it out and will show you the code I have so far. Right now, I only have one item setup, so I will stick with this Driver example.
DriverGrid.xaml
<UserControl DataContext="{Binding AdminDriver, Source={StaticResource Locator}}">
<Grid>
<DataGrid>
//stuff here for datagrid
</DataGrid>
<Button Content="Edit" Command="{Binding ShowEditWindow}" />
<Button Content="Add" Command="{Binding ShowAddWindow}"/>
</Grid>
</UserControl>
AdminDriver.cs (VM)
//Contains variables, and is the datacontext for the above usercontrol
AdminMain.xaml (view for all admin stuff)
//Contains a bunch of junk for the min admin screen which has the listview with the options in it. If you require this piece of code, I can trim it down but I don't se currently see it's relevance. The DataGrid belongs in this window, I'm assuming in a Content Presenter. Here is the ListView that is in column 1 of 2.
<ListView ItemsSource="{Binding AdminMenu}"
Name="AdminFields"
SelectionMode="Single">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<cmd:EventToCommand CommandParameter="{Binding SelectedItem, ElementName=AdminFields}" Command="{Binding registerSelected}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<ListView.ItemTemplate>
<ItemContainerTemplate>
<TextBlock Text="{Binding FieldName}"/>
</ItemContainerTemplate>
</ListView.ItemTemplate>
</ListView>
I would take the binding of the DataContext out of the UserControl. This will allow you to use it in other spots if you ever find the need. Instead, just bind the DataContext where you are using it.
<view:YourUserControl DataContext="{Binding AdminDriver}" />
If you are looking to present different UserControls based upon which item is selected in the ListView, then you'll use a ContentPresenter. All the items in your ItemsSource will have the same base class or implement the same interface so that you can put them in the same ObservableCollection. I'll assume AdminDriver would be of that type/interface as well then.
You would set up some DataTemplates at the top of the Window that map the possible real types of the objects in your ItemsSource (AdminMenu) to the UserControl that would represent them.
<Window.Resource>
<DataTemplate DataType="{x:Type model:TypeA}">
<view:UserControlA />
</DataTemplate>
<DataTemplate DataType="{x:Type model:TypeB}">
<view:UserControlB />
</DataTemplate>
//rinse and repeat
</Window.Resource>
Then you'll add a ContentPresenter to the Grid and bind it's DataContext to the AdminDriver property. The UserControl matching the actual type of the selected item as mapped in your DataTemplates will appear.
<ContentPresenter Content="{Binding AdminDriver}" />
I have User control which contains TextBox with WaterMark inside
<AdornerDecorator>
<TextBox
Height="20"
Margin="10,0"
Grid.Column="0"
Text="{Binding MainCategoryTextBoxValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Name="MainCatTextBox">
<controls:WatermarkService.Watermark>
<TextBlock VerticalAlignment="Center" x:Name="MainCategoryTextBlock"> </TextBlock>
</controls:WatermarkService.Watermark>
</TextBox>
</AdornerDecorator>
You can see here WatermarkService implementation
https://stackoverflow.com/a/836463/1548347
I want take "MainCategoryTextBlock" textblock inside <controls:WatermarkService.Watermark> and set it DataContext to be same like my UserControl DataContext in order to change Watermark text in RunTime from my ViewModel.
I tried to bind "MainCategoryTextBlock" DataContext with RelativeSource to my UserControl DataContext but I didn`t succeed (maybe syntax error - Im not sure).
DataContext="{Binding DataContext, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"
Do you have any clue how can I solve it?
Thanks
If your UserControl has a name then you can do it like this:
DataContext={Binding ElementName="YourUserControlName", Path=DataContext}
But i can see that you are using your textbox inside an adorner decorator so you can't use FindAncestor in this case because your textbox and your UserControl won't belong to the same visual tree.
You should be setting the data context property of your window to your view model, and bind the text property of your textblock to your view model property.
<TextBlock Text={Binding Path=PropertyOnViewModel} />
XAML:
<HeaderedItemsControl ItemsSource="{Binding FooCollection}">
<HeaderedItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text={Binding foo}/>
<Button Command="{Binding DeleteFoo}">Delete</Button>
</StackPanel>
</DataTemplate>
</HeaderedItemsControl.ItemTemplate>
Given this XAML, how can I get a reference to the item clicked in FooCollection, in the DeleteFoo command & method, in the ViewModel? Normally in a DataGrid etc, it would just be the SelectedItem bound in your ViewModel, but annoyingly the HeaderedItemsControl doesn't have this option.
Is there another way to pass a reference to the item, or its index position in FooCollection via CommandArguments for example?
I realise that the ListView is a similar control, that has a selectedItem equivalent, however I've got a nicely formatted HeaderedItemsControl set up (with a title header) so I'd prefer to not have to ditch that if possible.
Thanks very much in advance for any help.
I'll put it as an answer anyway.. ItemsControls set the DataContext of the ListItem to the object that they represent so you can probably get the reference to the clicked item using
<HeaderedItemsControl ItemsSource="{Binding FooCollection}">
<HeaderedItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text={Binding foo}/>
<Button Command="{Binding DeleteFoo}" CommandParameter={Binding}>Delete</Button>
</StackPanel>
</DataTemplate>
</HeaderedItemsControl.ItemTemplate>
You can send the DataContext of each item to the command via CommandParameter
<Button Command="{Binding DeleteFoo}" CommandParameter={Binding}>Delete</Button>
Well i have a control thats placed in a usercontrol and it exposes a ICommand with a DepenceyPropety(ShowCommand),
and then i have a datagrid (wpf toolkit) with a few columns and one of them has a delete button
<Custom:DataGrid Margin="0" ItemsSource="{Binding Todos}" AutoGenerateColumns="False">
<Custom:DataGrid.Columns>
<Custom:DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
<Custom:DataGridTemplateColumn>
<Custom:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button CommandParameter="{Binding}"
Command="{Binding ElementName=ConfirmDeleteDialog, Path=ShowCommand}"
Content="Delete" />
</DataTemplate>
</Custom:DataGridTemplateColumn.CellTemplate>
</Custom:DataGridTemplateColumn>
</Custom:DataGrid.Columns>
</Custom:DataGrid>
<local:ConfirmationDialog x:Name="ConfirmDeleteDialog"
Title="Confirm delete!"
d:LayoutOverrides="Width"
Message="Are you sure that you want to delete the selected todo?"
YesCommand="{Binding DeleteCommand}" />
and as im in a DataTemplate it does not find the element, and i can't combine ElementName and Relative source so how would i define a binding that can access an element declared outside the datatemplate?
The command im trying to bind to is located on ConfirmationDialog.YesCommand..
Well i solved it this way i changed my dialog to a to inherit from ContentControl instead of Control and added a content holder in it..
after that i moved the dialog so it wrapped the whole control, after that i added a routed event that i can listen to and that worked like a charm.