Partilhar via

Modelos e Estilos do TreeView

  • Artigo

Este tópico descreve os estilos e modelos para o controle TreeView. Você pode modificar o ControlTemplate padrão para dar ao controle uma aparência exclusiva. Para obter mais informações, consulte Criar um modelo para um controle.

Componentes do TreeView

O controle TreeView não tem nenhuma parte nomeada.

Quando você cria um ControlTemplate para um TreeView, seu modelo pode conter um ItemsPresenter dentro de um ScrollViewer. (O ItemsPresenter exibe cada item no TreeView; o ScrollViewer permite a rolagem dentro do controle). Se o ItemsPresenter não é o filho direto do ScrollViewer, você deve dar ao ItemsPresenter o nome, ItemsPresenter.

Estados do TreeView

A tabela a seguir lista os estados visuais para o controle TreeView.

Nome do VisualState Nome do VisualStateGroup Descrição
Válido Estados de Validação O controle usa a classe Validation e a propriedade Validation.HasError anexada é false.
FocoInválido Estados de Validação A propriedade anexada Validation.HasError indica que o controle true está com foco.
InválidoDesfocado Estados de Validação A propriedade anexada Validation.HasError está em true quando o controlo não tem foco.

Elementos do TreeViewItem

A tabela a seguir lista as partes nomeadas para o controle TreeViewItem.

Peça Tipo Descrição
PART_Header FrameworkElement Um elemento visual que contém esse conteúdo de cabeçalho do controle TreeView.

Estados de TreeViewItem

A tabela a seguir lista os estados visuais para o controle TreeViewItem.

Nome do VisualState Nome do VisualStateGroup Descrição
Normal Estados comuns O estado padrão.
MouseOver Estados comuns O ponteiro do mouse está posicionado sobre o TreeViewItem.
Desabilitado Estados comuns O TreeViewItem está desativado.
Focado FocusStates O TreeViewItem tem foco.
Desconcentrado FocusStates O TreeViewItem não tem foco.
Expandido Estados de Expansão O controle TreeViewItem é expandido.
Colapsado Expansão Estados O controlo TreeViewItem está colapsado.
HasItems TemEstadosDeItens O TreeViewItem possui itens.
Sem Itens TemEstadosDeItens O TreeViewItem não tem itens.
Selecionados Estados de Seleção O TreeViewItem está selecionado.
Selecionado Inativo Estados de Seleção O TreeViewItem está selecionado, mas não ativo.
Não selecionado Estados de Seleção A TreeViewItem não está selecionada.
Válido Estados de Validação O controle usa a classe Validation e a propriedade Validation.HasError anexada é false.
FocoInválido EstadosDeValidação A propriedade anexada Validation.HasError é true quando o controlo tem foco.
InválidoDesfocado Estados de Validação A propriedade Validation.HasError anexada é true tem o controle não tem foco.

Exemplo de TreeView ControlTemplate

O exemplo a seguir mostra como definir um ControlTemplate para o controle TreeView e seus tipos associados.

<Style x:Key="{x:Type TreeView}"
       TargetType="TreeView">
  <Setter Property="OverridesDefaultStyle"
          Value="True" />
  <Setter Property="SnapsToDevicePixels"
          Value="True" />
  <Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
          Value="Auto" />
  <Setter Property="ScrollViewer.VerticalScrollBarVisibility"
          Value="Auto" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="TreeView">
        <Border Name="Border"
                CornerRadius="1"
                BorderThickness="1">
          <Border.BorderBrush>
            <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
          </Border.BorderBrush>
          <Border.Background>
            <SolidColorBrush Color="{DynamicResource ControlLightColor}" />
          </Border.Background>
          <ScrollViewer Focusable="False"
                        CanContentScroll="False"
                        Padding="4">
            <ItemsPresenter />
          </ScrollViewer>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="ExpandCollapseToggleStyle"
       TargetType="ToggleButton">
  <Setter Property="Focusable"
          Value="False" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ToggleButton">
        <Grid Width="15"
              Height="13"
              Background="Transparent">
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CheckStates">
              <VisualState x:Name="Checked">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                 Storyboard.TargetName="Collapsed">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="{x:Static Visibility.Hidden}" />
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                 Storyboard.TargetName="Expanded">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="{x:Static Visibility.Visible}" />
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Unchecked" />
              <VisualState x:Name="Indeterminate" />
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Path x:Name="Collapsed"
                HorizontalAlignment="Left"
                VerticalAlignment="Center"
                Margin="1,1,1,1"
                Data="M 4 0 L 8 4 L 4 8 Z">
            <Path.Fill>
              <SolidColorBrush Color="{DynamicResource GlyphColor}" />
            </Path.Fill>
          </Path>
          <Path x:Name="Expanded"
                HorizontalAlignment="Left"
                VerticalAlignment="Center"
                Margin="1,1,1,1"
                Data="M 0 4 L 8 4 L 4 8 Z"
                Visibility="Hidden">
            <Path.Fill>
              <SolidColorBrush Color="{DynamicResource GlyphColor}" />
            </Path.Fill>
          </Path>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
