I have a ListBox that I populate dynamically via a binding (this is defined in a DataTemplate, which is why the binding is somewhat unusual):
<ListBox SelectionMode="Extended" ItemsSource="{Binding DataContext.ResultList, RelativeSource={RelativeSource AncestorType=Window}}">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="IsSelected" Value="{Binding IsSelected}"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Label Content="{Binding Object}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Each ListBoxItem's IsSelected property is bound to an IsSelected property on a custom object.
When I select individual ListBoxItems, the binding works properly - the custom object's IsSelected property is updated in my ViewModel. However, if I select all of the ListBoxItems with a Ctrl+A command, only the currently visible ListBoxItems (those that are currently in my scrolling viewport) update their ViewModel bindings. On the frontend, all the ListBoxItems appear to be selected, and the ListBox.SelectedItems.Count property on the container ListBox shows that all items are selected.
Furthermore, as I scroll through the ListBox after selecting all ListBoxItems with Ctrl+A, the bindings are successfully updated when each ListBoxItem is scrolled into view.
Why does this binding seem to be only partially working? Is there a better way to handle the binding of the IsSelected property when large numbers of ListBoxItems can be selected simultaneously?
Edit:
This behavior doesn't happen exclusively with the Ctrl+A command - I get the same results when selecting all the items using a shift+click.
I think the behavior you're seeing is to due to VirtualizingStackPanel.IsVirtualizing which is True by default when binding to ItemsSource of ListBox
if you for eg set your ListBox such as:
<ListBox VirtualizingStackPanel.IsVirtualizing="False" SelectionMode="Extended" ItemsSource="{Binding DataContext.ResultList, RelativeSource={RelativeSource AncestorType=Window}}">
or
<ListBox ...>
...
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
then you should see all your bound items have their IsSelected updated accordingly with Ctrl+A or Shift + ...
Properties such as Count of the collection even with virtualization would report the correct value to accommodate for things like computing the required ScrollBar.Height. Items which are outside the View-port do not get rendered hence no bindings are in effect on them until they actually get used.
Related
I have a FilterUserControl with FilterViewModel to be its DataContext.
In FilterControl.xaml:
<Button x:Name="FilterButton">
<Button.ContextMenu PlacementTarget="{x:Reference FilterButton}" ItemsSource="{Binding FilterConditions}" Style="{StaticResource ButtonContextMenu}">
<ContextMenu.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<MenuItem Command="{Binding RelativeSource={RelativeSource AncestorType=ContextMenu, Mode=FindAncestor}, Path=DataContext.ChangeFilterCondition}"
CommandParameter="{Binding}">
...
I searched on Web and knew that
CommandParameter="{Binding}"
is the same as
CommandParameter="{Binding DataContext,RelativeSource={RelativeSource Self}}"
I originally thought that DataContext would be FilterViewModel But after debugging I found that DataContext was actually "each item of FilterConditions"
I finally got the evidence here ItemsSource vs DataContext in binding case
Now I would like to know in .xaml how do we identify what the DataContext is? What are the typical/common cases? Thanks.
Long story short: In an ItemsControl with an assigned ItemsSource you can be sure that each item has a different DataContext, this means ItemTemplate and ItemContainerStyle. Not the ItemsPanel.
DataContext is the root of binding path, and it remains the same throughout XAML hierarchy unless you change it.
You can change the DataContext explicitly or by changing the ItemsSource. Having an ItemsSource changes the DataContext of each element, so you don't have to take care of indexes.
This is not true when you assign to Items because it implicitly adds them to the ItemCollection and clears ItemsSource. Using Items is similar to when you add items to any other control. i.e. the contents of the DataContext in this case:
<ItemsControl>
<Button Content="{Binding A}"/>
</ItemsControl>
is just like this case:
<StackPanel>
<Button Content="{Binding A}"/>
</StackPanel>
or even:
<Button>
<Button Content="{Binding A}"/>
</Button>
However using ItemsSource means that you're asking the ItemsControl to enumerate through the given collection, take each element, set their DataContext and render them. Therefore the DataContext is changed there.
RelativeSource Self resolves to the current XAML element, so these two are equal:
<... Prop="{Binding Path=Width, RelativeSource={RelativeSource Self}}"/>
<... Prop="{Binding Path=Width, ElementName=name}" x:Name="name"/>
DataContext is always the root object of the binding ({Binding} or {Binding Path=.}), so these three are equal:
<... Prop="{Binding Path=A}"/>
<... Prop="{Binding Path=DataContext.A, RelativeSource={RelativeSource Self}}"/>
<... Prop="{Binding Path=DataContext.A, ElementName=name}" x:Name="name"/>
Default Binding Path of all the objects in the object tree always resolves to the same object (unless they are changed). e.g. If grid.DataContext=A then A is the Binding root for all the objects inside grid object tree hierarchically.
Note that, you can either change DataContext in the code (preferably in the view's constructor), or you can "bind" the DataContext to have different scopes, so that this view:
<Grid DataContext="{Binding}"> // this is redundant and points to VM
<Grid DataContext="{Binding Child1}">
<Button Command="{Binding Action11}"/>
<Button Command="{Binding Action12}"/>
</Grid>
<Grid DataContext="{Binding Child2}">
<Button Command="{Binding Action21}"/>
<Button Command="{Binding Action22}"/>
</Grid>
<ItemsControl ItemsSource="{Binding Collection}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button
DataContext="{Binding}" // this is redundant and points to an item
Command="{Binding ElementAction}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
perfectly represents this VM:
VM
Child1
Action11
Action12
Child2
Action21
Action22
Collection
Item1
ElementAction
Item2
ElementAction
Item3
ElementAction
...
There's only one case for an itemscontrol ( or things inherit from itemscontrol ).
https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.itemscontrol?view=netcore-3.1
When you bind itemssource to a collection.
What happens is each item in that collection is presented.
Datatemplating then gives an instance of whatever UI you specified in the template.
That row UI appears in your itemscontrol itemspanel.
The row UI has a datacontext of the item.
You can use a datatemplate selector or datatemplates associated with datatype so that you get different UI.
You can change the itemspanel that presents these so it's say a canvas instead of the default stackpanel.
But whatever you do, the datacontext of each will be one of those items in the collection you bound to itemssource.
In WPF using MVVM I would like to set a property in the view model to the displayed text when the mouse is clicked. That is I want the PreviewMouseDown event from the ItemsControl to set a property in the viewmodel.
In the following XAML, I am using an ItemsControl to display Strings from a FormattedText ObservableCollection. All goes well with the XAML below to display the FormattedText.
But, how can I bind a PreviewMouseDown to each of the generated items for the view model?
All my attempts to use DataTemplate within the ItemsControl ultimately lead to:
System.Windows.Data Error: 26 : ItemTemplate and ItemTemplateSelector are ignored for items already of the ItemsControl's container type;
XAML
<ItemsControl
ItemsSource="{Binding Strings}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas
Background="Transparent"
Width="{x:Static h:Constants.widthCanvas}"
Height="{x:Static h:Constants.heightCanvas}"
/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
Adding
h:MouseBehaviour.PreviewMouseDownCommand="{Binding PreviewMouseDown}"
to the Canvas definition never results in the command being called and I can't add it in a DataTemplate.
Any help or better idea is appreciated.
as items in an ItemsControl are hosted in ContentPresenter so if you bind your command to the same it will be applied to the Item's in the ItemsControl
so for that purpose we can use a generic Style for ContentPresenter in the resources of ItemsControl or any parent container
eg
<Style TargetType="ContentPresenter">
<Setter Property="h:MouseBehaviour.PreviewMouseDownCommand"
Value="{Binding PreviewMouseDown}" />
</Style>
above example is based on assumption that PreviewMouseDown command is in the view model for each item, if the command is in the parent view model then you may perhaps use
<Style TargetType="ContentPresenter">
<Setter Property="h:MouseBehaviour.PreviewMouseDownCommand"
Value="{Binding PreviewMouseDown, RelativeSource={RelativeSource FindAncestor,AncestorType=ItemsControl}}" />
</Style>
I have two ComboBoxes. One is bound to a list of enum values, while the other is bound to a list of custom class objects and has the DisplayMemberPath property set.
The ComboBox bound to the enum values applies an implicit TextBlock style, while the ComboBox that uses the DisplayMemberPath property does not.
Using Snoop I can verify that both ComboBoxes are rendered with the exact same set of controls (a <ContentPresenter> containing a <TextBlock>), however the TextBlock in the ComboBox without the DisplayMemberPath set contains a Margin of 5 while the one with DisplayMemberPath set does not.
<Grid.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Margin" Value="5" />
</Style>
</Grid.Resources>
<ComboBox Grid.Row="0" Grid.Column="1"
ItemsSource="{Binding EnumCollection}"
SelectedItem="{Binding SelectedEnum}" />
<ComboBox Grid.Column="1" Grid.Row="2"
ItemsSource="{Binding SomeCollection}"
SelectedItem="{Binding SelectedItem}"
DisplayMemberPath="Name" />
Why is this? And what can I do to stop the Enum ComboBox from inheriting the implicit TextBlock style?
My assumption would be that the DisplayMemberPath creates a DataTemplate, and styles will not be applied within its scope.
Try setting DisplayMemberPath="." to make the first ComboBox use a DataTemplate containing <TextBlock Text="{Binding .}">, which will prevent the implicit style from getting applied.
I have a WPF application that I'm trying to dynamically add items to a tabcontrol. I have a list of menu items that should be databound to the tabcontrol's items. The only problem is that TabControl.Items does not notify others that items have been added. I've tested this by binding instead to TabControl.Items.Count and get calls to the converter (but the value passed in is the count and not something useful). Here's the relevent code that doesn't get databound properly because Items doesn't call out updates:
<MenuItem ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}, Path=Items, Converter={StaticResource TabControlItemConverter}}">
This MenuItem XAML is inside a ControlTemplate for a TabControl. With static items, i.e., items that are already defined in a TabControl, this code works perfectly. But I have a TabControl that gets items added at runtime and can't seem to update this binding. Has anyone added some sort of attached property to a TabControl that can bind to the Items collection?
Edit for background info
The TabControl that has items added to it is a region (this is a Prism application). Here is the relevent XAML
<TabControl cal:RegionManager.RegionName="{x:Static local:LocalRegionNames.SelectedItemRegion}" >
<TabControl.Resources>
<Style TargetType="TabItem" BasedOn="{StaticResource TabItemStyle}">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Style="{StaticResource tabItemImage}" Height="20" />
<TextBlock Text="{Binding Content.DataContext.TabHeader, RelativeSource={RelativeSource AncestorType=TabItem}}" VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
</TabControl>
The relevent code for adding a view to the region is here:
ProjectDetailView view = new ProjectDetailView();
ProjectDetailViewModel viewModel = new ProjectDetailViewModel();
viewModel.CurrentProject = project;
view.DataContext = viewModel;
IRegionManager retManager = RegionManager.Regions[LocalRegionNames.SelectedItemRegion].Add(view, null, true);
RegionManager.Regions[LocalRegionNames.SelectedItemRegion].Activate(view);
All this works fine...views get added, the tab control adds items, and views appear. But the Items property on the tabcontrol never broadcasts the changes to its collection.
You do the same thing for TabControls, you bind the ItemsSource, the only thing you need to take into account is that the source collection should implement INotifyCollectionChanged if you want it updated if items are added. ObservableCollection<T> already implements the interface and is often used as source for such bindings.
I would like an array of 10 combo boxes on a wpf form.
The ItemsSource of the combo boxes are identical - an ObservableCollection of selectable Items.
Each Selected Item will bound to an item in a different ObservableCollection, imaginatively called 'SelectedItems'..
What is the best way to do the array? I could of course have 10 separate combo boxes but this would be not very elegant..
I don't think an ItemsControl template is what I'm after as the number of combo boxes is static.
Thanks
Joe
If I understand you right, you have 10 ComboBoxes with the same item list, but different data sources
In that case, I could create a common style for the ComboBox which sets the common properties such as ItemsSource (and SelectedItem if the binding is the same for all items), and then actually create the individual ComboBoxes on the form as needed.
<StackPanel>
<StackPanel.Resources>
<Style TargetType="{x:Type ComboBox}">
<!-- Set the binding to wherever your ItemsSource resides. In this
case,I'm binding to a static class called Lists and a static
property called ComboBoxItems -->
<Setter Property="ItemsSource"
Value="{Binding Source={x:Static local:Lists.ComboBoxItems}}" />
<!-- Only use this setter if your binding is the same everywhere -->
<Setter Property="SelectedItem" Value="{Binding SelectedItem}" />
</Style>
</StackPanel.Resources>
<ComboBox DataContext="{Binding Item1}" />
<ComboBox DataContext="{Binding Item2}" />
<ComboBox DataContext="{Binding Item3}" />
<ComboBox DataContext="{Binding Item4}" />
<ComboBox DataContext="{Binding Item5}" />
<ComboBox DataContext="{Binding Item6}" />
<ComboBox DataContext="{Binding Item7}" />
<ComboBox DataContext="{Binding Item8}" />
<ComboBox DataContext="{Binding Item9}" />
<ComboBox DataContext="{Binding Item10}" />
</StackPanel>
Of course, if the DataSource for your ComboBoxes CAN be put in a collection, it is preferred that they are and that you use an ItemsControl to display the ComboBoxes
<ItemsControl ItemsSource="{Binding SelectedItems}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ComboBox SelectedItem="{Binding }"
ItemsSource="{Binding Source={x:Static local:Lists.ComboBoxItems}}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Each Selected Item will bound to an item in a different ObservableCollection, imaginatively called 'SelectedItems'..
Given that you're effectively binding to a collection, I would do an ItemsControl template, and just treat it that way. Unless you want to customize the layout (ie: these won't be arranged together in the View), that will simplify the design, even if the number of items is always "static".
If you want to have the items arranged separately on the View, then just having 10 combo boxes may be more appropriate.
Personally I think an ItemsControl which has an ItemTemplate which constructs each ComboBox is the way to go! Are you always going to have exactly 10 of these?
From an MVVM perspective, I can imagine a parent View Model which has a collection of selection view models. Each selection view model will have the list of items that can be selected, and the currently selected item. This view model will easily bind to your view.
Not knowing why you need this... which would probably be important in deciding how to do this... here is my stab at it.
Why not design the UI, give each ComboBox a name, create a List and Add each into that List at runtime?