Skip to content

Commit e68b236

Browse files
CalvinAllenCalvinAllen
authored
feat(ui): implement theme-aware icons using VS KnownMonikers (#318)
1 parent eaf282b commit e68b236

File tree

1 file changed

+89
-34
lines changed

1 file changed

+89
-34
lines changed

‎src/CodingWithCalvin.CouchbaseExplorer/CouchbaseExplorerWindowControl.xaml‎

Lines changed: 89 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
55
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
66
xmlns:vsshell="clr-namespace:Microsoft.VisualStudio.Shell;assembly=Microsoft.VisualStudio.Shell.15.0"
7+
xmlns:imaging="clr-namespace:Microsoft.VisualStudio.Imaging;assembly=Microsoft.VisualStudio.Imaging"
8+
xmlns:catalog="clr-namespace:Microsoft.VisualStudio.Imaging;assembly=Microsoft.VisualStudio.ImageCatalog"
9+
xmlns:theming="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Imaging"
710
xmlns:vm="clr-namespace:CodingWithCalvin.CouchbaseExplorer.ViewModels"
811
Background="{DynamicResource {x:Static vsshell:VsBrushes.WindowKey}}"
912
Foreground="{DynamicResource {x:Static vsshell:VsBrushes.WindowTextKey}}"
@@ -70,78 +73,98 @@
7073
<!-- Data Template for Connection Node -->
7174
<HierarchicalDataTemplate DataType="{x:Type vm:ConnectionNode}" ItemsSource="{Binding Children}">
7275
<StackPanel Orientation="Horizontal">
73-
<TextBlock Text="⚡" Margin="0,0,5,0" Visibility="{Binding IsConnected, Converter={StaticResource BoolToVisibilityConverter}, FallbackValue=Collapsed}" />
74-
<TextBlock Text="○" Margin="0,0,5,0" Visibility="{Binding IsConnected, Converter={StaticResource InverseBoolToVisibilityConverter}, FallbackValue=Visible}" />
75-
<TextBlock Text="{Binding Name}" />
76+
<imaging:CrispImage Width="16" Height="16" Margin="0,0,5,0"
77+
Moniker="{x:Static catalog:KnownMonikers.DatabaseRunning}"
78+
Visibility="{Binding IsConnected, Converter={StaticResource BoolToVisibilityConverter}, FallbackValue=Collapsed}" />
79+
<imaging:CrispImage Width="16" Height="16" Margin="0,0,5,0"
80+
Moniker="{x:Static catalog:KnownMonikers.Disconnect}"
81+
Visibility="{Binding IsConnected, Converter={StaticResource InverseBoolToVisibilityConverter}, FallbackValue=Visible}" />
82+
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" />
7683
</StackPanel>
7784
</HierarchicalDataTemplate>
7885

7986
<!-- Data Template for Buckets Folder Node -->
8087
<HierarchicalDataTemplate DataType="{x:Type vm:BucketsFolderNode}" ItemsSource="{Binding Children}">
8188
<StackPanel Orientation="Horizontal">
82-
<TextBlock Text="📁" Margin="0,0,5,0" />
83-
<TextBlock Text="{Binding Name}" />
89+
<imaging:CrispImage Width="16" Height="16" Margin="0,0,5,0"
90+
Moniker="{x:Static catalog:KnownMonikers.FolderClosed}" />
91+
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" />
8492
</StackPanel>
8593
</HierarchicalDataTemplate>
8694

8795
<!-- Data Template for Indexes Folder Node -->
8896
<HierarchicalDataTemplate DataType="{x:Type vm:IndexesFolderNode}" ItemsSource="{Binding Children}">
8997
<StackPanel Orientation="Horizontal">
90-
<TextBlock Text="📁" Margin="0,0,5,0" />
91-
<TextBlock Text="{Binding Name}" />
98+
<imaging:CrispImage Width="16" Height="16" Margin="0,0,5,0"
99+
Moniker="{x:Static catalog:KnownMonikers.FolderClosed}" />
100+
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" />
92101
</StackPanel>
93102
</HierarchicalDataTemplate>
94103

95104
<!-- Data Template for Bucket Node -->
96105
<HierarchicalDataTemplate DataType="{x:Type vm:BucketNode}" ItemsSource="{Binding Children}">
97106
<StackPanel Orientation="Horizontal">
98-
<TextBlock Text="🪣" Margin="0,0,5,0" />
99-
<TextBlock Text="{Binding Name}" />
107+
<imaging:CrispImage Width="16" Height="16" Margin="0,0,5,0"
108+
Moniker="{x:Static catalog:KnownMonikers.Database}" />
109+
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" />
100110
</StackPanel>
101111
</HierarchicalDataTemplate>
102112

103113
<!-- Data Template for Scope Node -->
104114
<HierarchicalDataTemplate DataType="{x:Type vm:ScopeNode}" ItemsSource="{Binding Children}">
105115
<StackPanel Orientation="Horizontal">
106-
<TextBlock Text="📂" Margin="0,0,5,0" />
107-
<TextBlock Text="{Binding Name}" />
116+
<imaging:CrispImage Width="16" Height="16" Margin="0,0,5,0"
117+
Moniker="{x:Static catalog:KnownMonikers.Namespace}" />
118+
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" />
108119
</StackPanel>
109120
</HierarchicalDataTemplate>
110121

111122
<!-- Data Template for Collection Node -->
112123
<HierarchicalDataTemplate DataType="{x:Type vm:CollectionNode}" ItemsSource="{Binding Children}">
113124
<StackPanel Orientation="Horizontal">
114-
<TextBlock Text="📄" Margin="0,0,5,0" />
115-
<TextBlock Text="{Binding Name}" />
125+
<imaging:CrispImage Width="16" Height="16" Margin="0,0,5,0"
126+
Moniker="{x:Static catalog:KnownMonikers.Table}" />
127+
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" />
116128
</StackPanel>
117129
</HierarchicalDataTemplate>
118130

119131
<!-- Data Template for Document Node -->
120132
<DataTemplate DataType="{x:Type vm:DocumentNode}">
121133
<StackPanel Orientation="Horizontal">
122-
<TextBlock Text="{}{ }" Margin="0,0,5,0" FontFamily="Consolas" />
123-
<TextBlock Text="{Binding Name}" />
134+
<imaging:CrispImage Width="16" Height="16" Margin="0,0,5,0"
135+
Moniker="{x:Static catalog:KnownMonikers.Document}" />
136+
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" />
124137
</StackPanel>
125138
</DataTemplate>
126139

127140
<!-- Data Template for Index Node -->
128141
<DataTemplate DataType="{x:Type vm:IndexNode}">
129142
<StackPanel Orientation="Horizontal">
130-
<TextBlock Text="⚡" Margin="0,0,5,0" />
131-
<TextBlock Text="{Binding Name}" />
143+
<imaging:CrispImage Width="16" Height="16" Margin="0,0,5,0"
144+
Moniker="{x:Static catalog:KnownMonikers.SearchMember}" />
145+
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" />
132146
</StackPanel>
133147
</DataTemplate>
134148

135149
<!-- Data Template for Placeholder Node (Loading...) -->
136150
<DataTemplate DataType="{x:Type vm:PlaceholderNode}">
137-
<TextBlock Text="{Binding Name}" FontStyle="Italic"
138-
Foreground="{DynamicResource {x:Static vsshell:VsBrushes.GrayTextKey}}" />
151+
<StackPanel Orientation="Horizontal">
152+
<imaging:CrispImage Width="16" Height="16" Margin="0,0,5,0"
153+
Moniker="{x:Static catalog:KnownMonikers.StatusRunning}" />
154+
<TextBlock Text="{Binding Name}" FontStyle="Italic" VerticalAlignment="Center"
155+
Foreground="{DynamicResource {x:Static vsshell:VsBrushes.GrayTextKey}}" />
156+
</StackPanel>
139157
</DataTemplate>
140158

141159
<!-- Data Template for Load More Node -->
142160
<DataTemplate DataType="{x:Type vm:LoadMoreNode}">
143-
<TextBlock Text="{Binding Name}" FontStyle="Italic" TextDecorations="Underline" Cursor="Hand"
144-
Foreground="{DynamicResource {x:Static vsshell:VsBrushes.HighlightKey}}" />
161+
<StackPanel Orientation="Horizontal">
162+
<imaging:CrispImage Width="16" Height="16" Margin="0,0,5,0"
163+
Moniker="{x:Static catalog:KnownMonikers.Download}" />
164+
<TextBlock Text="{Binding Name}" FontStyle="Italic" TextDecorations="Underline" Cursor="Hand"
165+
VerticalAlignment="Center"
166+
Foreground="{DynamicResource {x:Static vsshell:VsBrushes.HighlightKey}}" />
167+
</StackPanel>
145168
</DataTemplate>
146169

147170
<!-- Bool to Visibility Converter -->
@@ -161,18 +184,49 @@
161184
</Grid.RowDefinitions>
162185

163186
<!-- Toolbar -->
164-
<ToolBar Grid.Row="0"
165-
Background="{DynamicResource {x:Static vsshell:VsBrushes.CommandBarGradientKey}}">
166-
<Button Command="{Binding AddConnectionCommand}" ToolTip="Add Connection">
167-
<TextBlock Text="➕" />
168-
</Button>
169-
<Button Command="{Binding RefreshCommand}" ToolTip="Refresh">
170-
<TextBlock Text="🔄" />
171-
</Button>
172-
<Button Command="{Binding CollapseAllCommand}" ToolTip="Collapse All">
173-
<TextBlock Text="⊟" />
174-
</Button>
175-
</ToolBar>
187+
<Border Grid.Row="0"
188+
Background="{DynamicResource {x:Static vsshell:VsBrushes.ToolWindowBackgroundKey}}"
189+
BorderBrush="{DynamicResource {x:Static vsshell:VsBrushes.ToolWindowBorderKey}}"
190+
BorderThickness="0,0,0,1"
191+
Padding="2"
192+
theming:ImageThemingUtilities.ImageBackgroundColor="{DynamicResource {x:Static vsshell:VsColors.ToolWindowBackgroundKey}}">
193+
<Border.Resources>
194+
<Style TargetType="Button">
195+
<Setter Property="Background" Value="Transparent" />
196+
<Setter Property="BorderThickness" Value="0" />
197+
<Setter Property="Padding" Value="4" />
198+
<Setter Property="Template">
199+
<Setter.Value>
200+
<ControlTemplate TargetType="Button">
201+
<Border Background="{TemplateBinding Background}"
202+
Padding="{TemplateBinding Padding}">
203+
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
204+
</Border>
205+
<ControlTemplate.Triggers>
206+
<Trigger Property="IsEnabled" Value="False">
207+
<Setter Property="Opacity" Value="0.5" />
208+
</Trigger>
209+
<Trigger Property="IsMouseOver" Value="True">
210+
<Setter Property="Background" Value="{DynamicResource {x:Static vsshell:VsBrushes.CommandBarHoverKey}}" />
211+
</Trigger>
212+
</ControlTemplate.Triggers>
213+
</ControlTemplate>
214+
</Setter.Value>
215+
</Setter>
216+
</Style>
217+
</Border.Resources>
218+
<StackPanel Orientation="Horizontal">
219+
<Button Command="{Binding AddConnectionCommand}" ToolTip="Add Connection">
220+
<imaging:CrispImage Width="16" Height="16" Moniker="{x:Static catalog:KnownMonikers.Add}" />
221+
</Button>
222+
<Button Command="{Binding RefreshCommand}" ToolTip="Refresh">
223+
<imaging:CrispImage Width="16" Height="16" Moniker="{x:Static catalog:KnownMonikers.Refresh}" />
224+
</Button>
225+
<Button Command="{Binding CollapseAllCommand}" ToolTip="Collapse All">
226+
<imaging:CrispImage Width="16" Height="16" Moniker="{x:Static catalog:KnownMonikers.CollapseAll}" />
227+
</Button>
228+
</StackPanel>
229+
</Border>
176230

177231
<!-- Tree View -->
178232
<TreeView Grid.Row="1"
@@ -182,7 +236,8 @@
182236
BorderThickness="0"
183237
ContextMenu="{StaticResource RootContextMenu}"
184238
VirtualizingStackPanel.IsVirtualizing="True"
185-
VirtualizingStackPanel.VirtualizationMode="Recycling">
239+
VirtualizingStackPanel.VirtualizationMode="Recycling"
240+
theming:ImageThemingUtilities.ImageBackgroundColor="{DynamicResource {x:Static vsshell:VsColors.ToolWindowBackgroundKey}}">
186241
<TreeView.ItemContainerStyle>
187242
<Style TargetType="TreeViewItem">
188243
<Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />

0 commit comments

Comments
 (0)