Skip to content
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

TreeView Visual Update #4908

Merged
merged 16 commits into from
May 11, 2021
Merged

TreeView Visual Update #4908

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
400c184
update treeview visuals
karkarl Apr 27, 2021
2ba4c24
changes from comments
karkarl Apr 27, 2021
f86b460
update verification files
karkarl Apr 28, 2021
fc6ec4a
fix tests
karkarl Apr 28, 2021
eeceb1a
changes from comments
karkarl Apr 29, 2021
984419d
update compact style
karkarl Apr 29, 2021
06a7fd4
fix tests
karkarl Apr 29, 2021
ab90a35
update verification files
karkarl Apr 30, 2021
b9349d8
udpate verificationfiles
karkarl May 3, 2021
996c013
fix treeview tests
karkarl May 4, 2021
168b7ea
fix treeviewdensitychange test
karkarl May 5, 2021
03f49c7
update verification files
karkarl May 5, 2021
b571377
visual updates
karkarl May 10, 2021
d86d3c6
update verification files
karkarl May 10, 2021
001f245
fix heights
karkarl May 10, 2021
d5148ab
update verification files
karkarl May 11, 2021
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
23 changes: 13 additions & 10 deletions dev/TreeView/InteractionTests/TreeViewTests.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -817,8 +817,8 @@ private void TreeViewDragAndDropBetweenNodes(bool isContentMode = false)
UIObject dragUIObject = FindElement.ById("Root.0");

var height = dragUIObject.BoundingRectangle.Height;
// 5% from the edge of the next item
var distance = (int)(height * 1.45);
// Drag distance is 1.75 times the height of a TreeViewItem
var distance = (int)(height * 1.75);

Log.Comment("Click on the item to help make the drag more reliable");
dragUIObject.Click();
Expand Down Expand Up @@ -857,7 +857,7 @@ public void TreeViewDensityChange()
{
UIObject root = LabelFirstItem();
int height = root.BoundingRectangle.Height;
Verify.AreEqual(height, 32);
Verify.AreEqual(height, 28);
}
}

Expand Down Expand Up @@ -1052,8 +1052,8 @@ private void TreeViewMultiSelectDragAndDropBetweenNodes(bool isContentMode = fal
UIObject dragUIObject = FindElement.ById("Root.1");

var height = dragUIObject.BoundingRectangle.Height;
// 5% from the edge of the next item
var distance = (int)(height * 1.45);
// Drag distance is 1.75 times the height of a TreeViewItem
var distance = (int)(height * 1.75);

Log.Comment("Starting Drag...distance:" + distance);
InputHelper.DragDistance(dragUIObject, distance, Direction.South);
Expand Down Expand Up @@ -1199,8 +1199,8 @@ private void ValidateMultiSelectDragDropRootsAndNonRoots(bool isContentMode = fa
UIObject dragUIObject = FindElement.ById("Root.1.0");

var height = dragUIObject.BoundingRectangle.Height;
// 5% from the edge of the next item
var distance = (int)(height * 1.45);
// Drag distance is 1.75 times the height of a TreeViewItem
var distance = (int)(height * 1.75);

Log.Comment("Starting Drag...distance:" + distance);
InputHelper.DragDistance(dragUIObject, distance, Direction.South);
Expand Down Expand Up @@ -1449,7 +1449,8 @@ private void TreeViewNoReorderIntoChildren(bool isContentMode = false)
UIObject dragUIObject = FindElement.ById("Root.1");
Verify.IsNotNull(dragUIObject);

var height = dragUIObject.BoundingRectangle.Height;
var topBottomMargin = 4; // To account for the 2px top and 2px bottom margin for TreeViewItem
var height = dragUIObject.BoundingRectangle.Height + topBottomMargin;
// 5% from the edge of the next item
var distance = (int)(height * 1.45);

Expand Down Expand Up @@ -2246,9 +2247,11 @@ public void TreeViewItemTemplateSelectorTest()
UIObject node2 = FindElement.ByName("Template2");
Verify.IsNotNull(node2, "Verifying template 2 is set");

var topBottomMargin = 4; // To account for the 2px top and 2px bottom margins for TreeViewItem

// Verify item container styles are set correctly by checking heights
Verify.AreEqual(node1.BoundingRectangle.Height, 50);
Verify.AreEqual(node2.BoundingRectangle.Height, 60);
Verify.AreEqual(node1.BoundingRectangle.Height, 50 - topBottomMargin);
Verify.AreEqual(node2.BoundingRectangle.Height, 60 - topBottomMargin);
}
}

