• 五、WPF TreeView树样式改动


    效果图,改了图标

    样式树

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
                        xmlns:local="clr-namespace:TLSC.Win.Zhifa.Style"
                     
                        >
        
        <HierarchicalDataTemplate x:Key="treeTemplate" 
                                      ItemsSource="{Binding ProjectList}">
    
            <DockPanel x:Name="treeItemDP">
                <Image x:Name="tiIcon" Source="{Binding Img}" DockPanel.Dock="Left" Width="0" Height="0" Visibility="Hidden"></Image>
                <TextBlock x:Name="tiTBName" DockPanel.Dock="Right" Text="{Binding Name}" Margin="2 0 0 0" Foreground="White" Background="Transparent"/>
            </DockPanel>
            
            <HierarchicalDataTemplate.Triggers>
                <DataTrigger Binding="{Binding TType}" Value="3">
                    <Setter TargetName="tiIcon" Property="Visibility" Value="Visible"></Setter>
                    <Setter TargetName="tiIcon" Property="Width" Value="12"></Setter>
                    <Setter TargetName="tiIcon" Property="Height" Value="12"></Setter>
                </DataTrigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="Focusable" Value="True"/>
                    </MultiTrigger.Conditions>
                    <Setter TargetName="tiTBName" Property="Background" Value="Transparent"/>
                    <Setter TargetName="treeItemDP" Property="Background" Value="Transparent"/>
                </MultiTrigger>
    
            </HierarchicalDataTemplate.Triggers>
        </HierarchicalDataTemplate>
    
        <Style x:Key="ExpandCollapseToggleStyle" TargetType="{x:Type ToggleButton}">
            <Setter Property="Focusable" Value="False"/>
            <Setter Property="Width" Value="16"/>
            <Setter Property="Height" Value="16"/>
            
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border Background="Transparent" Height="14" Width="14">
                            <Image x:Name="PART_Image" Source="{Binding TGImageSource}"/>
                        </Border>
                        
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="TreeViewItemFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="customTreeItemStyle" TargetType="{x:Type TreeViewItem}">
            <Setter Property="IsExpanded" Value="True"/> 
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Margin" Value="8"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="FontFamily" Value="Microsoft YaHei"/>
            <Setter Property="BorderBrush" Value="AliceBlue"/>
            <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>
                            <ToggleButton x:Name="Expander" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ExpandCollapseToggleStyle}"/>
                            <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="1" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                                <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </Border>
                            <ItemsPresenter x:Name="ItemsHost" Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="1"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded" Value="false">
                                <Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/>
                            </Trigger>
                            <Trigger Property="HasItems" Value="false">
                                <Setter Property="Visibility" TargetName="Expander" Value="Hidden"/>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Background" TargetName="Bd" Value="#259FFF"/>
                                <Setter Property="Foreground" Value="White"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="IsSelectionActive" Value="false"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="Transparent"/>
                                <Setter Property="Foreground" Value="White"/>
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            
            <Style.Triggers>
                <Trigger Property="VirtualizingStackPanel.IsVirtualizing" Value="true">
                    <Setter Property="ItemsPanel">
                        <Setter.Value>
                            <ItemsPanelTemplate>
                                <VirtualizingStackPanel/>
                            </ItemsPanelTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    
        <Style TargetType="TreeView" x:Key="UTreeStyle">
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="FontFamily" Value="Microsoft YaHei"/>
            <Setter Property="BorderBrush" Value="AliceBlue"/>
            <Setter Property="ItemContainerStyle" Value="{DynamicResource UTreeViewItemStyle}"></Setter>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel IsItemsHost="True" IsVirtualizing="True" VirtualizationMode="Recycling" Margin="0"/>
    
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Style.Resources>
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#259FFF"/>
                <!--<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="White"/>-->
                <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Transparent"/>
                <!--<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}" Color="White"/>-->
            </Style.Resources>
            <!--<Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TreeView}">
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True"  >
                                <Setter Property="Background" Value="Transparent"></Setter>
                            </Trigger>
                          
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>-->
        </Style>
        <Style TargetType="TreeViewItem" x:Key="UTreeViewItemStyle">
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Margin" Value="8"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="FontFamily" Value="Microsoft YaHei"/>
            <Setter Property="BorderBrush" Value="AliceBlue"/>
    
            <!--<Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TreeViewItem}">
             
                        <DockPanel x:Name="treeItemDP">
                            -->
            <!--展开收缩按钮-->
            <!-- 
                            <ToggleButton DockPanel.Dock="Left" x:Name="ExpanderBtn" 
                                                  IsChecked="{Binding Path=IsExpanded, RelativeSource={x:Static RelativeSource.TemplatedParent}, Mode=TwoWay}"
                                                  ClickMode="Press" >
                                <ToggleButton.Template>
                                    <ControlTemplate TargetType="ToggleButton">
                                        <Border>
                                            <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                        </Border>
                                    </ControlTemplate>
                                </ToggleButton.Template>
                                <ToggleButton.Content>
                                    <TextBlock x:Name="ExpanderIcon"  Foreground="{TemplateBinding Foreground}" Text="&#xe62c;" />
                                </ToggleButton.Content>
                            </ToggleButton>
                            <Image x:Name="tiIcon" Source="{Binding Img}" DockPanel.Dock="Left" Width="12" Height="12"></Image>
                            <TextBlock x:Name="tiTBName" DockPanel.Dock="Right" Text="{Binding Name}" Margin="2 0 0 0" Foreground="White" Background="Transparent"/>
                        </DockPanel>
    
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="Transparent" />
                                <Setter Property="FontWeight" Value="Bold" />
                            </Trigger>
                            <Trigger Property="IsExpanded" Value="True">
                                <Setter Property="BorderBrush" Value="AliceBlue" />
                                
                            </Trigger>
                            <Trigger Property="Focusable" Value="True">
                                <Setter Property="Background" Value="Transparent" />
                                <Setter Property="FontWeight" Value="Bold" />
                            </Trigger>
                             
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>-->
        </Style>
    
    </ResourceDictionary>

    在窗口引用

                        <TreeView Name="trRegion" Margin="0 20 18 0"  ItemTemplate="{StaticResource treeTemplate}" Style="{DynamicResource UTreeStyle}"  ItemsSource="{Binding RegionList}"  
                               ItemContainerStyle="{StaticResource customTreeItemStyle}"  AllowDrop="True">
                        </TreeView>

    TreeModel

       public class TreeModel : INotifyPropertyChanged
        {
    
            public string Name { get; set; }
    
            public string ID { get; set; }
    
            public string Img { get; set; }
            /// <summary>
            /// 类型 1区域 2项目 3摄像头
            /// </summary>
            public int TType { get; set; }
    
    
            public List<TreeModel> ProjectList { get; set; }
            private bool isExpanded;
            public bool IsExpanded
            {
                get { return this.isExpanded; }
                set
                {
                    this.isExpanded = value;
                    this.OnPropertyChanged("IsExpanded");
    
                    UpdateImageSource();
                }
            }
    
            private string tgImageSource;
            public string TGImageSource
            {
                get
                {
                    if (this.tgImageSource == null)
                        UpdateImageSource();
    
                    return this.tgImageSource;
                }
                protected set
                {
                    this.tgImageSource = value;
                    this.OnPropertyChanged("TGImageSource");
                }
            }
    
            protected void UpdateImageSource()
            {
                if (this.IsExpanded)
                    this.TGImageSource = "pack://application:,,,/images/dtriangle.png";//朝下的图标
                else
                    this.TGImageSource = "pack://application:,,,/images/rtriangle.png";//朝右的图标
            }
    
            #region INotifyPropertyChanged Members
    
            public event PropertyChangedEventHandler PropertyChanged;
            private void OnPropertyChanged(string propName)
            {
                if (this.PropertyChanged != null)
                {
                    this.PropertyChanged(this, new PropertyChangedEventArgs(propName));
                }
            }
    
            #endregion 
        }
  • 相关阅读:
    一些比较水的题目
    oracle not in,not exists,minus 数据量大的时候的性能问题
    简单的oracle分页语句
    oracle 查询结果集运算
    Spring注解详解
    HTTP报头Accept 和 Content-Type的区别
    vue 实现分转元的 过滤器
    oracle or语句的坑
    CSS样式 让你的输入的小写自动变成大写。
    js 十分精确身份证验证
  • 原文地址:https://www.cnblogs.com/cvol/p/14415474.html
Copyright © 2020-2023  润新知