How to get current index and count of itemsource from itemtemplate - xaml

I have a ListView which contain some item, each item has a template of itself, my problem is how to display the current index of each item and the count of itemsource in the itemtemplate?
My ListView xaml:
<ListView x:Name="AddTermsListView" ItemTemplate="{StaticResource FilterDataTemplate}"
ItemsSource="{Binding ComboBoxSet}"
ItemsPanel="{StaticResource WrapItemsPanelTemplate}"
SelectionMode="None" Padding="0" ScrollViewer.VerticalScrollBarVisibility="Auto"
HorizontalAlignment="Left" VerticalAlignment="Top" />
My ItemTemplate:
<DataTemplate x:Key="FilterDataTemplate">
<StackPanel Orientation="Horizontal" Background="White" Height="50" HorizontalAlignment="Left">
<TextBox BorderBrush="#FF727272" Background="#FFD1D1D1" HorizontalAlignment="Left" Grid.Row="2" TextWrapping="Wrap" Text="{How to get Index?}"/>
<TextBox BorderBrush="#FF727272" Background="#FFD1D1D1" HorizontalAlignment="Left" Grid.Row="2" TextWrapping="Wrap" Text="{How to display total of ComboBoxSet?}"/>
</StackPanel>
</DataTemplate>
Thank you :)
EDIT
Try binding the total items in ListView by the ComboBoxSet but still not work:
<TextBox BorderBrush="#FF727272" Background="#FFD1D1D1" HorizontalAlignment="Left" Grid.Row="2" TextWrapping="Wrap" Text="{Binding ComboBoxSet.Count}"/>

You can show the List items count on the template by Element binding.
UPDATE: Try this code
<ListView x:Name="AddTermsListView">
<ListView.ItemTemplate >
<DataTemplate>
<StackPanel Orientation="Horizontal" Width="300" Height="50">
<TextBlock Text="{Binding}" Margin="0,0,20,0"/>
<TextBlock Text="{Binding Items.Count, ElementName=AddTermsListView}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate >
</ListView >
Populate collection and set it as ItemSource of your list
List<string> temperatures = new List<string>();
// Generate 10 items
for (int num = 1; num <= 10; num++)
{
temperatures.Add("number" + num);
}
AddTermsListView.ItemsSource = temperatures;
Please note that 'Items' is not your Item Source Collection Name. It Gets the collection used to generate the content of the ItemsControl.
And if you want to show the index with each item, it s better to add an extra Index property to your model class & increment it with the item when building list Item Source.

Related

UWP Bind to ObservableCollection declaratively

I have a simple UWP page; there is a public ObservableCollection in the page code-behind:
public ObservableCollection<Book> MyObservableColl{ get; } = new ObservableCollection<Book>();
(note the collection consists of a single item)
I would like to bind to the collection; here is what I tried:
<StackPanel x:Name="stackPanel"
Grid.Row="2"
Margin="50"
DataContext="{x:Bind MyObservableColl, Mode=OneWay}">
<TextBox x:Name="txtTitle"
TextWrapping="Wrap"
Text="{x:Bind Title, Mode=OneWay}" />
</StackPanel>
The visual studio designer complains "the property Title was not found".
I appreciate any help to bind my text boxes to the Observable Collection.
the property Title was not found
txtTitle TextBox can't access Book item where in the MyObservableColl collection directly, you need place txtTitle under items control's ItemTemplate.
For example
<ListView ItemsSource="{x:Bind MyObservableColl, Mode=OneWay}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:Book">
<StackPanel>
<TextBox Text="{x:Bind Title}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
For more info please refer to listview document.
Update
For single item please refer to this xaml
<StackPanel
x:Name="stackPanel"
Grid.Row="2"
Margin="50"
DataContext="{x:Bind MyObservableColl[0], Mode=OneWay}">
<TextBox Text="{Binding Title}"/>
</StackPanel>

How to find LongListMuliselector inside another ListBox

I need to find the LongListMultiSelector inside ListBox .
<ListBox x:Name="ListBoxName" Width="400">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Bewise:ExpanderControl x:Name="bewiseControl" HeaderText="{Binding Title, Mode=OneWay}" Width="400" >
<Bewise:ExpanderControl.ContentArea>
<toolkit:LongListMultiSelector ItemsSource="{Binding LstProdcuts}" x:Name="LongList">
<toolkit:LongListMultiSelector.ItemTemplate >
<DataTemplate>
<StackPanel >
<TextBlock Text="{Binding Title}" />
</StackPanel>
</DataTemplate>
</toolkit:LongListMultiSelector.ItemTemplate>
</toolkit:LongListMultiSelector>
</Bewise:ExpanderControl.ContentArea>
</Bewise:ExpanderControl>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
i need to access LongList inside ListBoxName.I needed this LongList to get the selected item and itemSource or to add item to the selecteditem of the list
You could use the VisualTreeHelper class in order to access elements within.
Example!

WP7 - Is it possible to selecte the item from list on button click time

