Binding an item inside DataTemplate - c#

In my xaml file, I have:
<DataTemplate DataType="{x:Type Configuration:Drivers}">
<ItemsControl ItemsSource="{Binding Cars}" FontWeight="Normal" />
<DataTemplate>
<DataTemplate DataType="{x:Type Configuration:Car}">
<UniformGrid HorizontalAlignment="Stretch" Margin="5,1,5,2" Columns="2">
<CheckBox IsChecked="{Binding Enabled, UpdateSourceTrigger=PropertyChanged}"/>
<CheckBox Visibility="{Binding SaveImage, UpdateSourceTrigger=PropertyChanged}"/>
</UniformGrid>
</DataTemplate>
For each car, it has: Enabled property but does not have SaveImage property.
Car
{
public bool Enabled {}
}
The 'SaveImage' is set in globally. I don't know how to bind that: bool SaveImage inside the DataTemplate?

DataTemplates are an encapsulation boundary, so you cannot allways use FindAncestor to get the desired data. A good solution is to put your ViewModel in your XAML as a StaticResource and then set the DataContext of you LayoutRoot grid to this StaticResource, then all other DataTemplates can access the DataContext via the same StaticResource
EXAMPLE
<Window.Resources>
<local:MyViewModel x:Key="viewmodel" />
<DataTemplate DataType="{x:Type Configuration:Car}">
<UniformGrid HorizontalAlignment="Stretch" Margin="5,1,5,2" Columns="2">
<CheckBox IsChecked="{Binding Enabled, UpdateSourceTrigger=PropertyChanged}"/>
<CheckBox Visibility="{Binding Source={StaticResource viewmodel},
Path=SaveImage, UpdateSourceTrigger=PropertyChanged}"/>
</UniformGrid>
</DataTemplate>
</Window.Resources>
<Grid DataContext="{Binding Source={StaticResource viewmodel}}">
</Grid>

If SaveImage is available in the DataContext of the ItemsControl you can bind to it this way:
<CheckBox IsChecked="{Binding DataContext.SaveImage, UpdateSourceTrigger=PropertyChanged,
RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}}"/>

Solution 1:
You can try RelativeSource to Bind IsCheck to the abcestor object.
{Binding Path=SaveImage, RelativeSource={RelativeSource AncestorType={x:Type typeOfAncestor}}}
Solution 2:
Add a property SaveImage to view-model class Car and ref to model SaveImage.It's not a good solution.

Related

Bind DisplayMemberPath to the ItemTemplate of the ListBox dynamically in WPF?

I'm creating a custom control that has an ItemsSource and DisplayMemberPath properties, and in the ControlTemplate there's a ListBox control that's bound to this ItemsSourse, I want to use the property specified by DisplayMemberPath in this ListBox, unfortunately this doesn't work:
<ListBox ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ItemsSource}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DisplayMemberPath}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
EDIT
As Mike Strobel suggested in the comment and as I read in some blog posts, I removed the ItemTemplate and provided only the DisplayMemberPath in the ListBox but this doesn't even bint to the list (there's no scroll bar):
<ListBox ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ItemsSource}"
DisplayMemberPath="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DisplayMemberPath}"/>
I even hard-coded the DisplayMemberPath value and still not working!, it's only working with List<string> not List<CustomClass>
Solution
Pardon, I missed changing the DP type from IEnumerable<string> to IEnumerable<object>
Thanks for the help!
Could it be that the TemplatedParent object isn't what you think it is? Have you tried traversing back by specified type?
<ListBox ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ItemsSource}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type **TYPE**}}, Path=DisplayMemberPath}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Menu Item Binding WPF Issue

