[gelöst] TreeViewItemLayout mit Plus/Minus und Verbindungslinien
J
jogibear9988
Themenstarter:in
[gelöst] TreeViewItemLayout mit Plus/Minus und Verbindungslinien
Ich nutzeein WPF TreeView, und der zeigt nur noch die hässlichen Dreiecke an. Gibts irgendwo ein Control Template mit Plus/Minus zum download?
cSharp Projekte : https://github.com/jogibear9988
Hallo jogibear9988,
Ich nutzeein WPF TreeView, und der zeigt nur noch die hässlichen Dreiecke an.
Das sind keine "hässlichen Dreiecke", sondern Teil des Aero-Designs und somit betriebssystemstandard. 😉
Ändern kannst du das global in der Systemsteuerung unter "Designs".
J
jogibear9988
Themenstarter:in
Jo...
Ja, aber Ich will das mein TreeVie immer die Plus / Minus hat (auf jedem Rechner)!
Da gibts doch bestimmt irgendwo ein Template mit +/-
cSharp Projekte : https://github.com/jogibear9988
Hallo jogibear9988,
du kannst den Style auch selbst ändern.
Einen der schon das Plus / Minus hat habe ich nicht auf Lager, aber hier Beispiel für ein TreeViewItem-ControlTemplate findest du ein Beispiel
Das musst du nur ein klein wenig modifizieren und das Problem ist gelöst.
Gruß
Michael
Hallo jogibear9988,
in WPF gibt es sog. Themes. Das sind einfache XAML-Dateien. Dort findest du alle Controls, die du von Windows her kennst, als XAML-Format. Sicher bin ich mir zwar nicht, aber ich meine, es gibt noch eine XP-Version davon. Standardmäßig wird von Betriebssystem her die neuere Version verwendet. Ich meine es gibt sogar auf den Seiten der MSDN zum Download. Such mal.
Mit dem Tool StyleSnooper kannst du dir den Code anzeigen lassen. Den Code kannst du 1 zu 1 rauskopieren und bei dir ins Projekt einfügen. Dort kannst du dann den Style überschrieben. Alternativ kannst du - was auch das beste ist - einfach einen Style anlegen, wo du die Dreiecke mit + und - ersetzt. StyleSnooper sollte dabei helfen.
zero_x
zero_x | <span style="font-size: 10;">my</span><span style="font-size: 10;">CSharp</span><span style="font-size: 10;">.de</span> - gemeinsam mehr erreichen
Für längere Zeit inaktiv.
J
jogibear9988
Themenstarter:in
Hab jetzt mal mit StyleSnooper den OrginalStyle extrahiert und als Resource eingebunden. (als erster test, das ändern in ein plus kommt dann). Nun existiert das Problem, das sich der Expander nicht mehr öffnet wenn Ich auf das Dreieck klicke. Das Dreieck änder sich zwar als wäre er expandiert, aber der Inhalt erscheint nicht! Erst wenn Ich auf den Titel doppelklicke!
cSharp Projekte : https://github.com/jogibear9988
Hallo jogibear9988,
hast du auch den Teil mit den Triggern mitkopiert? Gibt es Fehlermeldungen vom Compiler oder ähnliches?
zero_x
zero_x | <span style="font-size: 10;">my</span><span style="font-size: 10;">CSharp</span><span style="font-size: 10;">.de</span> - gemeinsam mehr erreichen
Für längere Zeit inaktiv.
J
jogibear9988
Themenstarter:in
Jo..
Ja, hab den kompletten style vom Inspector kopiert.
Das einzigste was Ich grad geändert habe ist die PathGeometry... (spiel da grad mit rum um ein Plus draus zu machen...
<Style TargetType="{x:Type TreeViewItem}" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style.Triggers>
<Trigger Property="VirtualizingStackPanel.IsVirtualizing">
<Setter Property="ItemsControl.ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>
True</s:Boolean>
</Trigger.Value>
</Trigger>
</Style.Triggers>
<Style.Resources>
<ResourceDictionary />
</Style.Resources>
<Setter Property="Panel.Background">
<Setter.Value>
<SolidColorBrush>
#00FFFFFF</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property="Control.HorizontalContentAlignment">
<Setter.Value>
<Binding Path="HorizontalContentAlignment" RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=ItemsControl, AncestorLevel=1}" />
</Setter.Value>
</Setter>
<Setter Property="Control.VerticalContentAlignment">
<Setter.Value>
<Binding Path="VerticalContentAlignment" RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=ItemsControl, AncestorLevel=1}" />
</Setter.Value>
</Setter>
<Setter Property="Control.Padding">
<Setter.Value>
<Thickness>
1,0,0,0</Thickness>
</Setter.Value>
</Setter>
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.ControlTextBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="FrameworkElement.FocusVisualStyle">
<Setter.Value>
<Style TargetType="{x:Type IFrameworkInputElement}">
<Style.Resources>
<ResourceDictionary />
</Style.Resources>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Control.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="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<ToggleButton IsChecked="False" ClickMode="Press" Name="Expander">
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Style.Resources>
<ResourceDictionary />
</Style.Resources>
<Setter Property="UIElement.Focusable">
<Setter.Value>
<s:Boolean>
False</s:Boolean>
</Setter.Value>
</Setter>
<Setter Property="FrameworkElement.Width">
<Setter.Value>
<s:Double>
16</s:Double>
</Setter.Value>
</Setter>
<Setter Property="FrameworkElement.Height">
<Setter.Value>
<s:Double>
16</s:Double>
</Setter.Value>
</Setter>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Padding="5,5,5,5" Background="#00FFFFFF" Width="16" Height="16">
<Path Fill="#00FFFFFF" Stroke="#FF989898" Name="ExpandPath">
<Path.Data>
<PathGeometry Figures="M0,0L0,6L6,6L6,0z" />
</Path.Data>
<!--<Path.RenderTransform>
<RotateTransform Angle="135" CenterX="3" CenterY="3" />
</Path.RenderTransform>-->
</Path>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsMouseOver">
<Setter Property="Shape.Stroke" TargetName="ExpandPath">
<Setter.Value>
<SolidColorBrush>
#FF1BBBFA</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property="Shape.Fill" TargetName="ExpandPath">
<Setter.Value>
<SolidColorBrush>
#00FFFFFF</SolidColorBrush>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>
True</s:Boolean>
</Trigger.Value>
</Trigger>
<Trigger Property="ToggleButton.IsChecked">
<Setter Property="UIElement.RenderTransform" TargetName="ExpandPath">
<Setter.Value>
<RotateTransform Angle="180" CenterX="3" CenterY="3" />
</Setter.Value>
</Setter>
<Setter Property="Shape.Fill" TargetName="ExpandPath">
<Setter.Value>
<SolidColorBrush>
#FF595959</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property="Shape.Stroke" TargetName="ExpandPath">
<Setter.Value>
<SolidColorBrush>
#FF262626</SolidColorBrush>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>
True</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
<Border BorderThickness="{TemplateBinding Border.BorderThickness}" Padding="{TemplateBinding Control.Padding}" BorderBrush="{TemplateBinding Border.BorderBrush}" Background="{TemplateBinding Panel.Background}" Name="Bd" SnapsToDevicePixels="True" Grid.Column="1">
<ContentPresenter Content="{TemplateBinding HeaderedContentControl.Header}" ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}" ContentStringFormat="{TemplateBinding HeaderedItemsControl.HeaderStringFormat}" ContentSource="Header" Name="PART_Header" HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</Border>
<ItemsPresenter Name="ItemsHost" Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TreeViewItem.IsExpanded">
<Setter Property="UIElement.Visibility" TargetName="ItemsHost">
<Setter.Value>
<x:Static Member="Visibility.Collapsed" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>
False</s:Boolean>
</Trigger.Value>
</Trigger>
<Trigger Property="ItemsControl.HasItems">
<Setter Property="UIElement.Visibility" TargetName="Expander">
<Setter.Value>
<x:Static Member="Visibility.Hidden" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>
False</s:Boolean>
</Trigger.Value>
</Trigger>
<Trigger Property="TreeViewItem.IsSelected">
<Setter Property="Panel.Background" TargetName="Bd">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.HighlightBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.HighlightTextBrushKey}" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>
True</s:Boolean>
</Trigger.Value>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="TreeViewItem.IsSelected">
<Condition.Value>
<s:Boolean>
True</s:Boolean>
</Condition.Value>
</Condition>
<Condition Property="Selector.IsSelectionActive">
<Condition.Value>
<s:Boolean>
False</s:Boolean>
</Condition.Value>
</Condition>
</MultiTrigger.Conditions>
<Setter Property="Panel.Background" TargetName="Bd">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.ControlBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.ControlTextBrushKey}" />
</Setter.Value>
</Setter>
</MultiTrigger>
<Trigger Property="UIElement.IsEnabled">
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>
False</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
cSharp Projekte : https://github.com/jogibear9988
Du kannst natürlich auch deinen Treeview mit dem XP-Style themen:
<TreeView>
<TreeView.Resources>
<ResourceDictionary Source="/PresentationFramework.Luna, Version=3.0.0.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35, ProcessorArchitecture=MSIL;component/themes/luna.normalcolor.xaml" />
</TreeView.Resources>
</TreeView>
Alternativ gibt's auch noch das klassische Theme und ein paar weitere.
J
jogibear9988
Themenstarter:in
Jo..
Ja, aber auch im XP-Style Fehlen mir die Verbindungslinien.
cSharp Projekte : https://github.com/jogibear9988
J
jogibear9988
Themenstarter:in
Soo...
Nach ein paar suchen und div. Tests läufts nun.
Hier mein XAML und Code falls es jemand auch braucht...
(Das ist nicht alles auf meinem Mist gewachsen, habs aus div Quellen im Inet!)
<ad:DockableContent x:Class="WPFToolboxForPLCs.DockableWindows.DockableContentProjectList" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:ad="clr-namespace:AvalonDock;assembly=AvalonDock" xmlns:Projects="clr-namespace:LibNoDaveConnectionLibrary.DataTypes.Projects;assembly=LibNoDaveConnectionLibrary" xmlns:Projectfiles="clr-namespace:LibNoDaveConnectionLibrary.Projectfiles;assembly=LibNoDaveConnectionLibrary" xmlns:WPFToolboxForPLCs="clr-namespace:WPFToolboxForPLCs" xmlns:local="clr-namespace:WPFToolboxForPLCs.WPF_Addons" xmlns:s="clr-namespace:System;assembly=mscorlib" mc:Ignorable="d" d:DesignHeight="339" d:DesignWidth="482">
<ad:DockableContent.Resources>
<local:TreeViewLineConverter x:Key="LineConverter" />
<SolidColorBrush x:Key="GlyphBrush" Color="#444" />
<Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
<Setter Property="Focusable" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Background="#00FFFFFF" Width="19" Height="13">
<Border BorderThickness="1,1,1,1" CornerRadius="1,1,1,1" BorderBrush="#FF7898B5" Width="9" Height="9" SnapsToDevicePixels="True">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#FFFFFFFF" Offset="0.2" />
<GradientStop Color="#FFC0B7A6" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<Path Data="M0,2L0,3 2,3 2,5 3,5 3,3 5,3 5,2 3,2 3,0 2,0 2,2z" Fill="#FF000000" Name="ExpandPath" Margin="1,1,1,1" />
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked">
<Setter Property="Path.Data" TargetName="ExpandPath">
<Setter.Value>
<StreamGeometry>M0,2L0,3 5,3 5,2z</StreamGeometry>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>True</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TreeViewItemFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Rectangle Margin="0,0,0,0" StrokeThickness="5" Stroke="Black" StrokeDashArray="1 2" Opacity="0" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ad:DockableContent.Resources>
<TreeView Name="myTreeView" ItemsSource="{Binding Projects}" MouseDoubleClick="TreeView_MouseDoubleClick">
<TreeView.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/PresentationFramework.Luna, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, ProcessorArchitecture=MSIL;component/themes/luna.normalcolor.xaml" />
</ResourceDictionary.MergedDictionaries>
<HierarchicalDataTemplate DataType="{x:Type Projects:ProjectFolder}" ItemsSource="{Binding SubItems}">
<HierarchicalDataTemplate.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment,
RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
<Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment,
RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
<Setter Property="Padding" Value="1,0,0,0" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
<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>
<!-- Connecting Lines -->
<Rectangle x:Name="HorLn" Height="1" Stroke="#8888" Margin="10,0,0,0" SnapsToDevicePixels="true" />
<Rectangle x:Name="VerLn" Width="1" Stroke="#8888" Grid.RowSpan="2" SnapsToDevicePixels="true" />
<ToggleButton 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}">
<ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Border>
<ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" />
</Grid>
<ControlTemplate.Triggers>
<!-- This trigger changes the connecting lines if the item is the last in the list -->
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Converter={StaticResource LineConverter}}" Value="true">
<Setter TargetName="VerLn" Property="Height" Value="6" />
<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>
</Setter.Value>
</Setter>
</Style>
</HierarchicalDataTemplate.ItemContainerStyle>
<StackPanel Orientation="Horizontal">
<WPFToolboxForPLCs:WinFormsImage ImageSource="{Binding FolderClosedImage}"></WPFToolboxForPLCs:WinFormsImage>
<TextBlock Text=" " />
<TextBlock VerticalAlignment="Center" FontFamily="Courier New" Text="{Binding Name}"></TextBlock>
</StackPanel>
</HierarchicalDataTemplate>
</ResourceDictionary>
</TreeView.Resources>
</TreeView>
</ad:DockableContent>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Controls;
using System.Windows.Data;
namespace WPFToolboxForPLCs.WPF_Addons
{
class TreeViewLineConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
TreeViewItem item = (TreeViewItem)value;
ItemsControl ic = ItemsControl.ItemsControlFromItemContainer(item);
return ic.ItemContainerGenerator.IndexFromContainer(item) == ic.Items.Count - 1;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new Exception("The method or operation is not implemented.");
}
}
}
cSharp Projekte : https://github.com/jogibear9988