Skip to content

Commit

Permalink
fixed custombrowsercontrol visuals
Browse files Browse the repository at this point in the history 
- multiple ui fixes to the custom browser control
  • Loading branch information
@dnenov
dnenov committed Oct 30, 2023
1 parent b17a4af commit d57eb39
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 156 deletions.
169 changes: 50 additions & 119 deletions src/DynamoCoreWpf/Views/PackageManager/Controls/CustomBrowserControl.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
<SolidColorBrush x:Key="TreeViewItem.TreeArrow.Static.Checked.Fill" Color="#DCDCDC"/>
<SolidColorBrush x:Key="TreeViewItem.TreeArrow.MouseOver.Checked.Stroke" Color="Transparent"/>
<SolidColorBrush x:Key="TreeViewItem.TreeArrow.MouseOver.Checked.Fill" Color="#FF82DFFB"/>
<SolidColorBrush x:Key="StrokeBrush" Color="#696969" />

<PathGeometry x:Key="TreeArrow" Figures="M 0 0 L 0 7.2 L 4.8 3.6 Z"/>

Expand Down Expand Up @@ -70,99 +71,6 @@
</Setter.Value>
</Setter>
</Style>

<Style x:Key="InnerFolderToggleStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Focusable" Value="False"/>
<Setter Property="Width" Value="16"/>
<Setter Property="Height" Value="16"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Background="Transparent" Height="16" Padding="0" Width="16" Margin="-21 0 0 0">
<Canvas Height="16" Width="16">
<Path x:Name="IndentHorizontal" Data="M0,8 L16,8 Z" Stroke="#DCDCDC" StrokeDashArray="1 3"/>
<Path x:Name="ExpandPath" Data="{StaticResource TreeArrow}" Fill="{StaticResource TreeViewItem.TreeArrow.Static.Fill}" Stroke="{StaticResource TreeViewItem.TreeArrow.Static.Stroke}"
Margin="18 5 0 0">
<Path.RenderTransform>
<RotateTransform Angle="0" CenterY="3" CenterX="3"/>
</Path.RenderTransform>
</Path>
</Canvas>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="RenderTransform" TargetName="ExpandPath">
<Setter.Value>
<RotateTransform Angle="90" CenterY="3" CenterX="1.5"/>
</Setter.Value>
</Setter>
<Setter Property="Fill" TargetName="ExpandPath" Value="{StaticResource TreeViewItem.TreeArrow.Static.Checked.Fill}"/>
<Setter Property="Stroke" TargetName="ExpandPath" Value="{StaticResource TreeViewItem.TreeArrow.Static.Checked.Stroke}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" TargetName="ExpandPath" Value="{StaticResource TreeViewItem.TreeArrow.MouseOver.Stroke}"/>
<Setter Property="Fill" TargetName="ExpandPath" Value="{StaticResource TreeViewItem.TreeArrow.MouseOver.Fill}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsChecked" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Stroke" TargetName="ExpandPath" Value="{StaticResource TreeViewItem.TreeArrow.MouseOver.Checked.Stroke}"/>
<Setter Property="Fill" TargetName="ExpandPath" Value="{StaticResource TreeViewItem.TreeArrow.MouseOver.Checked.Fill}"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<!--File toggle-->
<Style x:Key="FileToggleStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Focusable" Value="False"/>
<Setter Property="Width" Value="16"/>
<Setter Property="Height" Value="16"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Background="Transparent" Height="16" Padding="0" Width="16">
<Canvas>
<Path x:Name="IndentHorizontal" Data="M0,8 L16,8 Z" Stroke="#DCDCDC" StrokeDashArray="1 3"/>
<!--<Path x:Name="IndentVertical" Data="M0,0 L0,16 Z" Stroke="#DCDCDC" StrokeDashArray="1 3"/>-->
</Canvas>
</Border>

</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="LastFileToggleStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Focusable" Value="False"/>
<Setter Property="Width" Value="16"/>
<Setter Property="Height" Value="16"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Background="Transparent" Height="16" Padding="0" Width="16">
<Canvas>
<Path x:Name="IndentHorizontal" Data="M0,8 L16,8 Z" Stroke="#DCDCDC" StrokeDashArray="1 3"/>
<!--<Path x:Name="IndentVertical" Data="M0,0 L0,8 Z" Stroke="#DCDCDC" StrokeDashArray="1 3"/>-->
</Canvas>
</Border>

</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TreeViewItemFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<!--Tree view style-->
<SolidColorBrush x:Key="ListBorder" Color="#828790"/>
Expand Down Expand Up @@ -316,38 +224,69 @@
<local:HasChildrenToVisibilityConverter x:Key="HasChildrenToVisibilityConverter" />
<local:DependencyTypeToVisibilityConverter x:Key="DependencyTypeToVisibilityConverter" />
<local:SortingConverter x:Key="SortingConverter" />
<local:ChildrenItemsContainsFolderToVisibilityConverter x:Key="ChildrenItemsContainsFolderToVisibilityConverter" />

