DataContext and Command in XAML when used together is not working - xaml

I have a button, when i use datacontext and command, the command not work:
<Button DataContext="{Binding horaires}" Style="{StaticResource RefreshAppBarButtonStyle}" AutomationProperties.Name="{Binding HomeAppBarTitle, Converter={StaticResource StringResourceConverter}}" Command="{Binding RefreshCommand}" ></Button>
when i delete the datacontext and set the name manually it's work:
<Button Style="{StaticResource RefreshAppBarButtonStyle}" AutomationProperties.Name="Actualiser" Command="{Binding RefreshCommand}" ></Button>
what's can be the problem??
Best regards

Does horaires have a property called RefreshCommand? I'm guessing not because you said it works without the DataContext being set.
You need to either remove the DataContext binding and change the AutomationProperties.Name property binding to use the horaires prefix like this:
<Button AutomationProperties.Name="{Binding horaires.HomeAppBarTitle, Converter={StaticResource StringResourceConverter}}"
Command="{Binding RefreshCommand}" />
Or use a RelativeSource or ElementName binding to find the UI element that has your RefreshCommand in its DataContext. For example,
<Button DataContext="{Binding horaires}"
AutomationProperties.Name="{Binding HomeAppBarTitle, Converter={StaticResource StringResourceConverter}}"
Command="{Binding DataContext.RefreshCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />
Personally, I would go with the first one because I like to avoid setting the DataContext explicitly if possible. The UI is supposed to reflect the data behind it, and setting the DataContext manually changes this hierarchy.

Related

Binding with Prism Navigation

I'm trying to bind string path in XAML using prism navigateto extension method from a button in ListView.
Apparently the BindingContext isn't recognized to be the same as in the ListView
Here's the sample code of what i'm trying to achieve.
<ListView
x:Name="MainMenu"
CachingStrategy="RetainElement"
HasUnevenRows="True"
ItemsSource="{Binding MenuItems}"
Margin="20,0,0,0"
SeparatorVisibility="Default">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<buttons:SfButton
Style="{StaticResource BaseButtonStyle}"
HeightRequest="70"
TextColor="{StaticResource MenuTextColor}"
Text="{Binding Title}"
HorizontalTextAlignment="Start"
VerticalOptions="CenterAndExpand"
HorizontalOptions="FillAndExpand"
ImageSource="{Binding MenuItemType, Converter={StaticResource MenuItemTypeConverter}}"
ShowIcon="True"
Command="{prism:NavigateTo Name={Binding Item.View}}"
/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Any ideas how to set the binding in this situations?
Regards.
Within any sort of ListView, CollectionView, etc where you are binding an ItemsSource and then have some sort of DataTemplate to display an individual item in that collection, the Binding Context within that DataTemplate is the individual item in the collection not the ViewModel that that provides the Binding Context of both your Page and the ListView.
There are technically a couple parts to this that you will want to understand. Let's say that your model looks like:
public class FooModel
{
public string Text { get; set; }
public string NavigationPath { get; set; }
}
And let's say that you have a collection of FooModel like:
public ObservableCollection<FooModel> FooItems { get; }
In XAML you might have something like:
<ListView ItemsSource="{Binding FooItems}">
However when you go to reference properties of FooItem you will just reference them like:
<ListView.DataTemplate>
<DataTemplate>
<ViewCell>
<Button Text="{Binding Text}"
Command="{prism:NavigateTo Name={Binding NavigationPath}" />
</ViewCell>
</DataTemplate>
</ListView.DataTemplate>
Now assuming that the issue isn't that you're just adding Item erroneously, let's look at some other possible issues/solutions. To start let's look at the start of our page.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="http://prismlibrary.com"
x:Name="page"
x:Class="HelloWorld.Views.ViewA">
The big thing to notice here is that I've added the x:Name attribute so that I can reference the page itself later. In general within the context of something like a ListView if I need to access say the FooCommand property within my ViewModel I might would change my XAML markup from:
<Button Command="{Binding FooCommand}" />
To instead look at the Page's BindingContext like this:
<Button Command="{Binding BindingContext.FooCommand, Source={x:Reference page}}" />
While this will help you in general within your ListView it still doesn't necessarily help you with the issue of using Prism's Navigation Extensions. For this you may need to pass in the SourcePage like the following:
<Button Command="{prism:NavigateTo 'Foo', SourcePage={x:Reference page}}" />
In the event this doesn't work for some reason then you may be possible that the BindingContext isn't getting set properly on the Navigation Extension itself. To work around this you would want to update your command as follows:
<Button x:Name="cellButton"
Command="{prism:NavigateTo Name={Binding View},
BindingContext={x:Reference cellButton}}" />
Note that if you need to reference the SourcePage or add the BindingContext to resolve your issue, please provide a sample that reproduces the issue and open an issue on GitHub.

how to add multiple command buttons inside of xamarin listview using MVVM?