I have a problem with Menu Item Command Binding. I have used MVVM pattern
When I use right click, the menu appears. But when I click on the menu item doesn't work. Do you know why? Thanks
Here is the XAML:
<UserControl x:Class="PlotView.ViewModel.PlotViewControl"
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:oxy="http://oxyplot.org/wpf"
mc:Ignorable="d"
xmlns:diagnostics="clr-namespace:System.Diagnostics;assembly=WindowsBase"
d:DesignHeight="400" d:DesignWidth="600"
x:Name="theViewName">
<UserControl.Resources>
</UserControl.Resources>
<GroupBox Name="GB" Header="Graphs" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderThickness="0">
<ListView Name="PlotLista" SelectedIndex="{Binding SelectedValue}" ItemsSource="{Binding PlotModelList}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<ListView.ItemTemplate>
<DataTemplate>
<oxy:Plot MinHeight="260" Height="Auto" IsRendering="True" FontStyle="Normal" FontFamily="Arial" FontSize="8" VerticalContentAlignment="Top" HorizontalContentAlignment="Left" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}, Path=ActualWidth}" Model="{Binding }">
<oxy:Plot.ContextMenu>
<ContextMenu>
<MenuItem Header="Export to PNG" Command="{Binding DataContext.SavePNG, ElementName=theViewName}"/>
</ContextMenu>
</oxy:Plot.ContextMenu>
</oxy:Plot>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</GroupBox>
</UserControl>
Here are a small portion of ViewModel:
#region Fields
private readonly DelegateCommand _menuClick=new DelegateCommand(this.MenuItemClick);
#endregion
#region Command
public ICommand SavePNG
{
get { return this._menuClick; }
}
#endregion
private void MenuItemClick()
{
// some code here
}
Error:
System.Windows.Data Error: 40 : BindingExpression path error:
'SavePNG' property not found on 'object' ''PlotModel'
(HashCode=15385318)'. BindingExpression:Path=SavePNG;
DataItem='PlotModel' (HashCode=15385318); target element is 'MenuItem'
(Name=''); target property is 'Command' (type 'ICommand')
Your binding is trying to find SavePNG on your Item, not your ViewModel.
Instead, give your view an x:Name, or a Name, and use the following binding instead:
{Binding DataContext.SavePNG, ElementName=theViewName}
Assuming that SaveCommand is on the same ViewModel which contains your collection.
ContextMenus are a little different in wpf as they are not part of the visual tree of the control. As such they cannot 'see' any elements by relative source or by elementnames.
A little cheat is to use the PlacementTarget property and get the datacontext with that. Change your ListView to below to make it work. Notice the tag property on the ListView and the DataContext property on the ContextMenu.
<ListView Name="PlotLista" SelectedIndex="{Binding SelectedValue}" ItemsSource="{Binding PlotModelList}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Tag="{Binding DataContext,ElementName=theViewName}">
<ListView.ItemTemplate>
<DataTemplate>
<oxy:Plot MinHeight="260" Height="Auto" IsRendering="True" FontStyle="Normal" FontFamily="Arial" FontSize="8" VerticalContentAlignment="Top" HorizontalContentAlignment="Left" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}, Path=ActualWidth}" Model="{Binding }">
<oxy:Plot.ContextMenu>
<ContextMenu DataContext="{Binding PlacementTarget.Tag, RelativeSource={RelativeSource Self}}">
<MenuItem Header="Export to PNG" Command="{Binding SavePNG}"/>
</ContextMenu>
</oxy:Plot.ContextMenu>
</oxy:Plot>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
This wasn't written in visual studio so please check the syntax:
<ListView Tag="{Binding Path=DataContext,ElementName=theViewName}">
<ListView.ItemTemplate>
<DataTemplate>
<oxy:Plot Tag="{Binding Path=Tag,RelativeSource={RelativeSource AncestorType=ListView}">
<oxy:Plot.ContextMenu>
<ContextMenu DataContext="{Binding PlacementTarget.Tag, RelativeSource={RelativeSource Self}}">
<MenuItem Command="{Binding SavePNG}"/>
</ContextMenu>
</oxy:Plot.ContextMenu>
</oxy:Plot>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

