I'm working on a MVVM-project using XAML.
I'm having problems accessing a property of an outer element when operating inside a ListView with an ItemSource binding.
XAML:
<ListView x:Name="BibTexFields" Height="422" ItemsSource="{Binding BibTexFields}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="450">
<TextBlock Foreground="Black" Text="{Binding Field.Name}"/>
<CheckBox HorizontalAlignment="Right" IsChecked="{Binding IsChecked, Mode=TwoWay}" Command="{Binding UpdateFilledFieldsCommand}"/>
BibTexFields is a property from my ViewModel which also is my DataContext. So is UpdateFilledFieldsCommand
XAML:
xmlns:vm="using:StudyConfigurationClient.ViewModels"
mc:Ignorable="d" d:DataContext="{d:DesignInstance vm:CreateStudyViewModel}">
<Grid x:Name="FieldOuter">
<Border BorderBrush="Gray" BorderThickness="2" Margin="0, 0, 5, 0">
ViewModel:
private ObservableCollection<ChosenField> _bibTexFields;
public ObservableCollection<ChosenField> BibTexFields
{
get { return _bibTexFields; }
set
{
_bibTexFields = value;
OnPropertyChanged();
}
}
What I want to do is access the ViewModel from inside the ListView, so that I can make a Command with a binding to the UpdateFilledFieldsCommand property.
I've tried researching the RelativeSource binding, but can't seem to make it work. Nor does trying binding it to the DataContext work.
You can also use ElementName:
<CheckBox HorizontalAlignment="Right" IsChecked="{Binding IsChecked, Mode=TwoWay}" Command="{Binding DataContext.UpdateFilledFieldsCommand, ElementName=BibTexFields}"/>
However, RelativeSource should also work. With a quick search, I found this: How do I use WPF bindings with RelativeSource? It looks fine though I don't know if all the features are present in an UWP app.
Related
I'm trying to change the Visibility of elements inside a ListBoxItem by clicking on a CheckBox outside the ListBox which contains Items, but it doesn't seem to work.
It looks like the the binding doesn't work inside the ListBoxItems.
I'm using a template for my items
XAML
<UserControl.Resources>
<local:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
<DataTemplate x:Key="ShotTemplate">
<Grid x:Name="GridItem" Width="200">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox x:Name="ShotBox" Grid.Column="1" Text="{Binding Path=Description}" Visibility="{Binding EditMode, ElementName=EditMode, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBlock x:Name="ShotBlock" Grid.Column="1" Text="{Binding Path=Description}" Visibility="{Binding EditMode, Converter={StaticResource BooleanToVisibilityConverter}, ConverterParameter=False }" />
</Grid>
</DataTemplate>
</UserControl.Resources>
<Grid>
<ListBox Name="ShotList" ItemsSource="{Binding AllShotsCollection}" ItemTemplate="{StaticResource ShotTemplate}"/>
<CheckBox Name="EditMode" IsChecked="{Binding EditMode}" Content="Edit Mode" HorizontalAlignment="Left" Margin="12,30,0,0" VerticalAlignment="Top"/>
</Grid>
ViewModel
private bool _editMode = true;
public bool EditMode
{
get { return _editMode; }
set { _editMode = value; RaisePropertyChanged("EditMode"); }
}
How do I change ShotBox and ShotBlock Visibility by checking or unchecking the CheckBox. I know the converter works correctly, that's not the problem it must have something to do with the binding.
The ElementName binding scope is within the template only. I would define an attached property on the ListView (not the ListViewItem) and have the Checkbox toggle that property. Within the DataTemplate, you'll be able to use RelativeSource / FindAncestor binding to find the ListView.
This line of xaml code is not working. You are trying to bind to the view element and viewmodel prop. at the same time.
<TextBox x:Name="ShotBox" Grid.Column="1" Text="{Binding Path=Description}" Visibility="{Binding EditMode, ElementName=EditMode, Converter={StaticResource BooleanToVisibilityConverter}}" />
Remove this 'ElementName=EditMode' so that it would bind properly to the viewmodel property 'EditMode'.
OR if you want to bind to the view element only use
Visibility="{Binding Path=IsChecked, ElementName=EditMode, Converter={StaticResource BooleanToVisibilityConverter}}" />
I have the following xaml:
<UserControl.Resources>
<sivm:Locator x:Key="viewModelLocator" ModelType="{x:Type ViewModels:RateVSConcentrationViewModel}"/>
</UserControl.Resources>
<UserControl.DataContext>
<Binding Path="ViewModel" Source="{StaticResource viewModelLocator}"/>
</UserControl.DataContext>
...
<ComboBox Grid.Column="0" Grid.Row="1" Height="20" VerticalAlignment="Top" ItemsSource="{Binding Chambers}" > <!--SelectedItem="{Binding SelectedChamber}">-->
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding ChamberName}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
Chambers is an ObservableCollection of objects that contains a property called ChamberName which I want displayed in the combobox.
In the ViewModel I have the following code:
foreach (var chamber in chambers)
{
Chambers.Add(chamber);
}
OnPropertyChanged(() => Chambers);
But when this code executes the combobox is not updated. I have used this way to do a lot of databinding but I can't get this to work.
Can someone see what I am doing wrong here?
You may need to set the relativesource on your textblock, try modifying the binding on the Text property of your textblock to the following:
{Binding DataContext.ChamberName, RelativeSource={RelativeSource AncestorType=ComboBox}}
And as nit said above, always check for binding errors, they will put you on the right path.
You should adjust the property binding as follows:
<ComboBox ItemsSource="{Binding Path=ViewModel.Chambers, Source={StaticResource viewModelLocator}}" >
I got it to work doing this:
<ComboBox DisplayMemberPath="ChamberName" Grid.Column="0" Grid.Row="1" Height="20" VerticalAlignment="Top" ItemsSource="{Binding Chambers}"> <!--SelectedItem="{Binding SelectedChamber}">-->
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
}
I have a problem with a particular xaml databinding.
I have two listboxes (master-details, so the listboxes have IsSynchronizedWithCurrentItem set to true). I want my viewmodel to know when the selected item on the details listbox changes: I created an int property on my viewmodel class (i.e. we can call this property SelInd)and on the details viewmodel I bind this way:
SelectedIndex="{Binding Mode=OneWayToSource, Path=SelInd}"
I get no errors/exceptions at runtime, but the binding does not trigger: my viewmodel's property does not get updated when the selected item changes. If I change the binding mode to TwoWay everything works fine, but that's not what I need. I need it to work with OneWayToSource (btw the same non-working behaviour applies if I bind SelectedItem to SelectedValue properties).
Why do those bindings do not trigger with OneWayToSource?
Here's a more complete code example, just to get the things clearer:
EDIT: I can't show the real code (NDA) but I'll show here something simpler and similar enough (the Page's DataContext is an instance of the PageViewModel class explained later)
I just need that my viewmodel class's SelInd property should always reflect the value of SelectedIndex in the second ListBox. I have found alternative methods for doing this (Event handler in code-behind or an Attached Behaviour) but right now I'm just curious about WHY it doesn't work with OneWayToSource binding.
<Page>
<ContentControl x:Name="MainDataContext">
<Grid DataContext={Binding Path=Masters}>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ListBox Grid.Column="0"
SelectionMode="Single"
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding }">
<ListBox.ItemContainerStyle>
...
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
....
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox Grid.Column="1"
SelectionMode="Single"
SelectedIndex="{Binding Mode=OneWayToSource, ElementName=MainDataContext,Path=DataContext.SelInd}"
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding Path=Details}">
<ListBox.ItemContainerStyle>
...
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
....
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</ContentControl>
</Page>
Here's a sketch of the view model class
public class PageViewModel{
public ObservableCollection<MasterClass> Masters {get;set;}
public int SelInd {get;set;}
....
}
And here's MasterClass, it just holds a name and a list of details
public class MasterClass{
public ObservableCollection<DetailsClass> Details {get;set;}
public String MasterName {get;set;}
....
}
I think in your case, you must use the mode OneWay. By default, you have used mode TwoWay.
Quote from MSDN about TwoWay:
TwoWay binding causes changes to either the source property or the target property to automatically update the other. This type of binding is appropriate for editable forms or other fully-interactive UI scenarios. Most properties default to OneWay binding, but some dependency properties (typically properties of user-editable controls such as the Text property of TextBox and the IsChecked property of CheckBox) default to TwoWay binding. A programmatic way to determine whether a dependency property binds one-way or two-way by default is to get the property metadata of the property using GetMetadata and then check the Boolean value of the BindsTwoWayByDefault property.
Mode OneWay, that you need:
OneWay binding causes changes to the source property to automatically update the target property, but changes to the target property are not propagated back to the source property. This type of binding is appropriate if the control being bound is implicitly read-only. For instance, you may bind to a source such as a stock ticker or perhaps your target property has no control interface provided for making changes, such as a data-bound background color of a table. If there is no need to monitor the changes of the target property, using the OneWay binding mode avoids the overhead of the TwoWay binding mode.
Mode OneWayToSource:
OneWayToSource is the reverse of OneWay binding; it updates the source property when the target property changes. One example scenario is if you only need to re-evaluate the source value from the UI.
Below is a diagram for a better understanding of the:
Okay, then I'll show you an example that works for me. Perhaps it will be useful to you.
XAML
<Window x:Class="SelectedIndexHelp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SelectedIndexHelp"
Title="MainWindow" Height="350" Width="525"
ContentRendered="Window_ContentRendered"
WindowStartupLocation="CenterScreen">
<Window.Resources>
<local:SelectedIndexClass x:Key="SelectedIndexClass" />
</Window.Resources>
<Grid DataContext="{StaticResource SelectedIndexClass}">
<ListBox x:Name="MyListBox"
BorderThickness="1"
Width="200" Height="200"
BorderBrush="#CE5E48"
DisplayMemberPath="Name"
Background="AliceBlue"
SelectedIndex="{Binding MySelectedIndex, Mode=OneWayToSource}" />
<Label Name="SelectedIndex" VerticalAlignment="Top"
Content="{Binding MySelectedIndex}"
ContentStringFormat="SelectedIndex: {0}"
Width="100" Height="30" Background="Lavender" />
</Grid>
</Window>
Code behind
public partial class MainWindow : Window
{
public class Person
{
public string Name
{
get;
set;
}
public int Age
{
get;
set;
}
}
private ObservableCollection<Person> DataForListBox = new ObservableCollection<Person>();
public MainWindow()
{
InitializeComponent();
}
private void Window_ContentRendered(object sender, EventArgs e)
{
DataForListBox.Add(new Person()
{
Name = "Sam",
Age = 22,
});
DataForListBox.Add(new Person()
{
Name = "Nick",
Age = 21,
});
DataForListBox.Add(new Person()
{
Name = "Cris",
Age = 25,
});
DataForListBox.Add(new Person()
{
Name = "Josh",
Age = 36,
});
DataForListBox.Add(new Person()
{
Name = "Max",
Age = 32,
});
DataForListBox.Add(new Person()
{
Name = "John",
Age = 40,
});
MyListBox.ItemsSource = DataForListBox;
MyListBox.Focus();
}
}
public class SelectedIndexClass
{
private int? mySelectedIndex = 0;
public int? MySelectedIndex
{
get
{
return mySelectedIndex;
}
set
{
mySelectedIndex = value;
}
}
}
Output
In this example, there is a class of data - Person, these data for ListBox. And the class SelectedIndexClass (DataContext), which contains the property MySelectedIndex, which is a parameter of binding OneWayToSource.
Edit: I'm glad you figured out with the problem. I'll try to explain by their example, why are you not working with ElementName case.
So, let's say we have this code:
<ContentControl x:Name="MainDataContext">
<Grid x:Name="MainGrid" DataContext="{StaticResource SelectedIndexClass}">
<ListBox x:Name="MyListBox"
BorderThickness="1"
Width="200" Height="200"
BorderBrush="#CE5E48"
DisplayMemberPath="Name"
Background="AliceBlue"
SelectedIndex="{Binding Path=DataContext.MySelectedIndex, Mode=OneWayToSource, ElementName=MainDataContext}" />
<Label Name="SelectedIndex" VerticalAlignment="Top"
Content="{Binding MySelectedIndex}"
ContentStringFormat="SelectedIndex: {0}"
Width="100" Height="30" Background="Lavender" />
</Grid>
</ContentControl>
As you probably understand, it will not work.
DataContext set on a specific node of the visual tree, all items below (in the visual tree) inherit it. This means that the DataContext will be working since the Grid and below the visual tree. Therefore, the following code will work:
<ContentControl x:Name="MainDataContext">
<Grid x:Name="MainGrid" DataContext="{StaticResource SelectedIndexClass}">
<ListBox x:Name="MyListBox"
BorderThickness="1"
Width="200" Height="200"
BorderBrush="#CE5E48"
DisplayMemberPath="Name"
Background="AliceBlue"
SelectedIndex="{Binding Path=DataContext.MySelectedIndex, Mode=OneWayToSource, ElementName=MainGrid}" />
<Label Name="SelectedIndex" VerticalAlignment="Top"
Content="{Binding MySelectedIndex}"
ContentStringFormat="SelectedIndex: {0}"
Width="100" Height="30" Background="Lavender" />
</Grid>
</ContentControl>
And also, it will work if the name of the point MyListBox. Usually, when set the DataContext, the element name is passed.
Well, I found a way to make it work. I just removed the data-context "indirection" so I don't have to use ElementName in my bindings, and it started working. The working xaml example is:
<Page>
<ContentControl >
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ListBox Grid.Column="0"
SelectionMode="Single"
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding Masters }">
<ListBox.ItemContainerStyle>
...
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
....
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox Grid.Column="1"
SelectionMode="Single"
SelectedIndex="{Binding Mode=OneWayToSource, Path=SelInd}"
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding Path=Masters/Details}">
<ListBox.ItemContainerStyle>
...
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
....
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</ContentControl>
</Page>
Now, if someone knows exactly WHY the binding using ElementName does not work, I'd like to know it :)
I have a TreeView of items, and a corresponding TreeViewModel. I want to support a property on the TreeViewModel which keeps a track of the currently selected item in the TreeView.
This is the code I have:
<UserControl.DataContext>
<vm:TreeMenuViewModel />
</UserControl.DataContext>
<UserControl.Resources>
<common:HierarchicalDataTemplate x:Key="MenuItemsTemplate"
ItemsSource="{Binding ChildItems}">
<TextBlock Text="{Binding MenuOption}"/>
</common:HierarchicalDataTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<toolkit:DockPanel>
<sdk:TreeView
Name="treeView1"
VerticalAlignment="Stretch"
toolkit:DockPanel.Dock="Left"
Background="Transparent"
ItemsSource="{Binding ChildItems}"
ItemTemplate="{StaticResource MenuItemsTemplate}"
>
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectedItemChanged">
<ei:ChangePropertyAction
TargetObject="{Binding}"
PropertyName="SelectedItemId"
Value="{Binding MenuOptionId}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</sdk:TreeView>
</toolkit:DockPanel>
</Grid>
The TreeView binds and displays the data correctly. The trigger is also working and targeting the correct property - when I break on the SelectedItemId property in the TreeViewModel, the property is being hit, but the value supplied is always 0. How can I supply the value of the selected item?
Just remove the whole trigger and add:
ItemsSource="{Binding ChildItems}"
SelectedItem="{Binding SelectedChild}"
And then your ViewModel needs a SelectedChild property. Your VM can react to changes from the setter of that property.
If you want 2-way binding then make it a NotifyChange property.
And I think you want the id: SelectedChild.Id or something like that.
Try using the TreeView SelectedValue and SelectedValuePath properties:-
<Grid x:Name="LayoutRoot" Background="White">
<toolkit:DockPanel>
<sdk:TreeView
Name="treeView1"
VerticalAlignment="Stretch"
toolkit:DockPanel.Dock="Left"
Background="Transparent"
ItemsSource="{Binding ChildItems}"
ItemTemplate="{StaticResource MenuItemsTemplate}"
SelectedValue="{Binding SelectedItemId, Mode=TwoWay}"
SelectedValuePath="MenuOptionId"
/>
</toolkit:DockPanel>
</Grid>
why not use something like this.
(SingleObjectInYourList)Item = treeview.SelectedItem;