2010-08-09 15 views
2

J'ai un contrôle TreeView où les nœuds sont construits dynamiquement en utilisant un HierarchicalDataTemplate. En d'autres termes, aucun TreeViewItems n'est explicitement défini dans le XAML. TreeViewItems sont créés automatiquement lorsque les données sont liées à l'exécution (je peux les voir dans Silverlight Spy).Personnalisation de développer/réduire les symboles dans Silverlight TreeView en utilisant HierarchicalDataTemplate

Est-il possible de personnaliser les symboles d'expansion/réduction (chemins) dans TreeView dans ce cas? Les clients détestent les triangles par défaut car ils sont difficiles à voir et à utiliser. J'ai trouvé des références à faire ce genre de chose, mais seulement où les TreeViewItems sont configurés explicitement, de sorte qu'un Style peut être défini dans le XAML de la page. Une autre façon de poser cette question est de savoir s'il est possible de définir et d'appliquer un style pour TreeViewItem lorsqu'ils ne sont pas dans le balisage XAML (ou ajoutés dans du code comme TreeViewItem).

Répondre

1

Oui, vous devrez modifier la propriété de style de TreeViewItem. En voici un que j'utilise ...

<Style x:Key="TreeViewContainerStyle" TargetType="controls:TreeViewItem"> 
    <Setter Property="Padding" Value="3"/> 
    <Setter Property="HorizontalContentAlignment" Value="Left"/> 
    <Setter Property="VerticalContentAlignment" Value="Top"/> 
    <Setter Property="Background" Value="Transparent"/> 
    <Setter Property="Foreground" 
      Value="Black" /> 
    <Setter Property="BorderThickness" Value="1"/> 
    <Setter Property="Cursor" Value="Arrow"/> 
    <Setter Property="Margin" Value="-5,0,0,0"/> 
    <Setter Property="IsTabStop" Value="True"/> 
    <Setter Property="TabNavigation" Value="Once"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="controls:TreeViewItem"> 
       <Grid Background="{x:Null}"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="25"/> 
         <ColumnDefinition Width="*"/> 
        </Grid.ColumnDefinitions> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="25"/> 
         <RowDefinition Height="*"/> 
        </Grid.RowDefinitions> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"/> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Header" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0"> 
              <DiscreteObjectKeyFrame.Value> 
               <SolidColorBrush Color="#FF999999"/> 
              </DiscreteObjectKeyFrame.Value> 
             </DiscreteObjectKeyFrame> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="MouseOver"> 
           <Storyboard> 
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)"> 
             <EasingColorKeyFrame KeyTime="00:00:00" Value="#FF90B5D5"/> 
            </ColorAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="SelectionStates"> 
          <VisualState x:Name="Unselected"/> 
          <VisualState x:Name="Selected"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" Storyboard.TargetName="select" Storyboard.TargetProperty="Opacity" To=".75"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="SelectedInactive"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" Storyboard.TargetName="inactive" Storyboard.TargetProperty="Opacity" To=".2"/> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="HasItemsStates"> 
          <VisualState x:Name="HasItems"/> 
          <VisualState x:Name="NoItems"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="Visibility"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="ExpansionStates"> 
          <VisualState x:Name="Collapsed"/> 
          <VisualState x:Name="Expanded"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ItemsHost" Storyboard.TargetProperty="Visibility"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 

        <ToggleButton x:Name="ExpanderButton" IsTabStop="False" TabNavigation="Once" HorizontalAlignment="Stretch"> 
         <ToggleButton.Template> 
          <ControlTemplate TargetType="ToggleButton"> 
           <Grid x:Name="Root" Background="Transparent" Opacity=".6"> 
            <VisualStateManager.VisualStateGroups> 
             <VisualStateGroup x:Name="CommonStates"> 
              <VisualState x:Name="Normal"/> 
              <VisualState x:Name="MouseOver"> 
              <Storyboard> 
                <DoubleAnimation Duration="0" Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1.7"/> 
               </Storyboard> 
              </VisualState> 
              <VisualState x:Name="Disabled"> 
               <Storyboard> 
                <DoubleAnimation Duration="0" Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1.7"/> 
               </Storyboard> 
              </VisualState> 
             </VisualStateGroup> 
             <VisualStateGroup x:Name="CheckStates"> 
              <VisualState x:Name="Unchecked"/> 
              <VisualState x:Name="Checked"> 
               <Storyboard> 
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MinusSign" Storyboard.TargetProperty="(UIElement.Opacity)"> 
                 <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/> 
                </DoubleAnimationUsingKeyFrames> 
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="PlusSign" Storyboard.TargetProperty="(UIElement.Opacity)"> 
                 <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/> 
                </DoubleAnimationUsingKeyFrames> 

               </Storyboard> 
              </VisualState> 
             </VisualStateGroup> 
            </VisualStateManager.VisualStateGroups> 

            <Grid> 

             <Rectangle x:Name="PlusSign" HorizontalAlignment="Center" VerticalAlignment="Top" Width="20" Height="20" Visibility="Visible" Opacity="100"> 
              <Rectangle.Fill> 
               <ImageBrush Stretch="Fill" ImageSource="./icon_expand_hover.png"/> 
              </Rectangle.Fill> 

             </Rectangle> 

             <Rectangle x:Name="MinusSign" HorizontalAlignment="Center" VerticalAlignment="Top" Width="20" Height="20" Visibility="Visible" Opacity="0"> 
              <Rectangle.Fill> 
               <ImageBrush Stretch="Fill" ImageSource="./icon_collapse_hover.png"/> 
              </Rectangle.Fill> 
             </Rectangle> 

            </Grid> 

           </Grid> 
          </ControlTemplate> 
         </ToggleButton.Template> 
        </ToggleButton> 
        <Rectangle x:Name="select" StrokeThickness="1" RadiusX="2" RadiusY="2" IsHitTestVisible="False" Opacity="0" Grid.Column="1" HorizontalAlignment="Stretch" Width="Auto" Margin="0,0,5,0"> 
         <Rectangle.Stroke> 
          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
           <GradientStop Color="#00000000"/> 
           <GradientStop Color="#7F000000" Offset="1"/> 
           <GradientStop Color="#06000000" Offset="0.379"/> 
          </LinearGradientBrush> 
         </Rectangle.Stroke> 
         <Rectangle.Fill> 
          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
           <GradientStop Color="#00000000"/> 
           <GradientStop Color="#7F000000" Offset="1"/> 
           <GradientStop Color="#06000000" Offset="0.659"/> 
          </LinearGradientBrush> 
         </Rectangle.Fill> 
        </Rectangle> 
        <Rectangle x:Name="inactive" Fill="#FF999999" Stroke="#FF333333" StrokeThickness="1" RadiusX="2" RadiusY="2" IsHitTestVisible="False" Opacity="0" Grid.Column="1" HorizontalAlignment="Left" Width="6"/> 
        <Button x:Name="Header" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" IsTabStop="False" TabNavigation="Once" ClickMode="Hover" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" Grid.Column="1"> 
         <Button.Template> 
          <ControlTemplate TargetType="Button"> 
           <Grid Background="{TemplateBinding Background}"> 
            <VisualStateManager.VisualStateGroups> 
             <VisualStateGroup x:Name="CommonStates"> 
              <VisualState x:Name="Normal"/> 
              <VisualState x:Name="Pressed"> 
               <Storyboard> 
                <DoubleAnimation Duration="0" Storyboard.TargetName="hover" Storyboard.TargetProperty="Opacity" To=".5"/> 
               </Storyboard> 
              </VisualState> 
              <VisualState x:Name="Disabled"> 
               <Storyboard> 
                <DoubleAnimation Duration="0" Storyboard.TargetName="content" Storyboard.TargetProperty="Opacity" To=".55"/> 
               </Storyboard> 
              </VisualState> 
             </VisualStateGroup> 
            </VisualStateManager.VisualStateGroups> 
            <Rectangle x:Name="hover" Fill="#FFBADDE9" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="2" RadiusY="2" IsHitTestVisible="False" Opacity="0"/> 
            <ContentPresenter x:Name="content" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/> 
           </Grid> 
          </ControlTemplate> 
         </Button.Template> 
        </Button> 
        <Border Visibility="Collapsed" x:Name="ItemsHost" Grid.Column="1" Grid.Row="1" CornerRadius="1,4,8,4" BorderThickness="1,1,1,1" Padding="5,0,0,0" Margin="-27,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
         <Border.Background> 
          <SolidColorBrush Color="AntiqueWhite" /> 
         </Border.Background> 
         <Border.BorderBrush> 
          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
           <GradientStop Color="#FF0D0A45" Offset="0"/> 
           <GradientStop Color="#FF0D0A45" Offset="1"/> 
           <GradientStop Color="#FF38435B" Offset="0.2"/> 
          </LinearGradientBrush> 
         </Border.BorderBrush> 
         <Grid> 
          <Rectangle Fill="{x:Null}" 
           RadiusX="8" RadiusY="8" 
           VerticalAlignment="Bottom" 
           HorizontalAlignment="Right" 
           Width="100" Height="40" 
           Margin="0,0,3,3"> 
           <Rectangle.Stroke> 
            <LinearGradientBrush EndPoint="1,1" StartPoint="0.7,0.7"> 
             <GradientStop Color="#00FFFFFF" Offset="0"/> 
             <GradientStop Color="#7FFFFFFF" Offset="1"/> 
            </LinearGradientBrush> 
           </Rectangle.Stroke> 
          </Rectangle> 
          <ItemsPresenter /> 
         </Grid> 
        </Border> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Notez le bouton à bascule.


Alors dans le code derrière vous ferait ...

myDynamicTreeViewItem.Style = (Style)this.Resources["TreeViewContainerStyle"]; 
+2

Merci pour la réponse. Dans mon cas, les TreeViewItems ne sont pas ajoutés via le code - ils sont créés dans les coulisses en utilisant le HierarchicalDataTemplate. Je n'ai donc pas d'accès immédiat à TreeViewItem pour définir son style. Si vous utilisez HierarchicalDataTemplate, comment accédez-vous aux TreeViewItems créés pour TreeView? –