erikT
erikT

Reputation: 21

How to bind to IsExpanded property - to persist the TreeView's expanded state?

In the ViewModel I have defined a bool ShouldExpand property, bound to it in from the TreeView's itemcontainerstyle - it does not work.

This answer (WinRT XAML Toolkit TreeView Save state) would've answered my question, but it does not work...

Is there a WORKING code snippet?

public class AgendaItemTreeView : ViewModelBase
{
    private string _title;
    private Visibility _documentGridVisibility = Visibility.Collapsed;
    private bool _shouldExpand;

    // Binding property - to display in a TreeView
    public string Title
    {
        get { return _title; }
        set { Set(ref _title, value); }
    }

    // To expand/collapse documents GridView
    public Visibility DocumentGridVisibility
    {
        get { return _documentGridVisibility; }
        set { Set(ref _documentGridVisibility, value); }
    }

    // Property to expand/collapse a node in a TreeView - does not work!
    public bool ShouldExpand
    {
        get { return _shouldExpand; }
        set { Set(ref _shouldExpand, value); }
    }

    // Nested agenda items
    public ObservableCollection<AgendaItemTreeView> AgendaItems { get; set; } = new ObservableCollection<AgendaItemTreeView>();

    // Documents of current agenda item
    public ObservableCollection<DocumentViewModel> Documents { get; set; } = new ObservableCollection<DocumentViewModel>();

    public DocumentViewModel SelectedItem { get; set; }

    public AgendaItemTreeView(AgendaItem agendaItem, string selectedTitle = "")
    {
        // Constructor populating the nested AgendaItem & Documents
    }
}

XAML:

<UserControl

    <UserControl.Resources>

        <!--<Style x:Key="TreeViewItemContainerStyle" TargetType="controls:TreeViewItem">
            <Setter Property="IsExpanded" Value="{Binding ShouldExpand, Mode=TwoWay}"/>
        </Style>-->

        <!-- Folder type Node, that can contain other 'folders' and 'files' -->
        <DataTemplate x:Key="TreeViewItemTemplate" x:DataType="vm:AgendaItemTreeView">
            <data:DataTemplateExtensions.Hierarchy>
                <data:HierarchicalDataTemplate ItemsSource="{Binding AgendaItems}" />
                <!-- When the next line used together with the Style TreeViewItemContainerStyle - the TreeView still does not expand the top level tree. The app C
                <!--<data:HierarchicalDataTemplate ItemsSource="{Binding AgendaItems}" ItemContainerStyle="{StaticResource TreeViewItemContainerStyle}"/>-->
            </data:DataTemplateExtensions.Hierarchy>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <ToggleButton x:Name="titleToggleBtn" Tapped="{x:Bind ExpandDocumentsCommand}">
                    <StackPanel Orientation="Horizontal">
                        <SymbolIcon Symbol="{x:Bind DocumentsIcon}" Margin="5,0"/>
                        <TextBlock Text="{Binding Title}"/>
                    </StackPanel>
                </ToggleButton>
                <GridView Grid.Row="1" x:Name="DocumentsGrid" ItemsSource="{Binding Documents}" ItemTemplate="{StaticResource ZoomedInTemplate}" Visibility="{Binding DocumentGridVisibility}" SelectedItem="{Binding SelectedItem}"/>
            </Grid>
        </DataTemplate>

        <!-- Nested 'file' type Node data template -->
        <DataTemplate x:Key="ZoomedInTemplate" x:DataType="vm:DocumentViewModel">
            <Border BorderBrush="Black" Padding="5" BorderThickness="1" Width="100">
                <Grid Tapped="{x:Bind TappedCommand}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Image Source="{Binding Thumbnail}" Width="60" Height="80" />
                    <TextBlock Grid.Row="1" Text="{x:Bind Title, Mode=OneWay}" VerticalAlignment="Center" Tapped="{x:Bind TappedCommand}"/>
                </Grid>
            </Border>
        </DataTemplate>

    </UserControl.Resources>

    <Grid d:DataContext="{d:DesignData /SampleData/AgendaItemTreeViewSampleData.xaml}">
        <controls:TreeView x:Name="myTreeView" 
                           ItemsSource="{x:Bind TreeItems}" 
                           ItemTemplate="{StaticResource TreeViewItemTemplate}" />

    </Grid>
</UserControl>

Upvotes: 0

Views: 424

Answers (0)

Related Questions