I am trying to create a listview where users can select the list item to view the store and also be able to click on the image to take them to the product detail.
How can I add a command in the ViewCell?
<ListView ItemsSource="{Binding myData}" x:Name="myListView" SelectedItem="{Binding SelectedStore}" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Label Text="{Binding Title}" />
<Image Source="product.png" >
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ItemTapCommand}" CommandParameter="Id" />
</Image.GestureRecognizers>
</Image>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
public ICommand ItemTapCommand => new Command(ShowSelectedProductAsync());
private async Task ShowSelectedProductAsync()
{
//take them to view the item detail
}
The problem is that you are attempting to bind to a command that is not located on the individual item within the ListView; the BindingContext on your Image is the individual items inside your myData collection.
With other frameworks, for example, Wpf, you would simply use the RelativeSource part of binding to tell the control to look for your command on the BindingContext of another control, however this isn't possible in Xamarin Forms (RelativeSource is not supported).
What you can do is the following, but it requires your UserControl to have an x:Name:
<TapGestureRecognizer Command="{Bindind Path=BindingContext.ItemTapCommand,
Source={x:Reference MyUserControl}}"
CommandParameter="{Binding Id}" />
What this says is to use the UserControl as the source for the binding, and the property is a nested property on that UserControl composed of BindingContext.ItemTapCommand.
As a bonus, I updated the code because I felt that you probably meant to bind the value of the Id property of each record as the command parameter, and not merely to send the string "Id" as the command parameter.

Getting "Cannot add instance of type EventTriggerBehavior to collection BehaviorCollection" to make clickable TextBlock

My app had a series of buttons hardcoded to be a navigation menu, but I wanted to upgrade this to something more data-driven.
<Button Content="MyPage">
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Click">
<core:NavigateToPageAction TargetPage="Namespace.MyPage"/>
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Button>
But when I tried to put this behavior on a different XAML element (specifically a TextBlock as part of a data template) I got the following error.
An exception of type 'Windows.UI.Xaml.Markup.XamlParseException'
occurred in NavMockUp.Windows.exe but was not handled in user code
WinRT information: Cannot add instance of type
'Microsoft.Xaml.Interactions.Core.EventTriggerBehavior' to a
collection of type 'Microsoft.Xaml.Interactivity.BehaviorCollection'
<TextBlock Text="Click for Page">
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Click">
<core:NavigateToPageAction TargetPage="Namespace.MyPage"/>
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</TextBlock>
Make sure you understand how EventTriggerBehaviors work
The error may be somewhat unhelpful, but this is being caused by the fact that a TextBlock element does not have an event called "Click" to attach to. Jerry Nixon has a good article on behaviors
To fix this simply replace the Click event with the Tapped event, because a TextBlock does have one of those.
<TextBlock Text="Click for Page">
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:NavigateToPageAction TargetPage="Namespace.MyPage"/>
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</TextBlock>

DataTemplate does not show result of bound children

On my MainWindow.xaml page, I have the following code which works (where MyWord is a string)
<ContentControl Content="{Binding MyWord}" />
I'm playing with DataTemplates and trying understand them. So, I want to reference a DataTemplate from within my ContentControl. The DataTemplate should contain a TextBlock which binds to my string. I updated my code
<ContentControl ContentTemplate="{StaticResource ViewsTemplate}" />
And in my ResourceDictionary I add
<DataTemplate x:Key="ViewsTemplate">
<TextBlock Text="{Binding MyWord}" />
</DataTemplate>
This produces no text on screen at all. I even tried
<ContentControl Content="{Binding MyWord}" ContentTemplate="{StaticResource ViewsTemplate}" />
and still no result on screen.
I can't work out why can any one give some advice please.
Thank you
The ContentControl still needs to have some content bound to it.
<ContentControl ContentTemplate="{StaticResource ViewsTemplate}" Content="{Binding MyWord}" />
Would work, but then you'd need to change your data template because it expects to be able to find MyWord which of course it won't be able to, so you'd want to use just {Binding} instead.
Alternatively, bind the ContentControl's Content to {Binding} - the current DataContext of its parent - and leave the template as it is.

How to sort a Listview in a DataTemplate in XAML only?

I have a window with a TabControl that i've bind to a list of objec, I'll called MyItem :
<TabControl Name="MyTabPNL" Background="Gainsboro"
ItemsSource="{Binding MyItemList, ElementName=WatcherWindow}"
ContentTemplate="{StaticResource tabItemTemplate}">
</TabControl>
This MyItem class has an ObservableCollection, that I want to bind to a Listview, I'm doing this with a DataTemplate.
GOAL: I'd like to sort automatically this ObservableCollection in XAML. Usually i would use a CollectionViewSource, but i can't find a way to this... I've tried stuff like that:
<DataTemplate x:Key="tabItemTemplate">
<DataTemplate.Resources>
<CollectionViewSource x:Key='dayList' Source="{Binding MyDayList}">
<CollectionViewSource.SortDescriptions>
<scm:SortDescription PropertyName="MyDate" Direction="Descending" />
</CollectionViewSource.SortDescriptions>
</CollectionViewSource>
</DataTemplate.Resources>
<Grid >
<ListView ItemsSource="{Binding Source={StaticResource dayList}}" >
<ListView.View>
<GridView x:Name="gridvwDay" >
<GridViewColumn Header="MyDate"
CellTemplate="{StaticResource myCellTemplatePNLDate}"
HeaderContainerStyle="{StaticResource CustomHeaderStyleNeutral}"
Width="70" />
</GridView>
</ListView.View>
</ListView>
</Grid>
But everytime i've got the same error:
System.Windows.Data Error: 2 : Cannot
find governing FrameworkElement or
FrameworkContentElement for target
element.
BindingExpression:Path=MyDayList;
DataItem=null; target element is
'CollectionViewSource'
(HashCode=58368655); target property
is 'Source' (type 'Object')
I can't find a way to make a link between the dayList in the ListView ItemsSource, and the dayList in the CollectionRessource.
Do you guys have an idea?
FYI: pre sorting the ObservableCollection is not doable, because of the nature of the Class i'm using.
Have you tried simply,
<ListView ItemsSource="{StaticResource dayList}">
As per the doc: http://msdn.microsoft.com/en-us/library/ms750950.aspx
You don't need to bind when its just static on the page :)