How can i bind a button in listviewitem to a Command in ViewModel in Winrt

I have a NavigateToAccountsCommand RelayCommand property in the ViewModel. When I bind the same to a button on the page anywhere outside the ListView the command binding is working. However as soon as I move this to a ListView's DataTemplate its not working.
I have tried changing the binding from NavigateToAccountsCommand to DataContext.NavigateToAccountsCommand still not working.
Appreciate your help...
<Page
x:Class="FinancePRO.App.Views.AccountsView"
DataContext="{Binding AccountsViewModel, Source={StaticResource MainViewModelLocator}}"
mc:Ignorable="d">
<Grid>
<!--**This one is working**-->
<Button Command="{Binding NavigateToAccountsCommand}" >
<!--**This one is not working**-->
<ListView ItemsSource="{Binding AllAccounts}" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Stretch">
<TextBlock Text="{Binding AccountName}"/>
<Button Command="{Binding NavigateToAccountsCommand}">
</Button>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
When you are inside the DataTemplate of the ListView, your data context is the current item of the ListView's ItemsSource. As there is nothing called "NavigateToAccountsCommand" property within your AllAcounts' each individual element, binding isn't working.
To fix that, you will need to reference something from the outside of DataTemplate; following should work. It changes the binding to reference the root Grid's DataContext which should have the property NavigateToAccountsCommand accessible. To reference the grid, you have to add Name attribute, and then use ElementName binding.
<Grid Name="Root">
<!--**This one is working**-->
<Button Command="{Binding NavigateToAccountsCommand}" >
<!--**This one is not working**-->
<ListView ItemsSource="{Binding AllAccounts}" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Stretch">
<TextBlock Text="{Binding AccountName}"/>
<Button Command"{Binding ElementName=Root, Path=DataContext.NavigateToAccountsCommand}">
</Button>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
You can use
<Button x:Name="cmdTabItemCloseButton"
Style="{StaticResource TabItemCloseButtonStyle}"
Grid.Column="1" Margin="15,0,0,0"
Command="{Binding RelativeSource=
{RelativeSource FindAncestor,
AncestorType={x:Type ListView}},
Path=DataContext.NavigateToAccountsCommand}"
CommandParameter="{Binding}"/>
I had a similar problem (Win RT) which I solved by just using:
<GridView
x:Name="itemGridView"
ItemClick="ItemView_ItemClick"
IsItemClickEnabled="True"/>
and then in the Page class:
private void ItemView_ItemClick(object sender, ItemClickEventArgs e)
{
//e is the object being clicked
}

Binding visibility to isChecked value of a checkbox

