I can't bind with the IsExpanded property on my treeview

Question

I'm trying to bind with an IsExpanded property, but without success so far. I need to know when one of the groups is expanded.

 <TreeView Grid.Row="1">

            <!--  Encontrados  -->
            <TreeViewItem
                FontWeight="Bold"
                IsExpanded="True"
                ItemsSource="{Binding Banco.Grupos}">
                <TreeViewItem.Header>
                    <StackPanel Orientation="Horizontal">
                        <materialDesign:PackIcon
                            Width="20"
                            Foreground="Green"
                            Kind="Done" />
                        <TextBlock Text="ENCONTRADOS: " />
                        <TextBlock Text="{Binding SaldoEncontrados, StringFormat='{}{0:C}', ConverterCulture='PT-BR'}" />
                    </StackPanel>
                </TreeViewItem.Header>
                <TreeViewItem.ItemTemplate>
                    
                    <HierarchicalDataTemplate  DataType="{x:Type model:Grupo}" ItemsSource="{Binding Transações}">
                                                     
                        <StackPanel Orientation="Horizontal">                               
                            <TextBlock Text="{Binding Nome, StringFormat='{}{0}: '}" />
                            <TextBlock Text="{Binding ValorTotal, StringFormat='{}{0:C}', ConverterCulture='PT-BR'}" />
                        </StackPanel>

                        <HierarchicalDataTemplate.ItemTemplate>                                
                            <DataTemplate>                                    
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="auto" />
                                        <ColumnDefinition Width="auto" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="auto" />
                                    </Grid.ColumnDefinitions>

                                    <CheckBox
                                        Grid.Column="0"
                                        FontWeight="Normal"
                                        IsChecked="{Binding isEnabled}" />

                                    <TextBlock
                                        Grid.Column="1"
                                        FontWeight="Normal"
                                        Text="{Binding Transação.DataDaTransação, StringFormat='dd/MM/yyyy'}" />

                                    <TextBlock
                                        Grid.Column="2"
                                        Margin="10,0,10,0"
                                        FontWeight="Normal"
                                        Text="{Binding Transação.Historico}" />

                                    <TextBlock
                                        Grid.Column="3"
                                        HorizontalAlignment="Right"
                                        FontWeight="Normal"
                                        Text="{Binding Transação.Valor, StringFormat='{}{0:C}', ConverterCulture='PT-BR'}" />
                                </Grid>
                            </DataTemplate>
                        </HierarchicalDataTemplate.ItemTemplate>
                    </HierarchicalDataTemplate>

                </TreeViewItem.ItemTemplate>
            </TreeViewItem>
            <!--  Não Encontrados  -->
            <TreeViewItem
                FontWeight="DemiBold"
                IsExpanded="False"
                ItemsSource="{Binding TransaçõesNãoEncontradas}">
                <TreeViewItem.Header>
                    <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
                        <materialDesign:PackIcon
                            Width="20"
                            Foreground="Red"
                            Kind="Error" />
                        <TextBlock Text="NÃO ENCONTRADOS: " />
                        <TextBlock Text="{Binding SaldoNaoEncontrados, StringFormat='{}{0:C}', ConverterCulture='PT-BR'}" />
                    </StackPanel>
                </TreeViewItem.Header>
                <TreeViewItem.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto" />
                                <ColumnDefinition x:Name="Coluna1" Width="*" />
                                <ColumnDefinition Width="auto" />
                            </Grid.ColumnDefinitions>
                            <TextBlock
                                Grid.Column="0"
                                FontWeight="Normal"
                                Text="{Binding DataDaTransação, StringFormat='dd/MM/yyyy'}" />
                            <TextBlock
                                Grid.Column="1"
                                Margin="10,0,10,0"
                                FontWeight="Normal"
                                Text="{Binding Historico}" />
                            <TextBlock
                                Grid.Column="2"
                                HorizontalAlignment="Right"
                                FontWeight="Normal"
                                Text="{Binding Valor, StringFormat='{}{0:C}', ConverterCulture='PT-BR'}" />
                        </Grid>
                    </DataTemplate>
                </TreeViewItem.ItemTemplate>
            </TreeViewItem>
        </TreeView>

My group class:

public class Grupo
{
   
    public int Id { get; set; }       
    public int BancoId { get; set; }
    public string Nome { get; set; }                
    public List<Transações> Transações { get; set; }      
    public decimal ValorTotal { get; set; }       
    public bool isExpanded { get; set; } = false;              
    public bool isZeroEnabled { get; set; }valores
}

public record Transações(int pk, int fk, bool isEnabled, OfxTransação Transação)
{
    public bool isEnabled { get; set; } = isEnabled;
}

XAML:

Could someone help me bind the treeview's IsExpanded property so that I can know when a "Group" is expanded.

I created an example of my code: https://github.com/Foiolag/TreeviewExample

BionicCode · Answer 1 · 2020-12-27T10:03:00.587

0

The DataContext of the item container (in this case the TreeViewItem) is always the data item itself. With this in mind you can setup the binding using a Style:

<Style TargetType="TreeViewItem">
  <Setter Property="IsExpanded" 
          Value="{Binding IsExpanded, Mode=TwoWay}" />
</Style>

edited Dec 27 '20 at 10:03

answered Dec 27 '20 at 09:55

BionicCode

1
4
28
44

score 0 · Accepted Answer · answered Dec 27 '20 at 10:34

You can bind the IsExpanded property via ItemContainerStyle. Make sure to remove the explicite IsExpanded="True"

<!--  Encontrados  -->
<TreeViewItem FontWeight="Bold"
              ItemsSource="{Binding Banco.Grupos}">
    <TreeViewItem.ItemContainerStyle>
      <Style TargetType="TreeViewItem">
        <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}"/>
      </Style>
    </TreeViewItem.ItemContainerStyle>

Hint 1: This style will be inherited over all children, the application will also try to bind to the non existing IsExpanded property on your Transações object. This won't throw any exceptions, just binding errors. For the sake of consistency, I would rather implement the IsExpanded property on all children.

Hint 2: Your model classes are not bindable (do not notify property changes). If you change the properties after the view initialization, the view won't react to your changes. You have to implement INotifyPropertyChanged or use a base class like BindableBase. Read this. If the properties are intended for read-only use, better to make them read-only (remove setters).

Hint 3: Please avoid using special characters for your variables and class names

I can't bind with the IsExpanded property on my treeview

2 Answers2