I want to select the list item when I click the button(Which is inside the list box for every row).
Now I have try like this:-
<ListBox Height="444"
ItemsSource="{Binding StudentDetails,Mode=TwoWay}"
HorizontalAlignment="Left" Margin="2,34,0,0"
Name="listBox1" VerticalAlignment="Top"
Width="476" BorderBrush="#00410D0D"
SelectedIndex="{Binding MemberPrivacy,Mode=TwoWay}"
SelectedItem="{Binding SelectedStudent, Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Gray" Padding="5" BorderThickness="1">
<StackPanel Orientation="Horizontal">
<Border BorderBrush="Wheat" BorderThickness="1">
<Image Name="ListPersonImage" Source="{Binding PersonImage}" Height="100" Width="100" Stretch="Uniform" Margin="10,0,0,0"/>
</Border>
<TextBlock Text="{Binding FirstName}" Name="firstName" Width="200" Foreground="White" Margin="10,10,0,0" FontWeight="SemiBold" FontSize="22" />
<Image Height="50" Source="{Binding addImage}" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="50" />
<Button Margin="-100,0,0,0" Height="80" Width="80" DataContext="{Binding DataContext, ElementName=listBox1}" Command="{Binding addPerson}" >
<Button.Background>
<ImageBrush ImageSource="{Binding addImage, Converter={StaticResource pathToImageConverter}}" Stretch="Fill" />
</Button.Background>
</Button>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
My View Model:-
public ListBoxEventsViewModel()
{
addPerson = new ReactiveAsyncCommand();
addPerson.Subscribe(x =>
{
MessageBox.Show("Test Button Selected..");
});
}
Here I can show the message box when I click the button. But I can not select the list item. Please let me know to solve this problem.
Thanks in advance.
View Model:-
List box selected Item:-
public ListBoxEventsModel _SelectedStudent;
public ListBoxEventsModel SelectedStudent
{
get { return _SelectedStudent; }
set
{
this.RaiseAndSetIfChanged(x => x.SelectedStudent, value);
MessageBox.Show("Selected index==>" + SelectedStudent.FirstName);
}
}
Here it showing the selected name when I click the list item. But this same thing I want to write it for the button(addImage)
Bind the SelectedItem on the ListBox to a "SelectedItem" property on the ViewModel.
eg SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
then on the view model just add a property of SelectedItem, then you can just set that from in your subscribe.

how to make listbox is resizable inside its parent?

In a user control, I put a listbox which is bound to a dynamic datasource. This usercontrol will be in a popup window. I want to this list box can fill the rest of space of the window. Here is the Xaml I tried:
<ComboBox x:Name="cmbx1" Grid.Column="0" Grid.Row ="0" Margin="5"
Width="150" VerticalAlignment="Center" HorizontalAlignment="Left" SelectionChanged="filters_SelectionChanged">
......
</ComboBox>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Grid.Column="1" Grid.Row="0">
<Button Content="Test" Margin="5" Click="Button_Add" />
</StackPanel>
<DataGrid x:Name="ListGrid" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
......
</DataGrid>
<ComboBox x:Name="cmb2" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="5">
......
</ComboBox>
<ListBox x:Name="lstSharing" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,0,10,0"
Width="{Binding Width, ElementName=ListGrid}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<tkit:WrapPanel Orientation="Horizontal" MaxWidth="650" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="3" Width="Auto">
<CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}" />
<TextBlock Text="{Binding ItemName}" Width="120" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
What I want it height and width of list box can be setup dynamically based on windows size, the items bound to list box. But it is not working properly. Initially, the listbox has no scrollbar, I need to resize window manually so that scrollbar on display. I can not dynamically to change with, so I put MaxWidth =600. Otherwise, it always display all item in one row.
How to resolve this problem?
This is untested, but I would try something like this:
<ListBox x:Name="lstSharing"
Grid.Row="3"
Grid.Column="0"
Grid.ColumnSpan="2"
Margin="0,0,10,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<tkit:WrapPanel Orientation="Horizontal"
MaxWidth="{Binding ElementName=lstSharing, Path=ActualWidth}" />
</ItemsPanelTemplate>
It's a little difficult to know whether this will work without seeing the parent containers, but it should point you in the right direction.

Access property of DataContext in ItemTemplate

My datacontext has two properties: Items which is a collection and DetailsVisiblity which is enum of type Visiblity.
On the page I have a Listbox with ItemsSource="{Binding Entries}". Inside the DataTemplate, I can bind stuff to properties of Items, but how do I get access to DetailsVisiblity which is a property of DataContext?
DataContext has two properties: ObservableCollection<Item> Entries, and Visibility DetailsVisiblity. Item class has two properties: Title and Details.
Here is the view. How do I bind Visiblity of the second TextBlock to DetailsVisiblity property?
<ListBox ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Title}" />
<TextBlock Text="{Binding Details}" Visibility="{Binding ???}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You could name the ListBox and in the Binding you reference it with ElementName, and in Path you use DataContext.DetailsVisibility
<ListBox x:Name="listBox" ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" />
<TextBlock Text="{Binding Details}"
Visibility="{Binding ElementName=listBox,
Path=DataContext.DetailsVisibilty}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>