Using an MVVM approach, I have a View that contains a ListBox and also a Grid in which I want to display information about the SelectedItem in the ListBox. I want to set the DataContext for the Grid to the SelectedItem.
However, the ListBox is buried as follows: A ContentControl that is bound to a DataTemplate that is a UserControl View that contains the ListBox.
Here is the MainWindow Grid that I'm not sure how to bind:
<Grid DataContext="{Binding ElementName=MyList, ????}">
Here is the ContentControl in the same View:
<ContentControl x:Name="MyList"
Content="{Binding}"
ContentTemplate="{StaticResource MyListTemplate}"/>
Here is the Data Template in the same View:
<Window.Resources>
<DataTemplate x:Key="MyListTemplate">
<v:MyListView/>
</DataTemplate>
</Window.Resources>
Here is MyListView:
<UserControl>
<ListBox Name="MyListBox" ItemsSource="{Binding ItemList}"/>
</UserControl>
I am adding to code I wrote a couple of years ago and have been away from WPF for a while, so alas, I am rusty on my data binding. I have been trying to add a SelectedItem property to the view model for MyListView and/or the MainWindow. I expect this may require RelativeSource.
Doh! I was forgetting to specify the OnPropertyChanged call for my property.
In the UserControl ListBox, I needed this:
ItemsSource="{Binding ItemList}" SelectedItem="{Binding MySelectedItem}"
In the main window view model, I needed this:
public MyItemViewModel MySelectedItem
{
get { return _mySelectedItem; }
set
{
_mySelectedItem = value;
OnPropertyChanged("MySelectedItem");
}
}
Then, in the main window, the binding is simply:
<Grid DataContext="{Binding MySelectedItem}">
Related
I have an ICommand in my PageViewModel and want it to be call in my CheckedChanged of RadioButton. However, this RadioButton is inside:
<views:RoundedPage>
<Carousel ItemSource="...">
<DataTemplate DataType="...">
<CollectionView ItemSource="...">
<DataTemplate DataType="...">
<RadioButton CheckedChanged="" />
</DataTemplate>
</CollectionView>
</DataTemplate>
</Carousel>
</views:RoundedPage>
So how am I gonna call this command outside those sources.
Thank you
At first, I don't recommend you to deal with the UI event in your view model. The view model is used to resolve the logic behavior behand the view.
So you can set the CheckedChanged event by the following method:
1.create a void method in the page.cs, such as
private void RadioButton_CheckedChanged(object sender, CheckedChangedEventArgs e)
{
//do something
}
2.binding in the xaml
<RadioButton CheckedChanged="RadioButton_CheckedChanged"/>
If you still want to deal with the event in the viewmodel, you need to use the behavior to covert the event to a command.
There is a simple in the official document and you can check it:
https://learn.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/behaviors-eventtocommandbehavior/
I am trying to pass ObservableCollection from the XAML Page to the UserControl.
In a normal Visual Studio WPF project .NET Framework 4.8, within the UserControl the below XAML code works fine and the data can be seen within the Page.
<DataGrid Grid.Row="0" x:Name="dgAuthors" ItemsSource="{Binding Authors, RelativeSource= RelativeSource Mode=FindAncestor, AncestorType=local:UserControl1}}
Code behind of User Control as below:
public UserControl1()
{
InitializeComponent();
dgAuthors.DataContext = this;
}
public ObservableCollection<Author> Authors
{
get { return (ObservableCollection<Author>)GetValue(AuthorsProperty); }
set { SetValue(AuthorsProperty, value); }
}
// Using a DependencyProperty as the backing store for Authors. This enables animation, styling, binding, etc...
public static readonly DependencyProperty AuthorsProperty =
DependencyProperty.Register("Authors", typeof(ObservableCollection<Author>), typeof(UserControl1), null);
But in UNO for .NET 5.0 framework, it is unable to find the Mode=FindAncestor and AncestorType when Binding is used within the ItemSource of the DataGrid.
Any help would be highly appreciated.
Many thanks
Neeraj
With the WinUI flavour of XAML used by Uno Platform, you can use x:Bind syntax to bind to a property in code-behind:
<DataGrid Grid.Row="0" x:Name="dgAuthors" ItemsSource="{x:Bind Authors, Mode=OneWay}} />
I got a page in which I load multiple control template considering some business logic binded to a property in my viewModel.
<ContentView x:Name="ContentView" ControlTemplate="{Binding ItemControlTemplate}">
</ContentView>
Inside this control template I got a CarouselViewControl which uses a DataTemplate.
<carousel:CarouselViewControl x:Name="CarouselViewMapTemplate" Position="
{TemplateBinding BindingContext.CarouselPosition}"
PositionSelectedCommand="{TemplateBinding BindingContext.PositionChanged}"
Orientation="Horizontal" AnimateTransition="True" IsSwipeEnabled="False"
ItemsSource="{TemplateBinding BindingContext.Items}" InterPageSpacing="10"
ItemTemplate="{StaticResource ItemsDataTemplate }">
</carousel:CarouselViewControl>
And inside this DataTemplate I would like to bind to a property in the ViewModel, which is also a DataTemplate.
<maps:SfMaps x:Name="sfmap" EnablePanning="False" EnableZooming="False" BackgroundColor="Transparent">
<maps:SfMaps.Layers>
<maps:ShapeFileLayer x:Name="ShapeLayer" Uri="FRA_adm0.shp" MarkerTemplate="{Binding Parent.BindingContext.MarkerDataTemplate}">
</maps:ShapeFileLayer>
</maps:SfMaps.Layers>
</maps:SfMaps>
How can I achieve that ? I just tried
{Binding Parent.BindingContext.MyProperty}
but this is not working. I also digged with Source property of binding, but that won't do it as I don't have reference in my DataTemplate, used as resource in the app level ResourceDictionary.
This DOESNT work ofc it does not find carouselView in the ResourceDictionary :
"{Binding Path=BindingContext.DisplayMarkerTemplateCommand, Source={x:Reference carouselView}}"
Not being able to do that breaks the whole point of having ResourceDictionary and clean templating if binding is not working from it with XAML.
THANKS !
I have a ListView bind to list of BitmapImage.
I want to get the Index of current image in focus when I scroll thru this list.
But, I notice that ItemAppearing property is not there in UWP but it is there in Xamarin Forms.
How can I get the index of the current item in view?
Thanks!
<ScrollViewer Grid.Row="0" ZoomMode="{x:Bind ZoomMode, Mode=OneWay}" HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Auto">
<ListView HorizontalAlignment="Center" ItemsSource="{x:Bind ImagePages, Mode=OneWay}">
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="BitmapImage">
<Image Source="{x:Bind }" Margin="0 2" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListView>
</ScrollViewer>
For starters, the ItemAppearing property is not the behavior you are looking for. The ItemAppearing event for the ListView in Xamarin Forms is fired when the list item is rendered. For a small list this event will be fired for all items immediately. The equivalent event in UWP is ListView.ChoosingItemContainer event which like the ItemAppearing event, unless the ListView is virtualized is fired for all items in the list. Even for a large virtualized list, it is fired for several pages of items.
This is not what you want. As I understand it, you want to know the image that is visible at the top of the list view when the list is scrolled. Here is how to do that.
First of all. Get rid of the ScrollViewer. The ListView already has a ScrollViewer inside of it.
<ListView x:Name="listViewImage" Grid.Row="0" HorizontalAlignment="Center" ItemsSource="{x:Bind ImagePages, Mode=OneWay}"
Loaded="listViewImage_Loaded">
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="BitmapImage">
<Image Source="{x:Bind }" Margin="0 2"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListView>
Note that I have named the ListView and I have added a Loaded event handler. In this handler, find the ScrollViewer inside the ListView and attach a handler to the ViewChanged event.
private void listViewImage_Loaded(object sender, RoutedEventArgs e)
{
Border b = VisualTreeHelper.GetChild(listViewImage, 0) as Border;
ScrollViewer sv = b.Child as ScrollViewer;
sv.ViewChanged += Sv_ViewChanged;
}
In the view changed handler, find the first visible ListViewItem and get its index in the collection. This is what you want.
private void Sv_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
{
ScrollViewer sv = sender as ScrollViewer;
GeneralTransform gt = sv.TransformToVisual(this);
Point p = gt.TransformPoint(new Point(0, 0));
List<UIElement> list = new List<UIElement>(VisualTreeHelper.FindElementsInHostCoordinates(p, sv));
ListViewItem item = list.OfType<ListViewItem>().FirstOrDefault();
if(item != null)
{
int index = listViewImage.IndexFromContainer(item);
Debug.WriteLine("Visible item at top of list is " + index);
}
}
I'm trying to bind my ListBox to a selection of my ViewModel, because I have multiple ListBoxes in a Pivot and I don't want to type out the entire Page for each property. To illustrate my issue, here's a small sample:
XAML:
<DataTemplate x:Key="PropertyTemplate">
<StackPanel>
<TextBlock Text="{Binding Label}" />
<TextBlock Text="{Binding Value}" />
</StackPanel>
</DataTemplate>
<controls:Pivot>
<controls:PivotItem>
<ListBox ItemsSource="{Binding PropertySelectionOne}" ItemTemplate="{StaticResource PropertyTemplate}" />
</controls:PivotItem>
<controls:PivotItem>
<ListBox ItemsSource="{Binding PropertySelectionTwo}" ItemTemplate="{StaticResource PropertyTemplate}" />
</controls:PivotItem>
</controls:Pivot>
ViewModel:
public class SomeViewModel
{
private Property _propOne;
public Property PropOne
{
get { return _propOne; }
set { _propOne = value; NotifyPropertyChanged("PropOne"); }
}
private Property _propTwo;
public Property PropTwo
{
get { return _propTwo; }
set { _propTwo = value; NotifyPropertyChanged("PropTwo"); }
}
private Property _propThree;
public Property PropThree
{
get { return _propThree; }
set { _propThree = value; NotifyPropertyChanged("PropThree"); }
}
}
So basically I want to bind my ListBoxes to PropertySelectionOne and PropertySelectionTwo, which would contain references to a selection of the properties in my ViewModel. For instance, PropertySelectionOne could include PropOne and PropTwo and PropertySelectionTwo could include PropTwo and PropThree.
Is there a simple way to "group" these properties to a new property to bind against without changing the architecture of my application?
Thanks
If you've got different properties to be displayed from the same date type in different list boxes, then arguably you need to split your view model, but you say you don't want to change the architecture of your application, which is your choice.
So, what you need to do is to provide a different ItemTemplate for each ListBox that defines which properties and how you want to display in each ListBox. Then you can bind the ItemsSource for all of the list boxes to the same data source but they will present different properties according to the ItemTemplate.
Not sure how familiar you are with these concepts, but you know that ItemsSource needs to be a collection of your data instances (SomeViewModel?), right?