WPF自定義TreeView控件樣式實(shí)現(xiàn)QQ聯(lián)系人列表效果
更新時(shí)間：2018年04月20日 08:36:56 作者：小明GG
TreeView控件在項(xiàng)目中使用比較頻繁，下面這篇文章主要給大家介紹了關(guān)于WPF自定義TreeView控件樣式實(shí)現(xiàn)QQ聯(lián)系人列表效果的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
一、前言
TreeView這個(gè)控件對(duì)于我來(lái)說(shuō)是用得比較多的，以前做的小聊天軟件(好友列表)、音樂(lè)播放器(播放列表)、類庫(kù)展示器(樹形類結(jié)構(gòu))等都用的是TreeView，普通的TreeView并不能滿足我們的需求。因此我們需要滴對(duì)TreeView進(jìn)行改造。下面的內(nèi)容將介紹仿QQ聯(lián)系人TreeView樣式及TreeView數(shù)據(jù)綁定方法。
二、TreeView仿QQ聯(lián)系人列表
準(zhǔn)確的說(shuō)不是仿QQ聯(lián)系人列表，這個(gè)TreeView樣式作為組織架構(gòu)來(lái)使用更好。廢話不多說(shuō)，先看效果：
2.1、基本思路
像這種聯(lián)系人列表一般涉及到多層級(jí)數(shù)據(jù)，而且有很多數(shù)據(jù)是需要?jiǎng)討B(tài)更新的，如果通過(guò)手動(dòng)一條條增加數(shù)據(jù)反而更復(fù)雜，而且不方便。因此為了綁定數(shù)據(jù)方便我們使用分層模板HierarchicalDataTemplate。
分層模板中存在兩種樣式，一種是分組樣式，一種是人員樣式。不管是分組還是人員綁定的都是對(duì)象，這樣我們?cè)趯?duì)象中添加一個(gè)屬性來(lái)辨別是否為分組-IsGrouping。
默認(rèn)的TreeView控件四周會(huì)有邊距，因此需要設(shè)置下TreeView的樣式。另外鼠標(biāo)經(jīng)過(guò)和鼠標(biāo)選中的背景色需要變化，因此還需要設(shè)置TreeViewItem的樣式。
根據(jù)思路，我們需要設(shè)置三個(gè)樣式，TreeView樣式，TreeViewItem樣式，HierarchicalDataTemplate分層模板樣式。另外為了自動(dòng)計(jì)算下一級(jí)的邊距，我們需要添加一個(gè)轉(zhuǎn)換器IndentConverter。還需要一個(gè)轉(zhuǎn)換器需要將布爾類型的IsGrouping轉(zhuǎn)換為Visibility，還需要一個(gè)轉(zhuǎn)換器來(lái)對(duì)Visibility取反。
這樣三個(gè)樣式，三個(gè)轉(zhuǎn)換器。就可以實(shí)現(xiàn)我們上面的效果，另外還可以進(jìn)行動(dòng)態(tài)數(shù)據(jù)綁定。
2.2、樣式代碼
HierarchicalDataTemplate分層模板樣式代碼
<HierarchicalDataTemplate x:Key="ItemNode" ItemsSource="{Binding Children,Mode=TwoWay}">
<Grid Background="Transparent">
<Grid.Resources>
<convert:BoolToVisible x:Key="boolToVisible"/>
<convert:VisibleToReverse x:Key="visibleToReverse"/>
</Grid.Resources>
<Grid MinHeight="30" x:Name="userinfo" Background="Transparent" Margin="-5 0 0 0" Visibility="{Binding Visibility,ElementName=groupinginfo,Converter={StaticResource visibleToReverse}}">
<Grid Height="50" x:Name="grid">
<Border Background="#62acf9" Width="40" Height="40" CornerRadius="4" HorizontalAlignment="Left" Margin="0 0 0 0">
<TextBlock Text="{Binding SurName}" FontSize="23" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
<TextBlock Text="{Binding Name}" Margin="50 7 0 0" FontSize="13"/>
<TextBlock Text="{Binding Info}" Foreground="#808080" Margin="50 30 0 0"/>
<TextBlock Text="{Binding Count,StringFormat={}{0}人}" Foreground="#808080" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0 0 5 0"/>
</Grid>
</Grid>
<StackPanel MinHeight="25" x:Name="groupinginfo" Orientation="Horizontal" Background="Transparent" HorizontalAlignment="Left" Visibility="{Binding IsGrouping,Converter={StaticResource boolToVisible}}">
<TextBlock Text="{Binding DisplayName}" Margin="3 0" VerticalAlignment="Center" HorizontalAlignment="Left"/>
</StackPanel>
</Grid>
</HierarchicalDataTemplate>
TreeViewItem樣式代碼
<Style x:Key="DefaultTreeViewItem" TargetType="{x:Type TreeViewItem}">
<Setter Property="MinHeight" Value="25" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Margin" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<ControlTemplate.Resources>
<convert:IndentConverter x:Key="indentConverter"/>
</ControlTemplate.Resources>
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Name="itemBackground" Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<Grid Background="Transparent">
<Grid x:Name="ItemRoot" Margin="{Binding Converter={StaticResource indentConverter},RelativeSource={RelativeSource TemplatedParent}}" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ToggleButton x:Name="Expander" HorizontalAlignment="Left" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}">
<ToggleButton.Style>
<Style 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="16" Padding="5" Width="16">
<Path x:Name="ExpandPath" Data="M0,0 L0,6 L6,0 z" Fill="#66645e" Stroke="#66645e">
<Path.RenderTransform>
<RotateTransform Angle="135" CenterY="3" CenterX="3"/>
</Path.RenderTransform>
</Path>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="RenderTransform" TargetName="ExpandPath">
<Setter.Value>
<RotateTransform Angle="180" CenterY="3" CenterX="3"/>
</Setter.Value>
</Setter>
<Setter Property="Fill" TargetName="ExpandPath" Value="#66645e"/>
<Setter Property="Stroke" TargetName="ExpandPath" Value="#66645e"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" TargetName="ExpandPath" Value="#66645e"/>
<Setter Property="Fill" TargetName="ExpandPath" Value="#66645e"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsChecked" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Stroke" TargetName="ExpandPath" Value="#66645e"/>
<Setter Property="Fill" TargetName="ExpandPath" Value="#66645e"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
<ContentPresenter Grid.Column="1" x:Name="PART_Header" ContentSource="Header"
HorizontalAlignment="Stretch" >
</ContentPresenter>
</Grid>
</Grid>
</Border>
<ItemsPresenter x:Name="ItemsHost" Grid.Row="1"/>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsGrouping}" Value="false">
<Setter Property="Visibility" TargetName="Expander" Value="Hidden"/>
</DataTrigger>
<Trigger Property="HasItems" Value="False">
<Setter Property="Visibility" TargetName="Expander" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsExpanded" Value="False">
<Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" TargetName="itemBackground" Value="#FAE388"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="False"/>
<Condition SourceName="itemBackground" Property="IsMouseOver" Value="true"/>
</MultiTrigger.Conditions>
<Setter Property="Background" Value=" #fceeb9" TargetName="itemBackground"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
TreeView樣式代碼
<Style x:Key="DefaultTreeView" TargetType="{x:Type TreeView}">
<Setter Property="ScrollViewer.CanContentScroll" Value="True" />
<Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="True"></Setter>
<Setter Property="VirtualizingStackPanel.VirtualizationMode" Value="Recycling" />
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
<Setter Property="ItemContainerStyle" Value="{StaticResource DefaultTreeViewItem}"></Setter>
<Setter Property="Padding" Value="0"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel IsItemsHost="True" Margin="0"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
2.3、轉(zhuǎn)換器代碼
public class IndentConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
double colunwidth = 10;
double left = 0.0;
UIElement element = value as TreeViewItem;
while (element.GetType() != typeof(TreeView))
{
element = (UIElement)VisualTreeHelper.GetParent(element);
if (element.GetType() == typeof(TreeViewItem))
left += colunwidth;
}
return new Thickness(left, 0, 0, 0);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
public class BoolToVisible : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if ((bool)value)
return Visibility.Visible;
else
return Visibility.Collapsed;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
public class VisibleToReverse : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if ((Visibility)value == Visibility.Visible)
return Visibility.Collapsed;
else
return Visibility.Visible;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
2.4、引用示例
<TreeView x:Name="TreeViewOrg" BorderThickness="1" BorderBrush="#BBB" Background="Transparent" Width="280" Height="500" Margin="10" ItemTemplate="{StaticResource ItemNode}" Style="{StaticResource DefaultTreeView}">
</TreeView>
2.5、初始化數(shù)據(jù)源及綁定對(duì)象
public MainWindow()
{
InitializeComponent();
OrgList = new ObservableCollection<OrgModel>()
{
new OrgModel()
{
IsGrouping=true,
DisplayName="單位名稱(3/7)",
Children=new ObservableCollection<OrgModel>()
{
new OrgModel(){
IsGrouping=true,
DisplayName="未分組聯(lián)系人(2/4)",
Children=new ObservableCollection<OrgModel>()
{
new OrgModel(){
IsGrouping=false,
SurName="劉",
Name="劉棒",
Info="我要走向天空！",
Count=3
}
}
}
},
}
};
TreeViewOrg.ItemsSource = OrgList;
}
public ObservableCollection<OrgModel> OrgList { get; set; }
public class OrgModel
{
public bool IsGrouping { get; set; }
public ObservableCollection<OrgModel> Children { get; set; }
public string DisplayName { get; set; }
public string SurName { get; set; }
public string Name { get; set; }
public string Info { get; set; }
public int Count { get; set; }
}
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
您可能感興趣的文章:
- WPF自定義控件和樣式之自定義按鈕（Button）
- WPF如何自定義TabControl控件樣式示例詳解
- 超炫酷的WPF實(shí)現(xiàn)Loading控件效果
- WPF的ListView控件自定義布局用法實(shí)例
- 在WPF中動(dòng)態(tài)加載XAML中的控件實(shí)例代碼
- C# 使用WPF 用MediaElement控件實(shí)現(xiàn)視頻循環(huán)播放
- WPF實(shí)現(xiàn)ScrollViewer滾動(dòng)到指定控件處
- WPF實(shí)現(xiàn)帶全選復(fù)選框的列表控件
- WPF開(kāi)發(fā)技巧之花式控件功能擴(kuò)展詳解
相關(guān)文章
今天小編就為大家分享一篇C#中的局部變量沖突問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-12-12
C#實(shí)現(xiàn)在窗體上的統(tǒng)計(jì)圖效果
這篇文章主要為大家詳細(xì)介紹了C#實(shí)現(xiàn)在窗體上的統(tǒng)計(jì)圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了c# 幾個(gè)常見(jiàn)的TAP異步操作，幫助大家更好的理解和學(xué)習(xí)使用c#，感興趣的朋友可以了解下2021-04-04
C#下載網(wǎng)頁(yè)并在控制臺(tái)輸出的方法
這篇文章主要介紹了C#下載網(wǎng)頁(yè)并在控制臺(tái)輸出的方法,涉及C#基于http協(xié)議進(jìn)行網(wǎng)頁(yè)抓取及控制臺(tái)輸出顯示的相關(guān)技巧,需要的朋友可以參考下2015-07-07
本文將介紹C#中常用的日期時(shí)間比較方法（CompareTo、Equals和比較運(yùn)算符）以及日期時(shí)間格式化方法（ToString、自定義格式字符串和標(biāo)準(zhǔn)格式）,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
C#對(duì)XmlHelper幫助類操作Xml文檔的通用方法匯總
該篇文章主要總結(jié)的是自己平時(shí)工作中使用頻率比較高的Xml文檔操作的一些常用方法和收集網(wǎng)上寫的比較好的一些通用Xml文檔操作的方法，對(duì)C#?XmlHelper幫助類操作Xml文檔相關(guān)知識(shí)感興趣的朋友一起看看吧2022-03-03
C# 實(shí)現(xiàn)特殊字符快速轉(zhuǎn)碼
這篇文章主要介紹了C# 實(shí)現(xiàn)特殊字符快速轉(zhuǎn)碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2021-01-01
下面小編就為大家分享一篇Path類 操作文件類的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
C# 中文簡(jiǎn)體轉(zhuǎn)繁體實(shí)現(xiàn)代碼
C# 中文簡(jiǎn)體轉(zhuǎn)繁體實(shí)現(xiàn)代碼，需要的朋友可以參考一下2013-02-02