Binding only works using ElementName, why? - wpf

Here is some code snippets of my scenario. On the .xaml side I have an ItemsControl:
<ItemsControl ItemsSource="{Binding StatList}" ItemTemplate="{StaticResource statBox}"></ItemsControl>
The StatList is simply a List of objects.
The DataTemplate contains this TextBlock
<TextBlock x:Name="DataTextBlock" Background="Transparent" DockPanel.Dock="Top" HorizontalAlignment="Center"
Foreground="White" FontSize="11">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Loaded">
<iBehaviors:InvokeMethodTrigger Method="UpdateBinding"
Target="{Binding DataContext, RelativeSource={RelativeSource TemplatedParent}}"
Parameter="{Binding ., RelativeSource={RelativeSource AncestorType=TextBlock}}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBlock>
This works the first time I set my StatList on my ViewModel, the TextBlock itself is passed as the Parameter to the InvokeMethodTrigger. However, if I change the StatList on my viewmodel, the next time the Loaded event occurs, the Parameter is null when the InvokeMethodTrigger is triggered.
Oddly enough, when I change the Parameter binding to:
Parameter="{Binding ElementName=DataTextBlock}"
it works the second time when I change my StatList, with the TextBlock being passed as the parameter. I for my life can't figure out why! Any explanations?

You can do it like this in code behind:
SlatList slat = new SlatList();
ItemControl.ItemSource = slat;
ItemControl.DataContext = slat;
make sure to specify a name for the itemcontrol and replace "ItemControl" with the name.
In XAML:
<ItemsControl ItemsSource="{Binding StatList}" DataContext="{Binding SlatList} ItemTemplate="{StaticResource statBox}"> </ItemsControl>

Related

Event trigger is not working inside ItemControl

I have a Item control which fills by a list, and list is collection of two parameters 'Time' and 'Description'. For it, i am using a HyperLinkButton for time and a Label for description.
What i want is that, i want to create click event using EventTrigger of hyperLink button in Main viewModel. My code is:
<ItemsControl
x:Name="transcriptionTextControl"
ItemsSource="{Binding MyCollectionOfTranscription, Mode=TwoWay}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<HyperlinkButton Content="{Binding Time}">
<ToolTipService.ToolTip>
<ToolTip Content="Time"/>
</ToolTipService.ToolTip>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<i:InvokeCommandAction
Command="{Binding HyperLinkButtonCommand}"
CommandParameter="{Binding
ElementName=transcriptionTextControl }" />
</i:EventTrigger>
</i:Interaction.Triggers>
</HyperlinkButton>
<sdk:Label Content="{Binding Description}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
When i build project, it doesn't give error but ICommand for hyperLink, shows warning as 'Cannot resolve symbol HyperLinkButtonCommand', while this event trigger is working fine outside this .
Not getting, what is actual problem behind it, plz give your valuable suggestion...
First off,
<i:InvokeCommandAction
Command="{Binding HyperLinkButtonCommand}"
CommandParameter="{Binding
ElementName=transcriptionTextControl }" />
The Binding is trying to locate a property called HyperLinkButtonCommand on the instance of the type that is contained within MyCollectionOfTranscription (you don't need to bind to this two-way).
(Side note, sending an ItemsControl into your Command is not MVVM.)
The ItemsControl iterates through each element in this collection, creates a copy of the template defined in ItemsControl.ItemTemplate, and sets the BindingContext equal to this element (I assume its a Transcript). You can tell this from the warnings you get from the binding failing to find your HyperLinkButtonCommand if you crank up databinding debug settings.
Assuming
HyperLinkButtonCommand is a command defined in your ViewModel, and
The root of this xaml is a Window (could be a UserControl, but am assuming here)
Your ViewModel is the DataContext of the Window
you can change the binding to the following and it should work (or you should get a clue from it)
<i:InvokeCommandAction
Command="{Binding HyperLinkButtonCommand,
RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}"
CommandParameter="{Binding
ElementName=transcriptionTextControl }" />
I prefer just to give my root an x:Name of "root" and use "ElementName=root" in cases like this.

Binding in listbox with textblocks not working

I have the following xaml code:
<ListBox Foreground="{Binding MyColor, Converter={local:ColorConverter}}" ItemsSource="{Binding LogCollection, Mode=TwoWay}" Grid.Row="1">
</ListBox>
This changes the foreground color for the entire listbox, so I modified the code in this way:
<ListBox ItemsSource="{Binding LogCollection, Mode=TwoWay}" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Foreground="{Binding MyColor, Converter={local:ColorConverter}}" Text="{Binding}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In this way I wanted to set the foreground for an item instead for the entire listbox, but it is not working. How do I find the right datacontext ? MyColor is a property on my MainViewModel.
LATER EDIT WITH THE SOLUTION
Jens's answer was the one that showed me where I was wrong. Instead of storing simple message log strings in the ObservableCollection, I created a new class (LogItems) which contains a Message and a Color members. Now the LogCollection is typeof LogItems instead of strings.
I populate the listbox with the following code in my viewmodel:
LogItems logitem = new LogItems(myMessage, myColor);
LogCollection.Insert(0, logitem);
And the view has the following form. Also it doesn't require anymore to use RelativeSource, because the datacontext is the same.
<ListBox ItemsSource="{Binding LogCollection, Mode=TwoWay}" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Foreground="{Binding Path=Color, Converter={local:ColorConverter}}" Text="{Binding Path=Message}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Thank you all for your answers which lead me to this solution.
The DataContext of generated container in a listbox is automatically set to the corresponding item, therefore your Binding does not find the Property MyColor. You need to use a RelativeSource binding to bind to the DataContext of the containing list:
<TextBlock Foreground="{Binding DataContext.MyColor,
RelativeSource={RelativeSource
Mode=FindAncestor,
AncestorType={x:Type ListBox}},
Converter={local:ColorConverter}}"
Text="{Binding}"/>