<ControlTemplate x:Key="TreeViewItemControlTemplate1" TargetType="{x:Type TreeViewItem}">
<Grid x:Name="tvGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition MinWidth="19" Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition MinWidth="19" Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="24"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="24"/>
<RowDefinition Height="30"/>
<RowDefinition/>
</Grid.RowDefinitions>

<!-- Selection border -->
<Border Grid.ColumnSpan="5" Grid.Column="0" x:Name="SelectionBorder" Background="Transparent" Opacity="0.1"/>

<Border Grid.Column="0"
<!-- Vertical dash line and sets the indent -->
<Border Grid.Column="0" Grid.RowSpan="2" VerticalAlignment="Stretch"
Width="{Binding Path=(local:TreeViewItemHelper.Indent).Value, Mode=OneWay, RelativeSource={RelativeSource AncestorType=ItemsPresenter}}">
<Grid>
<!--<Rectangle Width="1" Height="24" Stroke="#DCDCDC" StrokeDashArray="3 3" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10 0 0 0"
x:Name="LongMarker" />-->
<Rectangle Width="1" Height="24" Stroke="#696969" StrokeDashArray="3 3" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0 0 5 0"
x:Name="VerticalMarker"/>
</Grid>
<Rectangle Width="1" Height="Auto" Stroke="{StaticResource StrokeBrush}"
HorizontalAlignment="Right"
VerticalAlignment="Stretch"
StrokeDashArray="1,2.3"
StrokeThickness="3"
UseLayoutRounding="True"
SnapsToDevicePixels="True"
Margin="0 -8 0 14"
x:Name="VerticalMarker">
</Rectangle>
</Border>

<!-- Horizontal dash line -->
<Border Grid.Column="1">
<Rectangle Width="18" Height="1"
StrokeDashArray="1,3,1,2"
StrokeThickness="3" Stroke="{StaticResource StrokeBrush}" HorizontalAlignment="Left" VerticalAlignment="Center"
Margin="-1 3 0 0"
Visibility="Visible"
x:Name="HorizontalMarker"/>
</Border>

<!-- Arrow expander -->
<ToggleButton x:Name="Expander"
Grid.Column="2"
Margin="-15 0 0 0"
ClickMode="Press"
IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
Style="{StaticResource FolderToggleStyle}"
Visibility="{Binding ChildItems,
Converter={StaticResource ChildrenItemsContainsFolderToVisibilityConverter}}" />
<!-- Content presenter -->
<Border x:Name="Bd"
Grid.Column="3"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="True">

<ToggleButton x:Name="Expander" Grid.Column="1" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource FolderToggleStyle}"/>

<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="2" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
<Grid>
<Grid>
<ContentPresenter x:Name="PART_Header"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="{TemplateBinding Header}"
Expand All @@ -357,14 +296,11 @@
VerticalAlignment="Center"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>

<Rectangle Width="10" Height="1" Stroke="#696969" StrokeDashArray="2 2" HorizontalAlignment="Left" VerticalAlignment="Center"
Margin="-26 0 -5 0"
x:Name="HorizontalMarker"/>
</Grid>
</Border>

<!-- Right buttons -->
<Grid Grid.Column="4" HorizontalAlignment="Right">
<!-- Garbage icon remove item button -->
<Grid Grid.Column="4" HorizontalAlignment="Right" Margin="0 0 8 0">
<Button Margin="2"
x:Name="RemoveButton"
BorderThickness="0"
Expand All @@ -389,6 +325,7 @@
</ControlTemplate>
</Button.Template>
</Button>

</Grid>

<ItemsPresenter x:Name="ItemsHost" Grid.ColumnSpan="5" Grid.Column="0" Grid.Row="1"
Expand All @@ -398,12 +335,6 @@
<Trigger Property="IsExpanded" Value="False">
<Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/>
</Trigger>
<!--<Trigger Property="HasItems" Value="False">
<Setter Property="Visibility" TargetName="Expander" Value="Hidden"/>
</Trigger>-->
<Trigger Property="HasItems" Value="True">
<Setter Property="Height" TargetName="VerticalMarker" Value="12"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" TargetName="Bd" Value="Transparent"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
Expand Down Expand Up @@ -463,7 +394,7 @@
SnapsToDevicePixels="True"
UseLayoutRounding="True"
TextTrimming="CharacterEllipsis"
Width="230"
Width="180"
FontFamily="{StaticResource ArtifaktElementRegular}"/>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
Expand Down
Loading

0 comments on commit d57eb39

Please sign in to comment.