ux: Opacity for selected items

This commit is contained in:
leo 2024-06-04 17:29:08 +08:00
parent 4be068eb21
commit d2ea90be23
3 changed files with 82 additions and 34 deletions

View file

@ -1045,32 +1045,33 @@
<ControlTemplate> <ControlTemplate>
<StackPanel> <StackPanel>
<Border Name="PART_LayoutRoot" <Border Name="PART_LayoutRoot"
Classes="TreeViewItemLayoutRoot" Background="Transparent"
Focusable="True" BorderThickness="0"
Background="{TemplateBinding Background}" CornerRadius="0"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
MinHeight="{TemplateBinding MinHeight}" MinHeight="{TemplateBinding MinHeight}"
TemplatedControl.IsTemplateFocusTarget="True"> TemplatedControl.IsTemplateFocusTarget="True">
<Grid Name="PART_Header" ColumnDefinitions="16,*" Margin="{TemplateBinding Level, Mode=OneWay, Converter={StaticResource TreeViewItemLeftMarginConverter}}"> <Grid>
<Panel Name="PART_ExpandCollapseChevronContainer"> <Border Name="PART_Background" CornerRadius="{TemplateBinding CornerRadius}" Background="Transparent"/>
<ToggleButton Name="PART_ExpandCollapseChevron"
Classes="tree_expander" <Grid Name="PART_Header" ColumnDefinitions="16,*" Margin="{TemplateBinding Level, Mode=OneWay, Converter={StaticResource TreeViewItemLeftMarginConverter}}">
Focusable="False" <Panel Name="PART_ExpandCollapseChevronContainer">
HorizontalAlignment="Center" <ToggleButton Name="PART_ExpandCollapseChevron"
IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" /> Classes="tree_expander"
</Panel>
<ContentPresenter Name="PART_HeaderPresenter"
Grid.Column="1"
Focusable="False" Focusable="False"
Background="Transparent" HorizontalAlignment="Center"
Content="{TemplateBinding Header}" IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" />
ContentTemplate="{TemplateBinding HeaderTemplate}" </Panel>
HorizontalAlignment="{TemplateBinding HorizontalAlignment}" <ContentPresenter Name="PART_HeaderPresenter"
VerticalAlignment="{TemplateBinding VerticalAlignment}" Grid.Column="1"
Margin="{TemplateBinding Padding}" /> Focusable="False"
</Grid> Background="Transparent"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Margin="{TemplateBinding Padding}" />
</Grid>
</Grid>
</Border> </Border>
<ItemsPresenter Name="PART_ItemsPresenter" <ItemsPresenter Name="PART_ItemsPresenter"
IsVisible="{TemplateBinding IsExpanded}" IsVisible="{TemplateBinding IsExpanded}"
@ -1080,11 +1081,22 @@
</Setter> </Setter>
<Style Selector="^ /template/ Border#PART_LayoutRoot:pointerover"> <Style Selector="^ /template/ Border#PART_LayoutRoot:pointerover">
<Setter Property="Background" Value="Transparent" />
</Style>
<Style Selector="^ /template/ Border#PART_LayoutRoot:pointerover Border#PART_Background">
<Setter Property="Background" Value="{DynamicResource Brush.AccentHovered}" /> <Setter Property="Background" Value="{DynamicResource Brush.AccentHovered}" />
</Style> </Style>
<Style Selector="^:selected /template/ Border#PART_LayoutRoot"> <Style Selector="^:selected /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="Transparent" />
</Style>
<Style Selector="^:selected /template/ Border#PART_LayoutRoot Border#PART_Background">
<Setter Property="Background" Value="{DynamicResource Brush.Accent}" /> <Setter Property="Background" Value="{DynamicResource Brush.Accent}" />
<Setter Property="Opacity" Value=".4"/>
</Style>
<Style Selector="^:selected /template/ Border#PART_LayoutRoot:pointerover Border#PART_Background">
<Setter Property="Background" Value="{DynamicResource Brush.Accent}" />
<Setter Property="Opacity" Value=".65"/>
</Style> </Style>
</Style> </Style>
<Style Selector="TreeViewItem[IsExpanded=True] Path.folder_icon"> <Style Selector="TreeViewItem[IsExpanded=True] Path.folder_icon">

View file

@ -36,16 +36,25 @@
HeadersVisibility="None" HeadersVisibility="None"
Focusable="False" Focusable="False"
RowHeight="26" RowHeight="26"
Margin="80,0,8,16" Margin="64,0,8,16"
HorizontalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
ContextRequested="OnChangeListContextRequested" ContextRequested="OnChangeListContextRequested"
DoubleTapped="OnChangeListDoubleTapped"> DoubleTapped="OnChangeListDoubleTapped">
<DataGrid.Styles>
<Style Selector="DataGridRow">
<Setter Property="CornerRadius" Value="4"/>
</Style>
<Style Selector="DataGridRow /template/ Border#RowBorder">
<Setter Property="ClipToBounds" Value="True"/>
</Style>
</DataGrid.Styles>
<DataGrid.Columns> <DataGrid.Columns>
<DataGridTemplateColumn Header="ICON"> <DataGridTemplateColumn Width="36" Header="ICON">
<DataGridTemplateColumn.CellTemplate> <DataGridTemplateColumn.CellTemplate>
<DataTemplate> <DataTemplate>
<v:ChangeStatusIcon Width="14" Height="14" IsWorkingCopyChange="False" Change="{Binding}"/> <v:ChangeStatusIcon Width="14" Height="14" HorizontalAlignment="Left" Margin="16,0,0,0" IsWorkingCopyChange="False" Change="{Binding}"/>
</DataTemplate> </DataTemplate>
</DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn> </DataGridTemplateColumn>

View file

