I am making a simple book editor.
In book edition window I want themes and subthemes to be displayed in hierarchical order, so I made an ItemsControl with complex data template to display them. What I have now is:
Themes are buttons and I want Listbox of Subthemes to be visible if corresponding Theme button is clicked (like if it was a drop-down list).
The problem is I am using MVVM and I can't just change IsVisible property of ListBox in OnClick event.
How can I do it without breaking and MVVM pattern?
This is my XAML code:
<ScrollViewer>
<Grid ColumnDefinitions="auto, *" RowDefinitions="auto">
<ItemsControl Grid.Column="0" Grid.Row="0" Items="{Binding Book.Themes}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Button Name="kekw" Content="{Binding Name}" />
<ListBox Items="{Binding Subthemes}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</ScrollViewer>
And this is View Model:
public class EditBookViewModel
{
private Book book;
public Book Book
{
get
{
return book;
}
set
{
book = value;
}
}
public EditBookViewModel(string name, string path)
{
book = new Book(name, path);
book.Themes = new LinkedList<Theme>();
book.Themes.AddLast(new Theme("Theme 1", "Page 1"));
book.Themes.AddLast(new Theme("Theme 2", "Page 2"));
book.Themes.AddLast(new Theme("Theme 3", "Page 3"));
foreach(Theme t in book.Themes)
{
t.Subthemes = new LinkedList<Subtheme>();
t.Subthemes.AddLast(new Subtheme("Subtheme 1", "Page 1"));
t.Subthemes.AddLast(new Subtheme("Subtheme 2", "Page 2"));
t.Subthemes.AddLast(new Subtheme("Subtheme 3", "Page 3"));
}
}
}
I suspect you are asking something about WPF data binding. I am Xamarin.Forms developer, I can advise what I will do if I will do it for Xamarin.Forms.
First of all, update 'Theme' class to have one bool property to control if the Subthemes should be shown or hidden. (make sure the class implement INotifyPropertyChanged, if you are using ReactiveUI, you can inherite from ReactiveObject);
Create a Command in your VM, and bind the <Button Name="kekw" Content="{Binding Name}" />
to that command to update the boolean property value. (and the CommandParameter bind to the theme. In Xamarin.Forms it is ".");
Bind ListBox.IsVisible to that boolean property.