Deleting row in listview using Command + CommandParameter in WPF + MVVM

I want to delete a row in ListView Control using Command and CommandParameter like below.
<GridViewColumn Header="X">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding CriteriaId}"/>
<Button Name="btnDeleteCriterion" Tag="{Binding CriteriaId}" Content="{Binding CriteriaId}" Foreground="Red" FontWeight="Bold"
Command="{Binding DeleteCriterionCommand}"
DataContext="{Binding DataContext, RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}}"
CommandParameter="{Binding RelativeSource={RelativeSource self}, Path=Tag}"
/>
<StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
I am trying to grab the Tag property of the Button and pass it to Command like above and than remove it from list like so.
Edited, above XAML and added a TextBlock which uses the same binding as the Button's Tag and Content, but somehow Button doesn't get the value but TextBlock does!?
public void DeleteCriterion(object criterionId)
{
int crtId = (int)criterionId;
Criterion crt = _criteria.FirstOrDefault((c) => c.CriterionId == crtId);
if (crt != null)
_criteria.Remove(crt);
}
but I always get criterionId parameter as null.
What am I doing wrong?
Since you're explicitly setting the DataContext within the button, when you're doing a binding like {Binding SomeProperty} it will assume that SomeProperty is in the DataContext that you just set. Try using a more explicit binding like:
"{Binding RelativeSource={RelativeSource AncestorType=StackPanel}, Path=DataContext.CriteriaId}"
which will give you the correct DataContext's CriteriaID like it is for the TextBlock.
As long as your button's Tag isn't null (if it is null, you have a different problem), I don't see a reason that you can't bind directly to CriterionId like you do with Tag.

WPF + Binding Command and Header of a Context Menu Item using MVVM

I created a WPF application and am following MVVM Pattern. I have a context menu in my xaml and I need to bind the command and Header text. Using the following code I can bind the Header of the context menu with the "MenuItemName" which is a property in BOList which is an observable collection. My issue is that command is not getting fired? I changes the Item source of the Context Menu to datacontext
(DataContext="{Binding Path=PlacementTarget.Tag, RelativeSource={RelativeSource Self}}")
Command is working fine but my header is getting blank. Is there a way to bind my header and command of a menu item? Here the command MenuClick is a Icommand property in the VM and MenuItemName is a property inside BOList which is an observable collection binded to my ListBox.
<Grid>
<StackPanel Orientation="Vertical">
<Button x:Name="btnClickMe" Command="{Binding ButtonCommand}" Content="Click Me" />
<ListBox ItemsSource="{Binding BOList}" x:Name="lstDemo" SelectedItem="{Binding BussinessObj,Mode=OneWayToSource}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="stkStyleRender" Orientation="Horizontal" Background="Cyan" Width="525" Tag="{Binding DataContext, RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}" >
<TextBlock x:Name="txtId" Text="{Binding FirstName}"></TextBlock>
<TextBlock x:Name="txtName" Text="{Binding LastName}"></TextBlock>
<StackPanel.ContextMenu>
<ContextMenu x:Name="cntMnuTest" ItemsSource ="{Binding Path=PlacementTarget.Tag, RelativeSource={RelativeSource Self}}" >
<MenuItem Header="{Binding MenuItemName}" Command="{Binding MenuClick}" CommandParameter="Icon"></MenuItem>
</ContextMenu>
</StackPanel.ContextMenu>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
Hi Identified the issue.
If we set Item Source of the context menu to BOList (observable collection ) command wont get fired because the ICommand definition is in Window data context (vm).
We need to handle the code like wise.
Since debugging is not possible for binding , I was beating around the bush :-)
This link helped me a lot WPF Tutorial - Debug Databinding Issues in WPF
In context menu use DataContext instead of using Items source
then bind your menu item
try this:
<MenuItem Header="{Binding Path=PlacementTarget.MenuItemName, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContextMenu}}" Command="{Binding Path=PlacementTarget.MenuClick, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContextMenu}}" />

Get UserControl DataContext properties to bind to from within the control

Here is the code for me UserControl:
<UserControl x:Class="UZ.ActivitySink.GUI.Views.POSsView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Views="clr-namespace:UZ.ActivitySink.GUI.Views">
<DockPanel>
<TreeView ItemsSource="{Binding Types}" x:Name="POSTree" Background="{x:Null}" HorizontalAlignment="Left" FontSize="14"
Visibility="{Binding DataContext.TreeVisibility, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Views:POSsView}}, Mode=TwoWay}">
</TreeView>
<StackPanel x:Name="ErrorPanel"
Visibility="{Binding DataContext.ErrorMessageVisibility, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Views:POSsView}}, Mode=TwoWay}" Margin="20">
</StackPanel>
</DockPanel>
</UserControl>
I am assigning a datacontext object to the control in it's constructor
DataContext = _viewModel;
_viewModel has the properties named TreeVisibility and ErrorMessageVisibility of type Visibility, but still the Visual elements on the screen don't bind their visibility values to these properties.
What is the correct way to reference the controls' viewmodel properties from xaml declaration in my case?
Thank you.
Your bindings are more complicated than necessary.
This one:
Visibility="{Binding DataContext.TreeVisibility,
RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type Views:POSsView}}, Mode=TwoWay}"
in this case should be equivalent to the much simpler
Visibility="{Binding TreeVisibility}"
That said, even though the current bindings are complicated they should still have worked (at least given the information you already provide).
If you still can't get them to work, run your app in the debugger and look at the Output window -- binding errors are reported there by default, and they contain information that will help you get to the root of the problem.

Resources