wpf treeview custom template round corners Seletion

MainWindow.Xaml

<Window x:Class=”TreeViewExample.MainWindow”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

Title=”MainWindow” Height=”350″ Width=”525″ Loaded=”Window_Loaded”>
<Window.Resources>

<Style TargetType=”TreeViewItem”>
<Style.Resources>
<LinearGradientBrush x:Key=”ItemAreaBrush” StartPoint=”0.5, 0″ EndPoint=”0.5, 1″>
<GradientStop Color=”#66000000″ Offset=”0″ />
<GradientStop Color=”#22000000″ Offset=”1″ />
</LinearGradientBrush>
<LinearGradientBrush x:Key=”SelectedItemAreaBrush” StartPoint=”0.5, 0″ EndPoint=”0.5, 1″>
<GradientStop Color=”Orange” Offset=”0″ />
<GradientStop Color=”OrangeRed” Offset=”1″ />
</LinearGradientBrush>
<LinearGradientBrush x:Key=”ItemBorderBrush” StartPoint=”0.5, 0″ EndPoint=”0.5, 1″>
<GradientStop Color=”LightGray” Offset=”0″ />
<GradientStop Color=”Gray” Offset=”1″ />
</LinearGradientBrush>
<LinearGradientBrush x:Key=”SelectedItemBorderBrush” StartPoint=”0.5, 0″ EndPoint=”0.5, 1″>
<GradientStop Color=”Yellow” Offset=”0″ />
<GradientStop Color=”Black” Offset=”1″ />
</LinearGradientBrush>
<DropShadowBitmapEffect x:Key=”DropShadowEffect” />
</Style.Resources>
<Setter Property=”Template”>
<Setter.Value>
<ControlTemplate TargetType=”TreeViewItem”>
<Grid Margin=”5″>
<Grid.RowDefinitions>
<RowDefinition Height=”*”></RowDefinition>
</Grid.RowDefinitions>

<!– This Border and ContentPresenter displays the content of the TreeViewItem. –>
<Border Name=”Bd”
Background=”{StaticResource ItemAreaBrush}”
BorderBrush=”{StaticResource ItemBorderBrush}”
BorderThickness=”0.6″
CornerRadius=”8″
Padding=”6″
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”30″ />
<ColumnDefinition Width=”100*” />
</Grid.ColumnDefinitions>
<Image Grid.Column=”0″ Source=”Image/ChangeUserIcon.png” Width=”20″ Height=”20″ Margin=”5,0,0,0″></Image>
<ContentPresenter Grid.Column=”1″ Name=”PART_Header”
ContentSource=”Header”
HorizontalAlignment=”Left”
VerticalAlignment=”Center” />
</Grid>
</Border>
</Grid>

<ControlTemplate.Triggers>
<!–When the item is selected in the TreeView, use the
“selected” colors and give it a drop shadow. –>
<Trigger Property=”IsSelected” Value=”True”>
<Setter
TargetName=”Bd”
Property=”Panel.Background”
Value=”{StaticResource SelectedItemAreaBrush}” />
<Setter
TargetName=”Bd”
Property=”Border.BorderBrush”
Value=”{StaticResource SelectedItemBorderBrush}” />
<Setter
TargetName=”Bd”
Property=”TextElement.Foreground”
Value=”{DynamicResource
{x:Static SystemColors.HighlightTextBrushKey}}” />
<Setter
TargetName=”Bd”
Property=”Border.BitmapEffect”
Value=”{StaticResource DropShadowEffect}” />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>

<!– Make each TreeViewItem show it’s children
in a horizontal StackPanel. –>
<!–<Setter Property=”ItemsPanel”>
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel
HorizontalAlignment=”Center”
IsItemsHost=”True”
Margin=”10,10,10,10″
Orientation=”Vertical”¬† />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>–>
</Style>

<LinearGradientBrush¬† x:Key=”RibbonGroupBorderStyle” EndPoint=”0.5,1″ StartPoint=”0.5,0″>
<GradientStop Color=”#FF6590C1″ Offset=”0″ />
<GradientStop Color=”#FF6590C1″ Offset=”1″ />
</LinearGradientBrush>
</Window.Resources>
<Grid>
<TreeView Name=”tree”>
</TreeView>
</Grid>
</Window>

MainWindow.Xaml.cs

private void Window_Loaded(object sender, RoutedEventArgs e)
{
TreeViewItem objTreeViewItem = new TreeViewItem();
objTreeViewItem.Header = “Hello”;
objTreeViewItem.Name = “Item1”;
tree.Items.Add(objTreeViewItem);
TreeViewItem objTreeViewItem1 = new TreeViewItem();
objTreeViewItem1.Header = “Hello2”;
objTreeViewItem1.Name = “Item2”;
tree.Items.Add(objTreeViewItem1);
}

Advertisements