I'm trying to bind my stackpanel's visibility to the checkbox's isChecked value. It's a common problem, but I just can't figure it out.
Converter:
<Page.Resources>
<common:BooleanToVisibilityConverter x:Key="BoolToVis"/>
</Page.Resources>
StackPanel I want to mess with(I removed some code, so don't you worry about listview's binding, I set it in c#):
<ListView x:Name="aktualniGracze" ItemsSource="{Binding}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="stackLiczymy" Visibility="{Binding isChecked, ElementName=czyLiczymy, Converter={StaticResource BoolToVis}}">
<TextBlock Text="{Binding ileWypil}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
CheckBox:
<CheckBox Name="czyLiczymy"/>
Nothing happens when I change the state of the checkbox, any clues?
Thanks a lot in advance.
If you have your correct DataContext in CheckBox, I think you are just missing the DataContext.isChecked
<ListView x:Name="aktualniGracze" ItemsSource="{Binding}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="stackLiczymy" Visibility="{Binding DataContext.isChecked, ElementName=czyLiczymy, Converter={StaticResource BoolToVis}}">
<TextBlock Text="{Binding ileWypil}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Unable to access viewmodel properties from inside Listvew.Resources

I'm trying to bind the SelectedItem to a View. But the view is not able to access the viewmodel when it is inside the Resources block.
When the datacontext is re-assigned to the children, the binding works for textblocks but not for UserControl (NoteView)
Am I missing any Binding?
PFB revised(entire) code and inline comments.
<UserControl x:Class="Konduva.View.NoteSearchView"
<!-- other namespaces here -->
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
DataContext="{Binding NoteSearch, Source={StaticResource Locator}}">
<Grid>
<ListView ItemsSource="{Binding Notes}"
SelectedItem="{Binding SelectedNote}">
<ListView.Resources>
<DataTemplate DataType="{x:Type vm:NoteViewModel}">
<DockPanel>
<TextBlock Text="{Binding Title}" />
<Popup Placement="Right"
PlacementTarget="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}}"
IsOpen="{Binding (ListViewItem.IsSelected), RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}}"
DataContext="{Binding Path=DataContext, RelativeSource={RelativeSource AncestorType={x:Type ListView}}}">
<StackPanel>
<!-- This is working --> <TextBlock Text="{Binding SelectedNote.Title}" />
<!-- This is not working --> <v:NoteView DataContext="{Binding SelectedNote}" />
</StackPanel>
</Popup>
</DockPanel>
</DataTemplate>
</ListView.Resources>
</ListView>
</Grid>
</UserControl>
NoteView:
<Grid>
<TextBlock Text="{Binding Title}" /> // This Text is not displayed
</Grid>
Update 3
Since you're using MvvmLight: in NoteView, try changing
DataContext="{Binding Note, Source={StaticResource Locator}}"
to
<UserControl.Style>
<Style TargetType="UserControl">
<Setter Property="DataContext" Value="{Binding Note, Source={StaticResource Locator}}"/>
</Style>
</UserControl.Style>
Update 2
Encountered a similar problem a few minutes ago which I didn't fully understand so I'll throw in the same solution here to see if it helps. What happends if you change it to this?
<v:NoteView DataContext="{Binding RelativeSource={RelativeSource AncestorType={x:Type Popup}},
Path=DataContext.SelectedNote}"/>
Update
I'm unable to reproduce this. Try adding this in your NoteView constructor. Do you reach DataContextChangedHandler when you change the selection in the ListView?
public NoteView()
{
InitializeComponent();
DependencyPropertyDescriptor dpd =
DependencyPropertyDescriptor.FromProperty(UserControl.DataContextProperty,
typeof(UserControl));
if (dpd != null)
{
dpd.AddValueChanged(this, new EventHandler(DataContextChangedHandler));
}
}
void DataContextChangedHandler(object sender, EventArgs e)
{
MessageBox.Show("DataContext Changed: " + DataContext);
}
First answer
Your DockPanel will get the NoteViewModel as a DataContext and not the ListView and since this DataContext is inherited by all Childs every child will end up with a NoteViewModel as DataContext. To use the ListView as a DataContext for the Popup you can do this. I'm not sure what the DataContext Binding for the StackPanel does though, so I might be missing something here..
<DataTemplate DataType="{x:Type vm:NoteViewModel}">
<DockPanel>
<TextBlock Text="{Binding Title}" />
<Popup Placement="Right"
PlacementTarget="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}}"
IsOpen="{Binding (ListViewItem.IsSelected), RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}}"
DataContext="{Binding Path=DataContext, RelativeSource={RelativeSource AncestorType={x:Type ListView}}}">
<StackPanel>
<TextBlock Text="{Binding SelectedNote.Title}" />
<StackPanel>
<v:NoteView DataContext="{Binding SelectedNote}"/>
</StackPanel>
</StackPanel>
</Popup>
</DockPanel>
</DataTemplate>
Instead of inserting a NoteView directly and binding the DataContext, use a ContentPresenter:
<ContentPresenter Content="{Binding SelectedNote}>
<ContentPresenter.ContentTemplate>
<DataTemplate>
<v:NoteView />
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>

Categories