If you look at the lower line of 3LvSub in the image above, it should be cut off at 4LvSub It's going to Lv5 How do I fix it?
Below is the style I used.
<Style x:Key="TreeView.Lv3"
BasedOn="{StaticResource TreeView.Main}"
TargetType="{x:Type TreeViewItem}">
<Setter Property="Background" Value="Gray" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="19" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Grid.Row="1"
Width="1"
Margin="0,-5,1,9"
Fill="White"
SnapsToDevicePixels="True"
Stroke="#8F8F8F"
StrokeDashArray="0,2"
StrokeDashCap="Square" />
<ToggleButton x:Name="Expander"
Grid.Column="0"
ClickMode="Press"
IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Style="{StaticResource ExpandCollapseToggleStyle_Plus}" />
<Border x:Name="Bd"
Grid.Column="1"
Padding="{TemplateBinding Padding}"
Background="Transparent"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="true">
<StackPanel Orientation="Horizontal">
<ContentPresenter x:Name="PART_Header"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ContentSource="Header"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</StackPanel>
</Border>
<ItemsPresenter x:Name="ItemsHost"
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="VirtualizingPanel.IsVirtualizing" Value="true">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
Remove the Triggers part separately and upload it.
4Lv Style added another Rectangle in the style above.
What I want to make is that the lower line of 3LvSub ends at 4LvSub.
If you look at the lower line of 3LvSub in the image above, it should be cut off at 4LvSub It's going to Lv5 How do I fix it?
Below is the style I used.
<Style x:Key="TreeView.Lv3"
BasedOn="{StaticResource TreeView.Main}"
TargetType="{x:Type TreeViewItem}">
<Setter Property="Background" Value="Gray" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="19" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Grid.Row="1"
Width="1"
Margin="0,-5,1,9"
Fill="White"
SnapsToDevicePixels="True"
Stroke="#8F8F8F"
StrokeDashArray="0,2"
StrokeDashCap="Square" />
<ToggleButton x:Name="Expander"
Grid.Column="0"
ClickMode="Press"
IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Style="{StaticResource ExpandCollapseToggleStyle_Plus}" />
<Border x:Name="Bd"
Grid.Column="1"
Padding="{TemplateBinding Padding}"
Background="Transparent"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="true">
<StackPanel Orientation="Horizontal">
<ContentPresenter x:Name="PART_Header"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ContentSource="Header"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</StackPanel>
</Border>
<ItemsPresenter x:Name="ItemsHost"
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="VirtualizingPanel.IsVirtualizing" Value="true">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
Remove the Triggers part separately and upload it.
4Lv Style added another Rectangle in the style above.
What I want to make is that the lower line of 3LvSub ends at 4LvSub.
Share Improve this question edited Apr 1 at 12:58 TylerH 21.1k78 gold badges79 silver badges114 bronze badges asked Apr 1 at 8:23 hong_arhong_ar 11 bronze badge New contributor hong_ar is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. 2- It's like brightness calibration in games: "change brightness until you barely can see the image". Another problem is lack of minimal reproducible example. – Sinatr Commented Apr 1 at 10:20
- The "problem" is related to your use of the term "TreeViewItem". Your particular implementation has nothing to do with the WPF "TreeView"; which is what you should have been using; in this case. (You are unconditionally adding your "dotted lines" ... which are actually redundant based on "indentation") – Gerry Schmitz Commented Apr 1 at 18:08
1 Answer
Reset to default 0This question reminded me of "NoName" How to make WPF TreeView style as WinForms TreeView? question and solution. I couldn't decide how good it was, so I combined it with the one it started from msdn. Then I made a toggle option so I could quickly compare it with the base style. There was a small line height difference at the 12 pixel font size. This disappeared after changing the grid height of the ToggleButton style (Height="16"). If you adjust the colors, you might get something you want.
MainWindow.xaml
<Window x:Class="TestTreeViewStyle.MainWindow"
xmlns="http://schemas.microsoft/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats./markup-compatibility/2006"
mc:Ignorable="d"
Title="Test TreeView Style" Height="250" Width="200">
<Grid>
<TreeView>
<TreeViewItem Header="Main / a" IsExpanded="True">
<TreeViewItem Header="2. level" IsExpanded="True">
<TreeViewItem Header="3. level /a"></TreeViewItem>
<TreeViewItem Header="3. level /b" IsExpanded="True">
<TreeViewItem Header="4. level"></TreeViewItem>
</TreeViewItem>
</TreeViewItem>
</TreeViewItem>
<TreeViewItem Header="Main / b"/>
</TreeView>
<Button Content=" > " VerticalAlignment="Top" HorizontalAlignment="Center"/>
<ToggleButton Content="style changer" VerticalAlignment="Center" HorizontalAlignment="Right" Checked="ChangeStyle" Unchecked="ChangeStyle"/>
</Grid>
</Window>
MainWindow.xaml.cs
using System.ComponentModel;
using System.Windows;
namespace TestTreeViewStyle
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
MinWidth = 300;
MinHeight = 250;
}
private void ChangeStyle(object sender, RoutedEventArgs e)
{
((App)Application.Current).ChangeMDict();
}
}
}
App.xaml
<Application x:Class="TestTreeViewStyle.App"
xmlns="http://schemas.microsoft/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft/winfx/2006/xaml"
xmlns:local="clr-namespace:TestTreeViewStyle"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<local:TreeViewLineConverter x:Key="LineConverter"/>
<Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid Width="15" Height="16" SnapsToDevicePixels="True">
<Rectangle Width="9" Height="9" Stroke="#919191" SnapsToDevicePixels="true">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,2" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="Silver" Offset="0.5"/>
<GradientStop Color="LightGray" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="ExpandPath" Width="1" Height="5" Stroke="Black" SnapsToDevicePixels="true"/>
<Rectangle Width="5" Height="1" Stroke="Black" SnapsToDevicePixels="true"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Visibility"
TargetName="ExpandPath" Value="Collapsed"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="TVI" 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>
<Rectangle x:Name="HorLn" Margin="9,1,0,0" Height="1" Stroke="#DCDCDC" SnapsToDevicePixels="True"/>
<Rectangle x:Name="VerLn" Width="1" Stroke="#DCDCDC" Margin="0,0,1,0" Grid.RowSpan="2" SnapsToDevicePixels="true" Fill="White"/>
<ToggleButton Margin="-1,0,0,0" x:Name="Expander" Style="{StaticResource ExpandCollapseToggleStyle}" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"/>
<Border Name="Bd" Grid.Column="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
<ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" MinWidth="20"/>
</Border>
<ItemsPresenter x:Name="ItemsHost" Grid.Row="1"
Grid.Column="1" Grid.ColumnSpan="2"/>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Converter={StaticResource LineConverter}}" Value="true">
<Setter TargetName="VerLn" Property="Height" Value="9"/>
<Setter TargetName="VerLn" Property="VerticalAlignment" Value="Top"/>
</DataTrigger>
<Trigger Property="IsExpanded" Value="false">
<Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="Expander" Property="Visibility" Value="Hidden"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HasHeader" Value="false"/>
<Condition Property="Width" Value="Auto"/>
</MultiTrigger.Conditions>
<Setter TargetName="PART_Header" Property="MinWidth" Value="75"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HasHeader" Value="false"/>
<Condition Property="Height" Value="Auto"/>
</MultiTrigger.Conditions>
<Setter TargetName="PART_Header" Property="MinHeight" Value="19"/>
</MultiTrigger>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style TargetType="{x:Type Button}">
<Setter Property="Template" Value="{DynamicResource TContent}"/>
</Style>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Themes/Old.xaml"/>
<ResourceDictionary Source="Themes/New.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
New.xaml
<ResourceDictionary
xmlns="http://schemas.microsoft/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft/winfx/2006/xaml">
<ControlTemplate x:Key="TContent">
<TextBlock Text="New" Background="Yellow"/>
</ControlTemplate>
<Style TargetType="{x:Type TreeViewItem}"></Style>
</ResourceDictionary>
Old.xaml
<ResourceDictionary
xmlns="http://schemas.microsoft/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft/winfx/2006/xaml">
<ControlTemplate x:Key="TContent">
<TextBlock Text="Old" Background="YellowGreen"/>
</ControlTemplate>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="Template" Value="{DynamicResource TVI}"></Setter>
</Style>
</ResourceDictionary>
App.xaml.cs
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
namespace TestTreeViewStyle
{
public partial class App : Application
{
public void ChangeMDict()
{
if (Resources.MergedDictionaries.Count > 1)
{
ResourceDictionary wDict = Resources.MergedDictionaries[0];
Resources.MergedDictionaries.RemoveAt(0);
Resources.MergedDictionaries.Add(wDict);
}
}
}
public class TreeViewLineConverter : IValueConverter
{
public object Convert(object aValue, Type aTargetType, object aParameter, System.Globalization.CultureInfo culture)
{
TreeViewItem wItem = (TreeViewItem)aValue;
ItemsControl wIc = ItemsControl.ItemsControlFromItemContainer(wItem);
bool wResult = wIc.ItemContainerGenerator.IndexFromContainer(wItem) == wIc.Items.Count - 1;
return wResult;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return false;
}
}
}