This sample illustrates how to create a Outlook demo using SfTreeView.
WPF TreeView (SfTreeView) allows to customize the appearance of each item with different templates based on specific constraints by using the ItemTemplateSelector. To customize the SfTreeView to get an outlook like appearance, you can create and choose different DataTemplate for expander and the mail item at runtime using ItemTemplateSelector.
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<local:BoolToVisibilityMultiConverter x:Key="BoolToVisibilityMultiConverter" />
<DataTemplate x:Key="descriptionTemplate">
<Border BorderBrush="Gray" BorderThickness="0,0,0,1">
<Grid Height="60">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ToggleButton HorizontalAlignment="Left"
Background="#FFB1D6F0"
IsChecked="{Binding IsUnRead, Mode=TwoWay}"
Visibility="Visible">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" Value="14" />
</Trigger>
</Style.Triggers>
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="border"
Width="10"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0"
SnapsToDevicePixels="True">
<ContentPresenter x:Name="contentPresenter"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Focusable="False"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsDefaulted" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" Value="14" />
<Setter TargetName="border" Property="Width" Value="14" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="border" Property="Background" Value="#FF0067B0" />
<Setter TargetName="border" Property="BorderBrush" Value="#FF2C628B" />
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="border" Property="Background" Value="#FF0067B0" />
<Setter TargetName="border" Property="BorderBrush" Value="#FF245A83" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="border" Property="Background" Value="#FFF4F4F4" />
<Setter TargetName="border" Property="BorderBrush" Value="#FFADB2B5" />
<Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="#FF838383" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="30*" />
<RowDefinition Height="30*" />
<RowDefinition Height="30*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70*" />
<ColumnDefinition Width="20*" />
<ColumnDefinition Width="10*" />
</Grid.ColumnDefinitions>
<TextBlock FontWeight="Bold" Text="{Binding SenderDetails}" />
<TextBlock Grid.Row="1"
FontWeight="SemiBold"
Text="{Binding Subject}"
TextTrimming="WordEllipsis" />
<TextBlock Grid.Row="2"
Foreground="Gray"
Text="{Binding Message}"
TextTrimming="WordEllipsis" />
<Label Grid.Row="1"
Grid.Column="1"
Height="30"
Content="{Binding Date}" />
<ToggleButton Grid.Column="1"
IsChecked="{Binding IsFlagged}"
Visibility="Visible">
<ToggleButton.Content>
<Path Width="14"
Height="14"
Data="M0,1.5480409L2.9240003,1.5480409 2.9240003,44.879043 0,44.879043z M13.070206,1.0048421E-05C19.906545,-0.0069781953,25.467971,3.6343748, 34.017987,0.52327134L34.017987,18.413837C22.617967,22.564965,16.525987,14.707729,5.650989,19.503865L5.650989,1.6083267C8.3709896,0.41004016,10.791426,0.0023394859,13.070206,1.0048421E-05z"
Fill="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ToggleButton}}"
RenderTransformOrigin="0.5,0.5"
Stretch="Uniform">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</ToggleButton.Content>
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<ContentPresenter Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
TextElement.FontFamily="Calibri"
TextElement.FontSize="23" />
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Red" />
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Foreground" Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
<Button Grid.Row="1"
Grid.Column="2"
Visibility="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=syncfusion:TreeNodeView},
Converter={StaticResource BooleanToVisibilityConverter}}" >
<Button.Content>
<Path Data="F1M108.574,147.6743C108.299,147.1563,107.995,146.3563,107.463,145.4933C107.206,145.0533,106.928,144.5763,106.634,144.0723C106.351,143.5563,105.965,143.0763,105.611,142.5423C104.915,141.4593,104.007,140.4343,103.139,139.3563C102.944,139.1543,102.752,138.9513,102.558,138.7473C102.849,138.4333,103.137,138.1113,103.443,137.8333C103.895,
137.4113,104.298,136.9553,104.745,136.6033C105.184,136.2373,105.599,135.8903,105.982,135.5713C106.737,134.9083,107.46,134.4863,107.926,134.1273C108.407,133.7863,108.681,133.5923,108.681,133.5923C108.681,133.5923,108.379,133.7373,107.849,133.9933C107.331,134.2683,106.531,134.5723,105.668,135.1043C105.228,135.3613,104.752,135.6393,104.247,135.9333C103.732,
136.2153,103.252,136.6023,102.717,136.9563C102.342,137.1973,101.979,137.4853,101.613,137.7663C101.171,137.3143,100.725,136.8753,100.26,136.4863C99.763,136.0603,99.327,135.6083,98.827,135.2493C98.338,134.8773,97.875,134.5253,97.448,134.2003C97.114,133.9383,96.618,133.5973,96.135,133.2763C95.329,132.7403,94.238,133.0093,93.78,133.8613L93.763,133.8933C93.31,
134.7353,93.671,135.7813,94.545,136.1693C95.08,136.4063,95.617,136.6563,95.932,136.8333C96.35,137.0523,96.802,137.2903,97.281,137.5413C97.77,137.7763,98.248,138.1323,98.767,138.4433C99.134,138.6563,99.491,138.9153,99.85,139.1673C99.743,139.2543,99.639,139.3403,99.531,139.4273C98.544,140.3823,97.498,141.3063,96.662,142.3073C96.236,142.8033,95.783,143.2403,
95.424,143.7403C95.052,144.2293,94.7,144.6923,94.376,145.1193C94.114,145.4533,93.772,145.9483,93.451,146.4323C92.916,147.2373,93.185,148.3283,94.037,148.7873L94.068,148.8043C94.91,149.2573,95.956,148.8953,96.344,148.0213C96.582,147.4863,96.832,146.9493,97.009,146.6343C97.228,146.2173,97.465,145.7643,97.717,145.2863C97.951,144.7973,98.307,144.3193,
98.618,143.7993C99.232,142.7423,100.052,141.7363,100.829,140.6753C100.974,140.5123,101.116,140.3473,101.26,140.1823C101.471,140.3413,101.677,140.4973,101.892,140.6543C102.865,141.5213,103.901,142.3513,104.733,143.2683C105.155,143.7193,105.611,144.1233,105.963,144.5703C106.33,145.0093,106.676,145.4233,106.996,145.8063C107.659,146.5623,108.08,147.2843,
108.44,147.7513C108.78,148.2313,108.975,148.5063,108.975,148.5063C108.975,148.5063,108.829,148.2033,108.574,147.6743"
Fill="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}"
RenderTransformOrigin="0.5,0.5"
Stretch="Uniform">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Button.Content>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ContentPresenter Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
TextElement.FontFamily="Calibri"
TextElement.FontSize="23" />
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Grid>
</Grid>
</Border>
</DataTemplate>
<DataTemplate x:Key="headerTemplate">
<Grid x:Name="grid">
<Grid Grid.Row="0">
<Grid Margin="1,0,0,0" VerticalAlignment="Center">
<Label Content="{Binding Header}"
FontSize="11"
FontWeight="Bold"
VerticalContentAlignment="Center" />
</Grid>
</Grid>
</Grid>
</DataTemplate>
<local:ItemTemplateSelector x:Key="itemTemplateSelector"/>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<syncfusion:SfTreeView x:Name="sfTreeView" Grid.Row="1"
ChildPropertyName="MailCollection"
FullRowSelect="True"
AutoExpandMode="RootNodes"
ItemsSource="{Binding SelectedMailCollection}"
ItemTemplateSelector="{StaticResource itemTemplateSelector}"
ExpanderWidth="20" IsAnimationEnabled="True"
QueryNodeSize="SfTreeView_QueryNodeSize">
</syncfusion:SfTreeView>
</Grid>
class ItemTemplateSelector : DataTemplateSelector
{
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
var treeviewNode = item as TreeViewNode;
if (treeviewNode == null)
return null;
if (treeviewNode.Level == 0)
return Application.Current.MainWindow.FindResource("headerTemplate") as DataTemplate;
else
return Application.Current.MainWindow.FindResource("descriptionTemplate") as DataTemplate;
}
}
Visual Studio 2015 and above versions