Expand Down
2 changes: 1 addition & 1 deletion dev/TreeView/TreeView.idl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ unsealed runtimeclass TreeViewItem : Windows.UI.Xaml.Controls.ListViewItem
String ExpandedGlyph { get; set; };
[MUX_DEFAULT_VALUE("\uE76C")]
String CollapsedGlyph { get; set; };
[MUX_DEFAULT_VALUE("12.0")]
[MUX_DEFAULT_VALUE("8.0")]
Double GlyphSize { get; set; };
[MUX_PROPERTY_CHANGED_CALLBACK(TRUE)]
Boolean IsExpanded { get; set; };
Expand Down
46 changes: 37 additions & 9 deletions dev/TreeView/TreeViewItem.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,18 @@
<Setter Property="BorderThickness" Value="{ThemeResource TreeViewItemBorderThemeThickness}"/>
<Setter Property="GlyphBrush" Value="{ThemeResource TreeViewItemForeground}"/>
<Setter Property="MinHeight" Value="{ThemeResource TreeViewItemMinHeight}"/>
<contract7Present:Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:TreeViewItem">
<Grid x:Name="ContentPresenterGrid" Margin="0,0,0,0"
<Grid x:Name="ContentPresenterGrid"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
contract7Present:CornerRadius="{TemplateBinding CornerRadius}">
Margin="{ThemeResource TreeViewItemPresenterMargin}"
Padding="{ThemeResource TreeViewItemPresenterPadding}"
contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
contract7NotPresent:CornerRadius="{ThemeResource ControlCornerRadius}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
Expand All @@ -46,6 +50,7 @@
<Setter Target="ContentPresenterGrid.Background" Value="{ThemeResource TreeViewItemBackgroundSelected}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TreeViewItemForegroundSelected}" />
<Setter Target="ContentPresenterGrid.BorderBrush" Value="{ThemeResource TreeViewItemBorderBrushSelected}" />
<Setter Target="SelectionIndicator.Opacity" Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
Expand All @@ -60,13 +65,15 @@
<Setter Target="ContentPresenterGrid.Background" Value="{ThemeResource TreeViewItemBackgroundSelectedPointerOver}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TreeViewItemForegroundSelectedPointerOver}" />
<Setter Target="ContentPresenterGrid.BorderBrush" Value="{ThemeResource TreeViewItemBorderBrushSelectedPointerOver}" />
<Setter Target="SelectionIndicator.Opacity" Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PressedSelected">
<VisualState.Setters>
<Setter Target="ContentPresenterGrid.Background" Value="{ThemeResource TreeViewItemBackgroundSelectedPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TreeViewItemForegroundSelectedPressed}" />
<Setter Target="ContentPresenterGrid.BorderBrush" Value="{ThemeResource TreeViewItemBorderBrushSelectedPressed}" />
<Setter Target="SelectionIndicator.Opacity" Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="SelectedDisabled">
Expand All @@ -87,14 +94,16 @@
<VisualState x:Name="TreeViewMultiSelectEnabledUnselected">
<VisualState.Setters>
<Setter Target="MultiSelectCheckBox.Visibility" Value="Visible" />
<Setter Target="ExpandCollapseChevron.Padding" Value="0,0,12,0" />
<Setter Target="ExpandCollapseChevron.Padding" Value="0,0,14,0" />
<Setter Target="ContentPresenterGrid.Padding" Value="0" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="TreeViewMultiSelectEnabledSelected">
<VisualState.Setters>
<Setter Target="MultiSelectCheckBox.Visibility" Value="Visible" />
<Setter Target="MultiSelectGrid.Background" Value="{ThemeResource TreeViewItemBackgroundSelected}" />
<Setter Target="ExpandCollapseChevron.Padding" Value="0,0,12,0" />
<Setter Target="ExpandCollapseChevron.Padding" Value="0,0,14,0" />
<Setter Target="ContentPresenterGrid.Padding" Value="0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
Expand All @@ -109,6 +118,18 @@
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Rectangle
x:Name="SelectionIndicator"
Width="3"
Height="16"
Fill="{ThemeResource TreeViewItemSelectionIndicatorForeground}"
Opacity="0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
contract7Present:RadiusX="2"
contract7Present:RadiusY="2"/>


<Grid x:Name="MultiSelectGrid" Padding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TreeViewItemTemplateSettings.Indentation}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
Expand All @@ -120,7 +141,8 @@
<CheckBox x:Name="MultiSelectCheckBox"
Width="32"
MinWidth="32"
Margin="12,0,0,0"
MinHeight="{ThemeResource TreeViewItemMultiSelectCheckBoxMinHeight}"
Margin="10,0,0,0"
VerticalAlignment="Center"
Visibility="Collapsed"
IsTabStop="False"
Expand Down Expand Up @@ -149,25 +171,30 @@

<Grid x:Name="ExpandCollapseChevron"
Grid.Column="1"
Padding="12,0,12,0"
Padding="14,0"
Width="Auto"
Opacity="{TemplateBinding GlyphOpacity}"
Background="Transparent">
<TextBlock Foreground="{TemplateBinding GlyphBrush}"
Width="12" Height="12"
Width="12"
Height="12"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TreeViewItemTemplateSettings.CollapsedGlyphVisibility}"
FontSize="{TemplateBinding GlyphSize}" Text="{TemplateBinding CollapsedGlyph}"
FontSize="{TemplateBinding GlyphSize}"
Text="{TemplateBinding CollapsedGlyph}"
FontFamily="{StaticResource SymbolThemeFontFamily}"
Padding="2"
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
IsTextScaleFactorEnabled="False"
IsHitTestVisible="False"/>
<TextBlock Foreground="{TemplateBinding GlyphBrush}"
Width="12" Height="12"
Width="12"
Height="12"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TreeViewItemTemplateSettings.ExpandedGlyphVisibility}"
FontSize="{TemplateBinding GlyphSize}"
Text="{TemplateBinding ExpandedGlyph}"
FontFamily="{StaticResource SymbolThemeFontFamily}"
Padding="2"
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
IsTextScaleFactorEnabled="False"
Expand All @@ -181,6 +208,7 @@
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
MinHeight="{ThemeResource TreeViewItemContentHeight}"
Margin="{TemplateBinding Padding}" />
</Grid>
</Grid>
Expand Down
Loading