Skip to content

Migrate Document Outline to Fluent TreeView #82761

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
davkean wants to merge 1 commit into
base: main
Choose a base branch
from
+26 −99
Draft

Migrate Document Outline to Fluent TreeView #82761

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 9 additions & 40 deletions src/VisualStudio/Core/Def/DocumentOutline/DocumentOutlineView.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
xmlns:imagecatalog="clr-namespace:Microsoft.VisualStudio.Imaging;assembly=Microsoft.VisualStudio.ImageCatalog"
xmlns:vsui="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Shell.15.0"
xmlns:platformimaging="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Imaging"
xmlns:ctrls="clr-namespace:Microsoft.VisualStudio.Shell.Controls;assembly=Microsoft.VisualStudio.Shell.Styles"
xmlns:styles="clr-namespace:Microsoft.VisualStudio.Shell.Styles;assembly=Microsoft.VisualStudio.Shell.Styles"
xmlns:ComponentModel="clr-namespace:System.ComponentModel;assembly=WindowsBase"
d:DataContext="{d:DesignInstance Type=self:DocumentOutlineViewModel}"
mc:Ignorable="d"
Expand Down Expand Up @@ -60,11 +62,6 @@
</Style.Triggers>
</Style>

<Style TargetType="self:VirtualizingTreeView" BasedOn="{StaticResource {x:Static vsshell:VsResourceKeys.ThemedDialogTreeViewStyleKey}}" >
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="0, 5, 0, 0" />
</Style>

<Style TargetType="TextBox" BasedOn="{StaticResource {x:Static vsshell:VsResourceKeys.ThemedDialogTextBoxStyleKey}}" >
</Style>
</ResourceDictionary>
Expand All @@ -84,7 +81,7 @@
to mean that we should navigate to that item. By only hearing when the source is updated (meaning the user actually
clicked on the tree view item, not that we programmatically set it) we only actual perform the navigation on user
interaction. -->
<self:VirtualizingTreeView Grid.Row="2"
<ctrls:TreeView Grid.Row="2"
x:Name="SymbolTree"
AutomationProperties.Name="{x:Static self:DocumentOutlineStrings.Document_Outline}"
SourceUpdated="SymbolTree_SourceUpdated"
Expand All @@ -100,48 +97,20 @@
<Binding Path="DataContext.SortOption" RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=UserControl}" />
</MultiBinding>
</HierarchicalDataTemplate.ItemsSource>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border x:Name="SelectionIndicator"
Grid.Column="0"
Background="{DynamicResource {x:Static vsui:EnvironmentColors.SnaplinesBrushKey}}"
Visibility="Collapsed" />
<StackPanel Grid.Column="1"
Orientation="Horizontal"
VerticalAlignment="Center"
Margin="5, 0, 0, 0">
<imaging:CrispImage Moniker="{Binding ImageMoniker}" Margin="0, 0, 5, 0" />
<TextBlock Text="{Binding Data.Name}" />
</StackPanel>
</Grid>
<HierarchicalDataTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter TargetName="SelectionIndicator" Property="Visibility" Value="Visible" />
</DataTrigger>
</HierarchicalDataTemplate.Triggers>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<imaging:CrispImage Moniker="{Binding ImageMoniker}" Margin="{x:Static styles:Spacings.RightXS}" />
<TextBlock Text="{Binding Data.Name}" />
</StackPanel>
</HierarchicalDataTemplate>
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}"
Color="{StaticResource {x:Static vsshell:VsColors.ToolboxSelectedHeadingBeginKey}}" />
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}"
Color="{DynamicResource {x:Static vsshell:VsColors.ButtonTextKey}}"/>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="{StaticResource {x:Static vsshell:VsColors.ToolboxSelectedHeadingBeginKey}}" />
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}"
Color="{DynamicResource {x:Static vsshell:VsColors.ButtonTextKey}}"/>
</TreeView.Resources>
<TreeView.ItemContainerStyle>
<Style TargetType="TreeViewItem" BasedOn="{StaticResource {x:Static vsshell:VsResourceKeys.ThemedDialogTreeViewItemStyleKey}}">
<Style TargetType="{x:Type ctrls:TreeViewItem}">
<Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
<Setter Property="AutomationProperties.Name" Value="{Binding Data.Name, Mode=OneWay}" />
<!-- See docs above for why we set `NotifyOnSourceUpdated=True, NotifyOnTargetUpdated=False` -->
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay, NotifyOnSourceUpdated=True, NotifyOnTargetUpdated=False}" />
<Setter Property="Padding" Value="0, 0, 6, 1" />
<Setter Property="Margin" Value="0, 0, 0, 1" />
</Style>
</TreeView.ItemContainerStyle>
</self:VirtualizingTreeView>
</ctrls:TreeView>
</Grid>
</UserControl>
26 changes: 16 additions & 10 deletions src/VisualStudio/Core/Def/DocumentOutline/DocumentOutlineView.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,16 @@ public DocumentOutlineView(
_windowSearchHost = windowSearchHostFactory.CreateWindowSearchHost(SearchHost);
_windowSearchHost.SetupSearch(this);

// Apply Fluent style to the search control
foreach (UIElement child in SearchHost.Children)
{
if (child is Control control)
{
control.SetResourceReference(FrameworkElement.StyleProperty, "SearchControlToolBarStyleKey");
break;
}
}

this.PreviewKeyDown += OnPreviewKeyDown;
viewTracker.CaretMovedOrActiveViewChanged += ViewTracker_CaretMovedOrActiveViewChanged;
}
Expand Down Expand Up @@ -357,16 +367,12 @@ private void SymbolTreeItem_Selected(object sender, RoutedEventArgs e)
double renderHeight;
if (item.IsExpanded && item.HasItems)
{
// The first child is a container. Inside the container are three children:
// 1. The expander
// 2. The border for the header item
// 3. The container for the children
//
// For expanded items, we want to only consider the render heigh of the header item, since that is
// the specific item which is selected.
var container = VisualTreeHelper.GetChild(item, 0);
var border = VisualTreeHelper.GetChild(container, 1);
renderHeight = ((UIElement)border).RenderSize.Height;
// For expanded items, we want to only consider the render height of the header area, since that is
// the specific item which is selected, not the expanded children below it.
// The Fluent TreeViewItem tracks header height automatically.
renderHeight = item is Shell.Controls.TreeViewItem { HeaderHeight: > 0 and var headerHeight }
? headerHeight
: item.RenderSize.Height;
}
else
{
Expand Down
49 changes: 0 additions & 49 deletions src/VisualStudio/Core/Def/DocumentOutline/VirtualizingTreeView.cs
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions src/VisualStudio/Core/Def/Microsoft.VisualStudio.LanguageServices.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@
<PackageReference Include="Microsoft.VisualStudio.Debugger.Engine-implementation" />
<PackageReference Include="Microsoft.VisualStudio.Sdk" />
<PackageReference Include="Microsoft.VisualStudio.Search" />
<PackageReference Include="Microsoft.VisualStudio.Shell.Styles" />
<PackageReference Include="Microsoft.VisualStudio.CallHierarchy.Package.Definitions" />
<PackageReference Include="Microsoft.VisualStudio.Language.CallHierarchy" />
<PackageReference Include="Microsoft.VisualStudio.VsInteractiveWindow" />
Expand Down
Loading