<Style x:Key="TreeViewItemFocusVisual">
  <Setter Property="Control.Template">
    <Setter.Value>
      <ControlTemplate>
        <Border>
          <Rectangle Margin="0,0,0,0"
                     StrokeThickness="5"
                     Stroke="Black"
                     StrokeDashArray="1 2"
                     Opacity="0" />
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
<Style x:Key="{x:Type TreeViewItem}"
       TargetType="{x:Type TreeViewItem}">
  <Setter Property="Background"
          Value="Transparent" />
  <Setter Property="HorizontalContentAlignment"
          Value="{Binding Path=HorizontalContentAlignment,
    RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
  <Setter Property="VerticalContentAlignment"
          Value="{Binding Path=VerticalContentAlignment,
    RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
  <Setter Property="Padding"
          Value="1,0,0,0" />
  <Setter Property="Foreground"
          Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
  <Setter Property="FocusVisualStyle"
          Value="{StaticResource TreeViewItemFocusVisual}" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TreeViewItem}">
        <Grid>
          <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="19"
                              Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
          </Grid.RowDefinitions>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="SelectionStates">
              <VisualState x:Name="Selected">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Bd"
                                                Storyboard.TargetProperty="(Panel.Background).
                    (SolidColorBrush.Color)"
                                                >
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource SelectedBackgroundColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Unselected" />
              <VisualState x:Name="SelectedInactive">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Bd"
                                                Storyboard.TargetProperty="(Panel.Background).
                    (SolidColorBrush.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource SelectedUnfocusedColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="ExpansionStates">
              <VisualState x:Name="Expanded">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                 Storyboard.TargetName="ItemsHost">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="{x:Static Visibility.Visible}" />
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Collapsed" />
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <ToggleButton x:Name="Expander"
                        Style="{StaticResource ExpandCollapseToggleStyle}"
                        ClickMode="Press"
                        IsChecked="{Binding IsExpanded, 
            RelativeSource={RelativeSource TemplatedParent}}"/>
          <Border x:Name="Bd"
                  Grid.Column="1"
                  Background="{TemplateBinding Background}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="{TemplateBinding BorderThickness}"
                  Padding="{TemplateBinding Padding}">
            <ContentPresenter x:Name="PART_Header"
                              ContentSource="Header"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
          </Border>
          <ItemsPresenter x:Name="ItemsHost"
                          Grid.Row="1"
                          Grid.Column="1"
                          Grid.ColumnSpan="2"
                          Visibility="Collapsed" />
        </Grid>
        <ControlTemplate.Triggers>
          <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>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

O exemplo anterior usa um ou mais dos seguintes recursos.

<!--Control colors.-->
<Color x:Key="WindowColor">#FFE8EDF9</Color>
<Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
<Color x:Key="ContentAreaColorDark">#FF7381F9</Color>

<Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
<Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
<Color x:Key="DisabledForegroundColor">#FF888888</Color>

<Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
<Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>

<Color x:Key="ControlLightColor">White</Color>
<Color x:Key="ControlMediumColor">#FF7381F9</Color>
<Color x:Key="ControlDarkColor">#FF211AA9</Color>

<Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
<Color x:Key="ControlPressedColor">#FF211AA9</Color>


<Color x:Key="GlyphColor">#FF444444</Color>
<Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>

<!--Border colors-->
<Color x:Key="BorderLightColor">#FFCCCCCC</Color>
<Color x:Key="BorderMediumColor">#FF888888</Color>
<Color x:Key="BorderDarkColor">#FF444444</Color>

<Color x:Key="PressedBorderLightColor">#FF888888</Color>
<Color x:Key="PressedBorderDarkColor">#FF444444</Color>

<Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>
<Color x:Key="DisabledBorderDarkColor">#FF888888</Color>

<Color x:Key="DefaultBorderBrushDarkColor">Black</Color>

<!--Control-specific resources.-->
<Color x:Key="HeaderTopColor">#FFC5CBF9</Color>
<Color x:Key="DatagridCurrentCellBorderColor">Black</Color>
<Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color>

<Color x:Key="NavButtonFrameColor">#FF3843C4</Color>

<LinearGradientBrush x:Key="MenuPopupBrush"
                     EndPoint="0.5,1"
                     StartPoint="0.5,0">
  <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="0" />
  <GradientStop Color="{DynamicResource ControlMediumColor}"
                Offset="0.5" />
  <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill"
                     StartPoint="0,0"
                     EndPoint="1,0">
  <LinearGradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#000000FF"
                    Offset="0" />
      <GradientStop Color="#600000FF"
                    Offset="0.4" />
      <GradientStop Color="#600000FF"
                    Offset="0.6" />
      <GradientStop Color="#000000FF"
                    Offset="1" />
    </GradientStopCollection>
  </LinearGradientBrush.GradientStops>
</LinearGradientBrush>

Para obter o exemplo completo, consulte Styling with ControlTemplates Sample.

Ver também