Develop Reference

WPF : adding a Button as "Show More" where on click of it would load remaining items in the itemControl which is already in Binding a Collection

I am bit new to WPF (XAML) and I have an ItemsControl bound to a list with a MyCollections property . Now my requirement is initially to show only 1st element from the list and having a Show More button option at the end of list. A click on it would show the rest of the items from the collection.
This is my XAML so far, displaying the whole collection:
<ItemsControl x:Name="ContentRoot" ItemsSource="{Binding MyCollections}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<grid>
<TextBox Text="{Binding }" />
<TextBox Text="{Binding }" />
</grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

You can have both a ContentControl (which displays the first item of the collection) and an ItemsControl (which displays the whole collection) displayed only when a ToggleButton is checked for example.
<StackPanel>
<StackPanel.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
<DataTemplate DataType="{x:Type local:MyViewModel}">
<Grid>
<TextBox Text="{Binding}" />
</Grid>
</DataTemplate>
</StackPanel.Resources>
<ContentControl Content="{Binding MyCollection[0]}"/>
<ToggleButton x:Name="toggle" Content="Show more"/>
<ItemsControl ItemsSource="{Binding MyCollection}" Visibility="{Binding ElementName=toggle, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}"/>
</StackPanel>
You can then adapt this to fit your exact needs.

Change visibility of one itemscontrol via checkbox in another

I have two ItemsControls with the same ItemsSource. One has some controls for each item, the other has a checkbox for each item. The controls in them are dynamically added. How can I bind the visibility of the first ItemsControls to the corresponding checkbox in the other ItemsControls ?
Here's the first ItemsControl containing multiple TextBlocks in the row. Note: I want to hide the whole row of controls.
<ItemsControl ItemsSource="{Binding VehicleCollection}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock />
<TextBlock />
<TextBlock />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Here's the second ItemsControl with the checkboxes:
<ItemsControl ItemsSource="{Binding VehicleCollection}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<CheckBox Content="{Binding Name}"
IsChecked="True" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
So what happens is, for each item in VehicleCollection, a new row of textblocks is added for the first ItemsControl, and a checkbox is added for the second ItemsControl. These should relate to each other for example: If I uncheck the first checkbox, the first row for the other ItemsControl should be hidden.
I know how to do the booltovis converter, just not sure on how to relate these two ItemsControls.
Edit: These are both in the mainwindow.xaml by the way.

In order to show or hide an item of the first ItemsControl, add an IsVisible property to your Vehicle class (i.e. the element type of the VehicleCollection) and bind the Visibility of the item's ContentPresenter to the IsVisible property in an ItemContainerStyle:
<ItemsControl ItemsSource="{Binding VehicleCollection}">
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Visibility"
Value="{Binding IsVisible,
Converter={StaticResource BooleanToVisibilityConverter}}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
In the other ItemsControl, bind the IsChecked property of the CheckBox to the IsVisible property:
<ItemsControl ItemsSource="{Binding VehicleCollection}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Name}" IsChecked="{Binding IsVisible}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Of course make sure that class Vehicle implements INotifyPropertyChanged and fires the PropertyChanged event when the IsVisible property changes.

You should be able to manage this by adding a boolean Property in your Vehicle class, which I presume is the basis for your VehicleCollection. Something like: IsSelected.
Then you can modify your XAML as shown below:
<ItemsControl ItemsSource="{Binding VehicleCollection}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Visibility="{Binding IsSelected,Converter={StaticResource boolToVisConverter}}"/>
<TextBlock Visibility="{Binding IsSelected,Converter={StaticResource boolToVisConverter}}"/>
<TextBlock Visibility="{Binding IsSelected,Converter={StaticResource boolToVisConverter}}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl ItemsSource="{Binding VehicleCollection}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<CheckBox Content="{Binding Name}"
IsChecked="{Binding IsSelected}" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
This is untested XAML, as I just typed it into the answer. Might need a tweak.

How to create a wpf template with nested datatemplate (datatemplate in datatemplate)

I'm totaly new to wpf. I try to create a nested datatemplate like this layout (datatemplate inside another datatemplate). I managed to create a datatemplate and to connect to "Object A" in an ObservableCollection, which worked really well. Now I need to have a nested ObservableCollection in each Object A to display Object B and Object C in columns. But I don't really know how to do that and can't find examples.
Maybe anyone could give me a hint?
Thanks and regards,
Marlene

Assuming you're using a ListView or ListBox to display a collection of Object A (lets call it ObjectACollection), and that Object A has properties named (in this example) ObjectBCollection and ObjectCCollection you could do something like this:
<UserControl xmlns:namespaceA="clr-namespace:MyProj.Models.ObjectANamespace"
xmlns:namespaceB="clr-namespace:MyProj.Models.ObjectBNamespace"
xmlns:namespaceC="clr-namespace:MyProj.Models.ObjectCNamespace" >
<ListBox ItemsSource="{Binding ObjectACollection}">
<ListBox.ItemTemplate>
<DataTemplate DataType="namespaceA:ObjectA">
<StackPanel Orientation="Horizontal">
<ListBox ItemsSource="{Binding ObjectBCollection}">
<ListBox.ItemTemplate>
<DataTemplate DataType="namespaceB:ObjectB">
<TextBlock Text="{Binding ObjectBProperty}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox ItemsSource="{Binding ObjectCCollection}">
<ListBox.ItemTemplate>
<DataTemplate DataType="namespaceC:ObjectC">
<TextBlock Text="{Binding ObjectCProperty}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</UserControl>

Set Datacontext of an ItemTemplate explicitly

I have the following code below. The WordList is an ObservableCollection of Word's.
The thing I am trying to accomplish is setting the DataContext of each item to a wrapper class NewWordViewModel instead of the Word objects which is set by default. The CorrespondingWord is a dependency property of the NewWordViewModel.
The problem is xaml code creates a NewWordViewModel and sets it as DataContext but does not set the CorrespondingWord property to the actual Word object.
Is there a xaml way to set this property?
<ItemsControl ItemsSource="{Binding WordList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ui:NewWord>
<ui:NewWord.DataContext>
<viewModels:NewWordViewModel CorrespondingWord="{Binding}"/>
</ui:NewWord.DataContext>
</ui:NewWord>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

You can use a proxy to hold the implicit DataContext in each item and set the Binding to that normally, like this:
<ItemsControl ItemsSource="{Binding WordList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border>
<Border.Resources>
<DiscreteObjectKeyFrame x:Key="proxy" Value="{Binding}"/>
</Border.Resources>
<ui:NewWord>
<ui:NewWord.DataContext>
<viewModels:NewWordViewModel
CorrespondingWord="{Binding Value, Source={StaticResource proxy}}"/>
</ui:NewWord.DataContext>
</ui:NewWord>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Wpf collapse item in ItemsControl with animation (slideToggle for example)

I have:
<ItemsControl ItemsSource="{Binding Blocks}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name}"/>
<StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Class Block has properties string Name and bool Visible.
What to add to this xaml to animate item disappearingand appearing when Visible property is changed? (for example by decreasing/increasing Height of item - slideToggle)