@ -212,12 +212,21 @@
<Setter Property="CornerRadius" Value="{Binding CornerRadius}"/> <Setter Property="CornerRadius" Value="{Binding CornerRadius}"/>
</Style> </Style>
<Style Selector="Grid.repository_leftpanel TreeViewItem:selected /template/ Border#PART_LayoutRoot"> <Style Selector="Grid.repository_leftpanel TreeViewItem /template/ Border#PART_LayoutRoot:pointerover Border#PART_Background">
<Setter Property="Background" Value="{DynamicResource Brush.AccentHovered}" /> <Setter Property="Background" Value="{DynamicResource Brush.AccentHovered}" />
<Setter Property="Opacity" Value=".65"/>
</Style> </Style>
<Style Selector="Grid.repository_leftpanel TreeViewItem:selected /template/ Border#PART_LayoutRoot Border#PART_Background">
<Style Selector="Grid.repository_leftpanel:focus-within TreeViewItem:selected /template/ Border#PART_LayoutRoot"> <Setter Property="Background" Value="{DynamicResource Brush.AccentHovered}" />
<Setter Property="Opacity" Value="1"/>
</Style>
<Style Selector="Grid.repository_leftpanel:focus-within TreeViewItem:selected /template/ Border#PART_LayoutRoot Border#PART_Background">
<Setter Property="Background" Value="{DynamicResource Brush.Accent}" /> <Setter Property="Background" Value="{DynamicResource Brush.Accent}" />
<Setter Property="Opacity" Value=".65"/>
</Style>
<Style Selector="Grid.repository_leftpanel:focus-within TreeViewItem:selected /template/ Border#PART_LayoutRoot:pointerover Border#PART_Background">
<Setter Property="Background" Value="{DynamicResource Brush.Accent}" />
<Setter Property="Opacity" Value=".8"/>
</Style> </Style>
</TreeView.Styles> </TreeView.Styles>
<TreeView.ItemTemplate> <TreeView.ItemTemplate>
@ -276,12 +285,21 @@
<Setter Property="CornerRadius" Value="{Binding CornerRadius}"/> <Setter Property="CornerRadius" Value="{Binding CornerRadius}"/>
</Style> </Style>
<Style Selector="Grid.repository_leftpanel TreeViewItem:selected /template/ Border#PART_LayoutRoot"> <Style Selector="Grid.repository_leftpanel TreeViewItem /template/ Border#PART_LayoutRoot:pointerover Border#PART_Background">
<Setter Property="Background" Value="{DynamicResource Brush.AccentHovered}" /> <Setter Property="Background" Value="{DynamicResource Brush.AccentHovered}" />
<Setter Property="Opacity" Value=".65"/>
</Style> </Style>
<Style Selector="Grid.repository_leftpanel TreeViewItem:selected /template/ Border#PART_LayoutRoot Border#PART_Background">
<Style Selector="Grid.repository_leftpanel:focus-within TreeViewItem:selected /template/ Border#PART_LayoutRoot"> <Setter Property="Background" Value="{DynamicResource Brush.AccentHovered}" />
<Setter Property="Opacity" Value="1"/>
</Style>
<Style Selector="Grid.repository_leftpanel:focus-within TreeViewItem:selected /template/ Border#PART_LayoutRoot Border#PART_Background">
<Setter Property="Background" Value="{DynamicResource Brush.Accent}" /> <Setter Property="Background" Value="{DynamicResource Brush.Accent}" />
<Setter Property="Opacity" Value=".65"/>
</Style>
<Style Selector="Grid.repository_leftpanel:focus-within TreeViewItem:selected /template/ Border#PART_LayoutRoot:pointerover Border#PART_Background">
<Setter Property="Background" Value="{DynamicResource Brush.Accent}" />
<Setter Property="Opacity" Value=".8"/>
</Style> </Style>
</TreeView.Styles> </TreeView.Styles>
@ -344,13 +362,22 @@
<Style Selector="DataGridRow /template/ Border#RowBorder"> <Style Selector="DataGridRow /template/ Border#RowBorder">
<Setter Property="ClipToBounds" Value="True" /> <Setter Property="ClipToBounds" Value="True" />
</Style> </Style>
<Style Selector="Grid.repository_leftpanel DataGridRow:pointerover /template/ Rectangle#BackgroundRectangle">
<Setter Property="Fill" Value="{DynamicResource Brush.AccentHovered}" />
<Setter Property="Opacity" Value=".5"/>
</Style>
<Style Selector="Grid.repository_leftpanel DataGridRow:selected /template/ Rectangle#BackgroundRectangle"> <Style Selector="Grid.repository_leftpanel DataGridRow:selected /template/ Rectangle#BackgroundRectangle">
<Setter Property="Fill" Value="{DynamicResource Brush.AccentHovered}" /> <Setter Property="Fill" Value="{DynamicResource Brush.AccentHovered}" />
<Setter Property="Opacity" Value="1"/>
</Style> </Style>
<Style Selector="Grid.repository_leftpanel:focus-within DataGridRow:selected /template/ Rectangle#BackgroundRectangle"> <Style Selector="Grid.repository_leftpanel:focus-within DataGridRow:selected /template/ Rectangle#BackgroundRectangle">
<Setter Property="Fill" Value="{DynamicResource Brush.Accent}" /> <Setter Property="Fill" Value="{DynamicResource Brush.Accent}" />
<Setter Property="Opacity" Value=".65"/>
</Style>
<Style Selector="Grid.repository_leftpanel:focus-within DataGridRow:selected:pointerover /template/ Rectangle#BackgroundRectangle">
<Setter Property="Fill" Value="{DynamicResource Brush.Accent}" />
<Setter Property="Opacity" Value=".8"/>
</Style> </Style>
</DataGrid.Styles> </DataGrid.Styles>