Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit c8b242b

Browse files
apmanapman
authoredJan 7, 2025
Add TreeView styling (#22)
1 parent 439f139 commit c8b242b

13 files changed

+367
-6
lines changed
 

Diff for: ‎samples/SampleApp/Assets/Folder.svg

+6
Loading

Diff for: ‎samples/SampleApp/Assets/_index.axaml

+1
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,6 @@
44

55
<!-- Each asset listed here also needs to be registered in `SampleApp.csproj` as `<AdditionalFiles ...>` -->
66
<SKPictureImage x:Key="PadlockIcon" Source="{x:Static local:Padlock.Picture}" />
7+
<SKPictureImage x:Key="FolderIcon" Source="{x:Static local:Folder.Picture}" />
78

89
</ResourceDictionary>

Diff for: ‎samples/SampleApp/DemoPages/Overview.axaml

+4-4
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@
2121
<TabItem Header="Tab 1">
2222
<StackPanel Orientation="Horizontal" Spacing="20">
2323
<StackPanel>
24-
<TextBox Watermark="Enter your name" />
25-
<TextBox
26-
InnerLeftContent="http://"
27-
InnerRightContent=".com" />
24+
<TextBox Watermark="Name" />
25+
<TextBox Watermark="YourDomain"
26+
InnerLeftContent="http://"
27+
InnerRightContent=".com" />
2828
<TextBox Classes="clearButton">With 'Clear' button</TextBox>
2929
<TextBox Watermark="Disabled" IsEnabled="False" />
3030
<TextBox PasswordChar="*" Classes="revealPasswordButton">Reveal Password</TextBox>

Diff for: ‎samples/SampleApp/DemoPages/TreeViewDemo.axaml

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<UserControl xmlns="https://github.com/avaloniaui"
2+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
4+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
5+
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
6+
x:Class="SampleApp.DemoPages.TreeViewDemo">
7+
8+
9+
<StackPanel Orientation="Horizontal" Spacing="30" VerticalAlignment="Top">
10+
<TreeView Width="150">
11+
<TreeViewItem Header="Level 1.1" IsExpanded="True">
12+
<TreeViewItem Header="Level 2.1" IsSelected="True" IsExpanded="True">
13+
<TreeViewItem Header="Level 3.1" />
14+
<TreeViewItem Header="Level 3.2">
15+
<TreeViewItem Header="Level 4.1" />
16+
<TreeViewItem Header="Level 4.2" />
17+
<TreeViewItem Header="Level 4.3" />
18+
19+
</TreeViewItem>
20+
</TreeViewItem>
21+
<TreeViewItem Header="Level 2.2" IsEnabled="False" />
22+
</TreeViewItem>
23+
</TreeView>
24+
25+
<!-- With icons -->
26+
<TreeView Width="150">
27+
<TreeViewItem IsExpanded="True">
28+
<TreeViewItem.Header>
29+
<StackPanel Orientation="Horizontal" Spacing="5">
30+
<Image Source="{StaticResource FolderIcon}" Width="16" Height="16" />
31+
<TextBlock>Level 1.1</TextBlock>
32+
</StackPanel>
33+
</TreeViewItem.Header>
34+
<TreeViewItem IsExpanded="True">
35+
<TreeViewItem.Header>
36+
<StackPanel Orientation="Horizontal" Spacing="5">
37+
<Image Source="{StaticResource FolderIcon}" Width="16" Height="16" />
38+
<TextBlock>Level 2.1</TextBlock>
39+
</StackPanel>
40+
</TreeViewItem.Header>
41+
<TreeViewItem>
42+
<TreeViewItem.Header>
43+
<StackPanel Orientation="Horizontal" Spacing="5">
44+
<Image Source="{StaticResource FolderIcon}" Width="16" Height="16" />
45+
<TextBlock>Level 3.1</TextBlock>
46+
</StackPanel>
47+
</TreeViewItem.Header>
48+
</TreeViewItem>
49+
<TreeViewItem>
50+
<TreeViewItem.Header>
51+
<StackPanel Orientation="Horizontal" Spacing="5">
52+
<Image Source="{StaticResource FolderIcon}" Width="16" Height="16" />
53+
<TextBlock>Level 3.2</TextBlock>
54+
</StackPanel>
55+
</TreeViewItem.Header>
56+
</TreeViewItem>
57+
<TreeViewItem>
58+
<TreeViewItem.Header>
59+
<StackPanel Orientation="Horizontal" Spacing="5">
60+
<Image Source="{StaticResource FolderIcon}" Width="16" Height="16" />
61+
<TextBlock>Level 3.3</TextBlock>
62+
</StackPanel>
63+
</TreeViewItem.Header>
64+
<TreeViewItem>
65+
<TreeViewItem.Header>
66+
<StackPanel Orientation="Horizontal" Spacing="5">
67+
<Image Source="{StaticResource FolderIcon}" Width="16" Height="16" />
68+
<TextBlock>Level 4.1</TextBlock>
69+
</StackPanel>
70+
</TreeViewItem.Header>
71+
</TreeViewItem>
72+
<TreeViewItem>
73+
<TreeViewItem.Header>
74+
<StackPanel Orientation="Horizontal" Spacing="5">
75+
<Image Source="{StaticResource FolderIcon}" Width="16" Height="16" />
76+
<TextBlock>Level 4.2</TextBlock>
77+
</StackPanel>
78+
</TreeViewItem.Header>
79+
</TreeViewItem>
80+
<TreeViewItem IsEnabled="False" />
81+
</TreeViewItem>
82+
</TreeViewItem>
83+
</TreeViewItem>
84+
</TreeView>
85+
86+
<!-- With alternating row colour & scrolling -->
87+
<StackPanel Spacing="20">
88+
89+
<TreeView Width="150" Height="160" Classes="AlternatingRowColor" BorderBrush="LightGray" BorderThickness="1">
90+
<TreeViewItem Header="Level 1.1">
91+
<TreeViewItem Header="Level 2.1" />
92+
<TreeViewItem Header="Level 2.2" />
93+
<TreeViewItem Header="Level 2.3" />
94+
<TreeViewItem Header="Level 2.4" />
95+
<TreeViewItem Header="Level 2.5" />
96+
<TreeViewItem Header="Level 2.6" />
97+
<TreeViewItem Header="Level 2.7">
98+
<TreeViewItem Header="Level 3.1" />
99+
<TreeViewItem Header="Level 3.2" IsSelected="True" />
100+
<TreeViewItem Header="Level 3.3">
101+
<TreeViewItem Header="Level 4.1" />
102+
<TreeViewItem Header="Level 4.2" />
103+
</TreeViewItem>
104+
</TreeViewItem>
105+
<TreeViewItem Header="Level 2.8" IsEnabled="False" />
106+
</TreeViewItem>
107+
<TreeViewItem Header="Level 1.2" />
108+
</TreeView>
109+
<TextBlock TextWrapping="Wrap" HorizontalAlignment="Center">
110+
For alternating row colour use: <LineBreak />
111+
<TextBlock Classes="code" FontSize="13" Text="Classes=&quot;AlternatingRowColor&quot;" />
112+
</TextBlock>
113+
</StackPanel>
114+
</StackPanel>
115+
</UserControl>

Diff for: ‎samples/SampleApp/DemoPages/TreeViewDemo.axaml.cs

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
using Avalonia.Controls;
2+
3+
namespace SampleApp.DemoPages;
4+
5+
public partial class TreeViewDemo : UserControl
6+
{
7+
public TreeViewDemo()
8+
{
9+
InitializeComponent();
10+
}
11+
}

Diff for: ‎samples/SampleApp/MainWindow.axaml

+5-1
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,16 @@
2828
<TabItem Header="TabControl">
2929
<demoPages:TabControlDemo />
3030
</TabItem>
31-
<TabItem Header="TextBox" IsSelected="True">
31+
<TabItem Header="TextBox">
3232
<demoPages:TextBoxDemo />
3333
</TabItem>
3434
<TabItem Header="Toggle Switch [WIP]">
3535
<demoPages:ToggleSwitchDemo />
3636
</TabItem>
37+
<TabItem Header="TreeView" IsSelected="True">
38+
<demoPages:TreeViewDemo />
39+
</TabItem>
40+
3741

3842
<TabItem>
3943
<TabItem.Header>

Diff for: ‎samples/SampleApp/SampleApp.csproj

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626

2727
<ItemGroup>
2828
<AdditionalFiles Include="Assets/Padlock.svg" NamespaceName="SampleApp" ClassName="Padlock"/>
29+
<AdditionalFiles Include="Assets/Folder.svg" NamespaceName="SampleApp" ClassName="Folder"/>
2930
</ItemGroup>
3031

3132
<!-- Temporary link for development.

Diff for: ‎src/Devolutions.MacOS.Avalonia.Theme/Accents/Assets/Alternating_Row_Background_Light.png

299 Bytes
Loading

Diff for: ‎src/Devolutions.MacOS.Avalonia.Theme/Accents/ThemeResources.axaml

+16-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<x:Double x:Key="PasswordHiddenFontSize">8</x:Double>
2323

2424

25-
<SolidColorBrush x:Key="ForegroundHighBrush" Color="{StaticResource ForegroundColor}" />
25+
<SolidColorBrush x:Key="ForegroundHighBrush" Color="{StaticResource ForegroundColor}" Opacity="0.85" />
2626
<SolidColorBrush x:Key="ForegroundMidBrush" Color="{StaticResource ForegroundColor}" Opacity="0.5" />
2727
<SolidColorBrush x:Key="ForegroundLowBrush" Color="{StaticResource ForegroundColor}" Opacity="0.25" />
2828

@@ -140,6 +140,21 @@
140140
<SolidColorBrush x:Key="TextBoxBackgroundDisabledHighBrush"
141141
Color="{StaticResource BackgroundColor}" Opacity="0.5" />
142142

143+
<!-- TreeView Resources -->
144+
<SolidColorBrush x:Key="TreeViewItemBackgroundSelected" Color="{StaticResource SystemAccentColor}" />
145+
<SolidColorBrush x:Key="TreeViewItemForegroundSelected" Color="{StaticResource AccentForegroundColor}" />
146+
<SolidColorBrush x:Key="TreeViewItemBackgroundAlternating"
147+
Color="{StaticResource ForegroundColor}" Opacity="0.04" />
148+
<x:Double x:Key="TreeViewItemChevronSize">8</x:Double>
149+
<x:Double x:Key="TreeViewItemIndent">15</x:Double>
150+
<Thickness x:Key="TreeViewItemChevronMargin">14, 0, 4, 0</Thickness>
151+
152+
<ImageBrush x:Key="StripedBackgroundBrush"
153+
Source="avares://Devolutions.MacOS.Avalonia.Theme/Accents/Assets/Alternating_Row_Background_Light.png"
154+
TileMode="Tile"
155+
Stretch="None"
156+
DestinationRect="0 0 40 40" />
157+
143158
<!-- DEVELOPMENT ONLY -->
144159
<SolidColorBrush x:Key="TestGreen" Color="Green" />
145160
<SolidColorBrush x:Key="TestRed" Color="Red" />

Diff for: ‎src/Devolutions.MacOS.Avalonia.Theme/Controls/TreeView.axaml

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<ResourceDictionary xmlns="https://github.com/avaloniaui"
2+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
3+
<Design.PreviewWith>
4+
<Border Padding="20">
5+
<StackPanel Spacing="20">
6+
<TreeView>
7+
<TreeViewItem Header="Root" IsExpanded="True">
8+
<TreeViewItem Header="Child1" />
9+
<TreeViewItem Header="Child2" />
10+
</TreeViewItem>
11+
</TreeView>
12+
</StackPanel>
13+
</Border>
14+
</Design.PreviewWith>
15+
16+
<ControlTheme x:Key="{x:Type TreeView}" TargetType="TreeView">
17+
<Setter Property="Background" Value="Transparent" />
18+
<Setter Property="BorderBrush" Value="Transparent" />
19+
<Setter Property="BorderThickness" Value="0" />
20+
<Setter Property="Padding" Value="0" />
21+
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
22+
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
23+
<Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
24+
<Setter Property="Template">
25+
<ControlTemplate>
26+
<Border BorderBrush="{TemplateBinding BorderBrush}"
27+
BorderThickness="{TemplateBinding BorderThickness}"
28+
CornerRadius="{TemplateBinding CornerRadius}">
29+
<ScrollViewer
30+
HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
31+
VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}"
32+
IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
33+
IsDeferredScrollingEnabled="{TemplateBinding (ScrollViewer.IsDeferredScrollingEnabled)}"
34+
AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
35+
BringIntoViewOnFocusChange="{TemplateBinding (ScrollViewer.BringIntoViewOnFocusChange)}">
36+
<Panel Name="BackgroundPanel"
37+
Background="{TemplateBinding Background}">
38+
<ItemsPresenter Name="PART_ItemsPresenter"
39+
ItemsPanel="{TemplateBinding ItemsPanel}"
40+
Margin="{TemplateBinding Padding}" />
41+
</Panel>
42+
</ScrollViewer>
43+
</Border>
44+
</ControlTemplate>
45+
</Setter>
46+
47+
<Style Selector="^.AlternatingRowColor /template/ Panel#BackgroundPanel">
48+
<Setter Property="Background" Value="{DynamicResource StripedBackgroundBrush}" />
49+
</Style>
50+
</ControlTheme>
51+
</ResourceDictionary>
There was a problem loading the remainder of the diff.

0 commit comments

Comments
 (0)
Please sign in to comment.