TreeView Stilleri ve Şablonları

  • Makale

Bu konuda, denetimin stilleri ve şablonları TreeView açıklanmaktadır. Denetime benzersiz bir görünüm vermek için varsayılanı ControlTemplate değiştirebilirsiniz. Daha fazla bilgi için bkz . Denetim için şablon oluşturma.

TreeView Bölümleri

Denetimin TreeView adlandırılmış bölümü yok.

için bir ControlTemplateTreeViewoluşturduğunuzda, şablonunuz içinde bir ItemsPresenterScrollVieweriçerebilir. (içindeki ItemsPresenter her öğeyi TreeViewgörüntüler; ScrollViewer denetimin içinde kaydırmayı etkinleştirir). öğesinin ItemsPresenter doğrudan alt öğesi ScrollViewerdeğilse, adını ItemsPresentervermelisinizItemsPresenter.

TreeView Durumları

Aşağıdaki tabloda denetimin görsel durumları listelenmiştir TreeView .

VisualState Adı VisualStateGroup Adı Tanım
Geçerli ValidationStates Denetim sınıfını Validation kullanır ve Validation.HasError ekli özelliği ise şeklindedir false.
InvalidFocused ValidationStates Validation.HasError Ekli özelliğin true odağı denetimindedir.
InvalidUnfocused ValidationStates Validation.HasError Ekli özellik, true denetimin odağı yok.

TreeViewItem Bölümleri

Aşağıdaki tabloda, denetimin adlandırılmış bölümleri TreeViewItem listelenir.

Bölüm Türü Tanım
PART_Header FrameworkElement Denetimin bu üst bilgi içeriğini TreeView içeren görsel öğe.

TreeViewItem Durumları

Aşağıdaki tabloda denetim için TreeViewItem görsel durumlar listelenmiştir.

VisualState Adı VisualStateGroup Adı Tanım
Normal Commonstates Varsayılan durum.
Mouseover Commonstates Fare işaretçisi öğesinin TreeViewItemüzerine yerleştirilir.
Devre Dışı Commonstates TreeViewItem devre dışı bırakıldı.
Odaklı FocusStates Odak noktası TreeViewItem var.
Odaklanmamış FocusStates TreeViewItem odak noktası yok.
Genişletilmiş ExpansionStates Denetim TreeViewItem genişletilir.
Daraltılmış ExpansionStates Denetim TreeViewItem daraltıldı.
HasItems HasItemsStates öğelerine TreeViewItem sahiptir.
NoItems HasItemsStates öğesinde TreeViewItem öğe yok.
Seçili SelectionStates TreeViewItem seçilidir.
SelectedInactive SelectionStates TreeViewItem seçili ancak etkin değil.
Seçili değil SelectionStates TreeViewItem seçili değil.
Geçerli ValidationStates Denetim sınıfını Validation kullanır ve Validation.HasError ekli özelliği ise şeklindedir false.
InvalidFocused ValidationStates Validation.HasError Ekli özelliğin true odağı denetimindedir.
InvalidUnfocused ValidationStates Validation.HasError Ekli özellik, true denetimin odağı yok.

TreeView ControlTemplate Örneği

Aşağıdaki örnekte, denetim ve ilişkili türleri için TreeView nasıl tanımlanacağı ControlTemplate gösterilmektedir.

<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>

Yukarıdaki örnekte aşağıdaki kaynaklardan biri veya daha fazlası kullanılır.

<!--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>

Örneğin tamamı için bkz . ControlTemplates Örneği ile Stil Oluşturma.

Ayrıca bkz.