2010-08-09 98 views
2

我有一个TreeView控件,其中的节点是使用HierarchicalDataTemplate动态构建的。换句话说,在XAML中没有明确定义TreeViewItems。 TreeViewItems是在运行时绑定数据时自动创建的(我可以在Silverlight Spy中看到它们)。使用HierarchicalDataTemplate在Silverlight TreeView中自定义展开/折叠符号

在这种情况下是否可以自定义TreeView中的展开/折叠符号(路径)?客户讨厌默认的三角形难以看到和使用。我已经找到了引用来做这种事情,但只有在明确设置TreeViewItem的地方,才能在页面的XAML中设置一个Style。提出这个问题的另一种方法是当TreeViewItem不在XAML标记中(或作为TreeViewItem添加到代码中)时,是否可以为TreeViewItem定义和应用样式。

回答

1

是的,您需要更改TreeViewItem的样式属性。这里是我正在使用的...

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

注意切换按钮。


所以后来在后面的代码,你会怎么做?

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

感谢您的答复。在我的情况下,TreeViewItems不是通过代码添加的 - 它们是通过使用HierarchicalDataTemplate在幕后创建的。所以我没有立即访问TreeViewItem来设置它的风格。如果您使用HierarchicalDataTemplate,您如何访问为TreeView创建的TreeViewItems? – 2010-08-11 15:56:26