Início / coding / Perguntas / 79555577
Accepted
Yaya0306
Asked: 2025-04-04 22:22:45 +0800 CST

Não consigo encontrar uma maneira de alterar o tamanho do botão de alternância do WPF Treeview

  • 772

Tenho um aplicativo em produção com um controle TreeView, mas quando o cliente quer expandir ou recolher a árvore, ele acha muito chato clicar no botão de alternância porque o botão é muito pequeno. Tentei de tudo para remodelar o botão, mas ou ele mexe com meu outro controle ou eu perco completamente a funcionalidade de Expandir/Recolher quando consigo estilizá-lo. Aqui está o botão: insira a descrição da imagem aqui

Veja como meu código funciona:

<ListBox.ItemTemplate>
    <DataTemplate>
        <TreeView x:Name="EntityTreeView" BorderThickness="0">
            <HeaderedContentControl>
                <StackPanel Orientation="Horizontal" Margin="0,0,0,0" >
                    
                    .....

                </StackPanel>
            </HeaderedContentControl>
            <TreeViewItem>
                <ScrollViewer HorizontalScrollBarVisibility="Auto" MaxHeight="300">
                    <StackPanel Orientation="Horizontal">
                        <Grid Name="Cursor" Height="50" Width="50" Focusable="False">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                           ....
                        </Grid>
                        <!-- Entity's parameter list -->
                        <ListBox Grid.Column="1" x:Name="parametersList" ItemsSource="{Binding Path=Parameters, UpdateSourceTrigger=PropertyChanged}" BorderThickness="0">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal" Visibility="{Binding Path=Visible}">
                                        .....
                                    </StackPanel>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </StackPanel>
                </ScrollViewer>
            </TreeViewItem>
        </TreeView>
    </DataTemplate>
</ListBox.ItemTemplate>

É isso que estou tentando fazer funcionar:

</ResourceDictionary>
    <!-- Style for TreeView expanders that are too small -->
    <!-- Toggle Button -->
    <Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="Width" Value="24"/>
        <Setter Property="Height" Value="24"/>
        <Setter Property="Padding" Value="4"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid Width="24" Height="24">
                        <ContentPresenter/>
                        <Path x:Name="Arrow" Fill="Black" Data="M 5,10 L 15,10 L 10,15 Z"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="Arrow" Property="Data" Value="M 5,5 L 15,10 L 5,15 Z"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!-- TreeViewItem Style (Automatically Applies Expander Style) -->
    <Style TargetType="TreeViewItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TreeViewItem">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <!-- Custom Expander Button -->
                        <ToggleButton x:Name="Expander"
                              IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" 
                              Style="{StaticResource ExpandCollapseToggleStyle}"/>

                        <!-- TreeViewItem Header -->
                        <ContentPresenter Grid.Column="1" ContentSource="Header" Margin="5,0,0,0"/>

                        <!-- Items Presenter -->
                        <ItemsPresenter Grid.Column="1" Margin="20,0,0,0"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>
c#

1 respostas

  1. Best Answer

    Adicionei uma borda ao seu ToggleButton para facilitar o clique.

    Botão de alternância:

                <Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
                <Setter Property="Focusable" Value="False"/>
                <Setter Property="Width" Value="24"/>
                <Setter Property="Height" Value="24"/>
                <Setter Property="Padding" Value="4"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                            <Grid Width="24" Height="24">
                                <Border Background="White" Opacity="0.001"/>
                                <ContentPresenter/>
                                <Path x:Name="Arrow" Fill="Black" Data="M 5,10 L 15,10 L 10,15 Z"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter TargetName="Arrow" Property="Data" Value="M 5,5 L 15,10 L 5,15 Z"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    Item de exibição em árvore:

                <Style TargetType="TreeViewItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TreeViewItem">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition MinWidth="19" Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>

                                <ToggleButton Margin="-1,0,0,0" x:Name="Expander" Style="{StaticResource ExpandCollapseToggleStyle}" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"/>
                                <Border Name="Bd" Grid.Column="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
                                    <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" MinWidth="20"/>
                                </Border>
                                <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" 
                    Grid.Column="1" Grid.ColumnSpan="2"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsExpanded" Value="false">
                                    <Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed"/>
                                </Trigger>
                                <Trigger Property="HasItems" Value="false">
                                    <Setter TargetName="Expander" Property="Visibility" Value="Hidden"/>
                                </Trigger>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="HasHeader" Value="false"/>
                                        <Condition Property="Width" Value="Auto"/>
                                    </MultiTrigger.Conditions>
                                    <Setter TargetName="PART_Header" Property="MinWidth" Value="75"/>
                                </MultiTrigger>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="HasHeader" Value="false"/>
                                        <Condition Property="Height" Value="Auto"/>
                                    </MultiTrigger.Conditions>
                                    <Setter TargetName="PART_Header" Property="MinHeight" Value="19"/>
                                </MultiTrigger>
                                <Trigger Property="IsSelected" Value="true">
                                    <Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                                </Trigger>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsSelected" Value="true"/>
                                        <Condition Property="IsSelectionActive" Value="false"/>
                                    </MultiTrigger.Conditions>
                                    <Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                                </MultiTrigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    insira a descrição da imagem aqui

    • 0

relate perguntas