fix: fix popup BoxShadow and unclosed corner issues.

(cherry picked from commit 3a31924c6b454ae59571690259f00a6586420b29)
This commit is contained in:
Zhang Dian 2024-11-14 18:07:34 +08:00
parent b23f79fc39
commit c87f6a8112
8 changed files with 199 additions and 173 deletions

View File

@ -17,5 +17,5 @@
<SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" /> <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
<BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1AFFFFFF</BoxShadows> <BoxShadows x:Key="ColorPreviewerMainBoxShadow">inset 0 0 0 1 #1AFFFFFF, 0 4 14 0 #40000000</BoxShadows>
</ResourceDictionary> </ResourceDictionary>

View File

@ -17,5 +17,5 @@
<SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" /> <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
<BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1A000000</BoxShadows> <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 1 0 #4A000000, 0 4 14 0 #1A000000</BoxShadows>
</ResourceDictionary> </ResourceDictionary>

View File

@ -39,12 +39,16 @@
BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}" BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}" BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}"> CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
<ListBox <Border
Name="PART_SelectingItemsControl" CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}"
Foreground="{TemplateBinding Foreground}" ClipToBounds="True">
ItemTemplate="{TemplateBinding ItemTemplate}" <ListBox
ScrollViewer.HorizontalScrollBarVisibility="Auto" Name="PART_SelectingItemsControl"
ScrollViewer.VerticalScrollBarVisibility="Auto" /> Foreground="{TemplateBinding Foreground}"
ItemTemplate="{TemplateBinding ItemTemplate}"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto" />
</Border>
</Border> </Border>
</Popup> </Popup>
</Panel> </Panel>
@ -77,12 +81,16 @@
BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}" BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}" BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}"> CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
<ListBox <Border
Name="PART_SelectingItemsControl" CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}"
Foreground="{TemplateBinding Foreground}" ClipToBounds="True">
ItemTemplate="{TemplateBinding ItemTemplate}" <ListBox
ScrollViewer.HorizontalScrollBarVisibility="Auto" Name="PART_SelectingItemsControl"
ScrollViewer.VerticalScrollBarVisibility="Auto" /> Foreground="{TemplateBinding Foreground}"
ItemTemplate="{TemplateBinding ItemTemplate}"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto" />
</Border>
</Border> </Border>
</Popup> </Popup>
</Panel> </Panel>

View File

@ -117,16 +117,19 @@
BorderBrush="{DynamicResource ComboBoxPopupBorderBrush}" BorderBrush="{DynamicResource ComboBoxPopupBorderBrush}"
BorderThickness="{DynamicResource ComboBoxPopupBorderThickness}" BorderThickness="{DynamicResource ComboBoxPopupBorderThickness}"
BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}" BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
CornerRadius="{DynamicResource ComboBoxPopupBoxCornerRadius}" CornerRadius="{DynamicResource ComboBoxPopupBoxCornerRadius}">
ClipToBounds="True"> <Border
<ScrollViewer CornerRadius="{DynamicResource ComboBoxPopupBoxCornerRadius}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" ClipToBounds="True">
IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" <ScrollViewer
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"> HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
<ItemsPresenter IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
Name="PART_ItemsPresenter" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
ItemsPanel="{TemplateBinding ItemsPanel}" /> <ItemsPresenter
</ScrollViewer> Name="PART_ItemsPresenter"
ItemsPanel="{TemplateBinding ItemsPanel}" />
</ScrollViewer>
</Border>
</Border> </Border>
</Popup> </Popup>
</Grid> </Grid>

View File

@ -21,100 +21,107 @@
BorderBrush="{TemplateBinding BorderBrush}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" BorderThickness="{TemplateBinding BorderThickness}"
BoxShadow="{DynamicResource DateTimePickerFlyoutBoxShadow}" BoxShadow="{DynamicResource DateTimePickerFlyoutBoxShadow}"
CornerRadius="{TemplateBinding CornerRadius}" CornerRadius="{TemplateBinding CornerRadius}">
ClipToBounds="True"> <Border
<Grid Name="ContentPanel" RowDefinitions="*,Auto"> CornerRadius="{TemplateBinding CornerRadius}"
<Grid Name="PART_PickerContainer"> ClipToBounds="True">
<Grid.Styles> <Grid Name="ContentPanel" RowDefinitions="*,Auto">
<Style Selector="DateTimePickerPanel > ListBoxItem"> <Grid Name="PART_PickerContainer">
<Setter Property="Theme" Value="{StaticResource DateTimePickerItem}" /> <Grid.Styles>
</Style> <Style Selector="DateTimePickerPanel > ListBoxItem">
</Grid.Styles> <Setter Property="Theme" Value="{StaticResource DateTimePickerItem}" />
<!-- Column Definitions set in code, ignore here --> </Style>
<Panel Name="PART_MonthHost"> </Grid.Styles>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden"> <!-- Column Definitions set in code, ignore here -->
<DateTimePickerPanel <Panel Name="PART_MonthHost">
Name="PART_MonthSelector" <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}" <DateTimePickerPanel
PanelType="Month" Name="PART_MonthSelector"
ShouldLoop="True" /> ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
</ScrollViewer> PanelType="Month"
<RepeatButton Name="PART_MonthUpButton" Theme="{StaticResource DateTimePickerUpButton}" /> ShouldLoop="True" />
<RepeatButton Name="PART_MonthDownButton" Theme="{StaticResource DateTimePickerDownButton}" /> </ScrollViewer>
</Panel> <RepeatButton Name="PART_MonthUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
<Panel Name="PART_DayHost"> <RepeatButton Name="PART_MonthDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden"> </Panel>
<DateTimePickerPanel <Panel Name="PART_DayHost">
Name="PART_DaySelector" <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}" <DateTimePickerPanel
PanelType="Day" Name="PART_DaySelector"
ShouldLoop="True" /> ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
</ScrollViewer> PanelType="Day"
<RepeatButton Name="PART_DayUpButton" Theme="{StaticResource DateTimePickerUpButton}" /> ShouldLoop="True" />
<RepeatButton Name="PART_DayDownButton" Theme="{StaticResource DateTimePickerDownButton}" /> </ScrollViewer>
</Panel> <RepeatButton Name="PART_DayUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
<Panel Name="PART_YearHost"> <RepeatButton Name="PART_DayDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden"> </Panel>
<DateTimePickerPanel <Panel Name="PART_YearHost">
Name="PART_YearSelector" <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}" <DateTimePickerPanel
PanelType="Year" Name="PART_YearSelector"
ShouldLoop="False" /> ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
</ScrollViewer> PanelType="Year"
<RepeatButton Name="PART_YearUpButton" Theme="{StaticResource DateTimePickerUpButton}" /> ShouldLoop="False" />
<RepeatButton Name="PART_YearDownButton" Theme="{StaticResource DateTimePickerDownButton}" /> </ScrollViewer>
</Panel> <RepeatButton Name="PART_YearUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
<Rectangle <RepeatButton Name="PART_YearDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
Name="PART_FirstSpacer" </Panel>
Grid.Column="1" <Rectangle
Width="1" Name="PART_FirstSpacer"
Margin="0,4" Grid.Column="1"
HorizontalAlignment="Center" Width="1"
Fill="{DynamicResource DateTimePickerSeparatorBackground}" /> Margin="0,4"
<Rectangle HorizontalAlignment="Center"
Name="PART_SecondSpacer" Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
Grid.Column="3" <Rectangle
Width="1" Name="PART_SecondSpacer"
Margin="0,4" Grid.Column="3"
HorizontalAlignment="Center" Width="1"
Fill="{DynamicResource DateTimePickerSeparatorBackground}" /> Margin="0,4"
</Grid> HorizontalAlignment="Center"
Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
</Grid>
<Grid <Grid
Name="AcceptDismissGrid" Name="AcceptDismissGrid"
Grid.Row="1" Grid.Row="1"
ColumnDefinitions="*,*"> ColumnDefinitions="*,Auto,*">
<Button <Button
Name="PART_AcceptButton" Name="PART_AcceptButton"
Grid.Column="0" Grid.Column="0"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
Theme="{StaticResource DateTimePickerButton}"> Theme="{StaticResource DateTimePickerButton}">
<PathIcon <PathIcon
Width="12" Width="12"
Height="12" Height="12"
Data="{DynamicResource DateTimePickerAcceptGlyph}" /> Data="{DynamicResource DateTimePickerAcceptGlyph}" />
</Button> </Button>
<Button <Rectangle
Name="PART_DismissButton" Grid.Column="1"
Grid.Column="1" Width="1"
HorizontalAlignment="Stretch" Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
VerticalAlignment="Stretch" <Button
FontSize="16" Name="PART_DismissButton"
Theme="{StaticResource DateTimePickerButton}"> Grid.Column="2"
<PathIcon HorizontalAlignment="Stretch"
Width="12" VerticalAlignment="Stretch"
Height="12" FontSize="16"
Data="{DynamicResource DateTimePickerDismissGlyph}" /> Theme="{StaticResource DateTimePickerButton}">
</Button> <PathIcon
<Rectangle Width="12"
Grid.Column="0" Height="12"
Grid.ColumnSpan="2" Data="{DynamicResource DateTimePickerDismissGlyph}" />
Height="1" </Button>
VerticalAlignment="Top" <Rectangle
Fill="{DynamicResource DateTimePickerSeparatorBackground}" /> Grid.Column="0"
Grid.ColumnSpan="3"
Height="1"
VerticalAlignment="Top"
Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
</Grid>
</Grid> </Grid>
</Grid> </Border>
</Border> </Border>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>

View File

@ -37,7 +37,6 @@
BorderBrush="{TemplateBinding BorderBrush}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" BorderThickness="{TemplateBinding BorderThickness}"
BoxShadow="{DynamicResource MenuFlyoutBorderBoxShadow}" BoxShadow="{DynamicResource MenuFlyoutBorderBoxShadow}"
ClipToBounds="True"
CornerRadius="{TemplateBinding CornerRadius}" CornerRadius="{TemplateBinding CornerRadius}"
UseLayoutRounding="False"> UseLayoutRounding="False">
<ScrollViewer <ScrollViewer

View File

@ -8,6 +8,8 @@
<Setter Property="MaxHeight" Value="300" /> <Setter Property="MaxHeight" Value="300" />
<Setter Property="FontWeight" Value="Normal" /> <Setter Property="FontWeight" Value="Normal" />
<Setter Property="Background" Value="{DynamicResource DateTimePickerPopupBackground}" /> <Setter Property="Background" Value="{DynamicResource DateTimePickerPopupBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerPopupBorderBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="6" /> <Setter Property="CornerRadius" Value="6" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="TimePickerPresenter"> <ControlTemplate TargetType="TimePickerPresenter">
@ -20,27 +22,29 @@
BorderBrush="{TemplateBinding BorderBrush}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" BorderThickness="{TemplateBinding BorderThickness}"
BoxShadow="{DynamicResource DateTimePickerFlyoutBoxShadow}" BoxShadow="{DynamicResource DateTimePickerFlyoutBoxShadow}"
CornerRadius="{TemplateBinding CornerRadius}" CornerRadius="{TemplateBinding CornerRadius}">
ClipToBounds="True"> <Border
<Grid Name="ContentPanel" RowDefinitions="*,Auto"> CornerRadius="{TemplateBinding CornerRadius}"
<Grid Name="PART_PickerContainer"> ClipToBounds="True">
<Grid.Styles> <Grid Name="ContentPanel" RowDefinitions="*,Auto">
<Style Selector="DateTimePickerPanel > ListBoxItem"> <Grid Name="PART_PickerContainer">
<Setter Property="Theme" Value="{StaticResource DateTimePickerItem}" /> <Grid.Styles>
</Style> <Style Selector="DateTimePickerPanel > ListBoxItem">
</Grid.Styles> <Setter Property="Theme" Value="{StaticResource DateTimePickerItem}" />
<!-- Ignore col defs here, set in code --> </Style>
<Panel Name="PART_HourHost" Grid.Column="0"> </Grid.Styles>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden"> <!-- Ignore col defs here, set in code -->
<DateTimePickerPanel <Panel Name="PART_HourHost" Grid.Column="0">
Name="PART_HourSelector" <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}" <DateTimePickerPanel
PanelType="Hour" Name="PART_HourSelector"
ShouldLoop="True" /> ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
</ScrollViewer> PanelType="Hour"
<RepeatButton Name="PART_HourUpButton" Theme="{StaticResource DateTimePickerUpButton}" /> ShouldLoop="True" />
<RepeatButton Name="PART_HourDownButton" Theme="{StaticResource DateTimePickerDownButton}" /> </ScrollViewer>
</Panel> <RepeatButton Name="PART_HourUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
<RepeatButton Name="PART_HourDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
</Panel>
<Panel Name="PART_MinuteHost" Grid.Column="2"> <Panel Name="PART_MinuteHost" Grid.Column="2">
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden"> <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
@ -82,41 +86,46 @@
Fill="{DynamicResource DateTimePickerSeparatorBackground}" /> Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
</Grid> </Grid>
<Grid <Grid
Name="AcceptDismissGrid" Name="AcceptDismissGrid"
Grid.Row="1" Grid.Row="1"
ColumnDefinitions="*,*"> ColumnDefinitions="*,Auto,*">
<Button <Button
Name="PART_AcceptButton" Name="PART_AcceptButton"
Grid.Column="0" Grid.Column="0"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
Theme="{StaticResource DateTimePickerButton}"> Theme="{StaticResource DateTimePickerButton}">
<PathIcon <PathIcon
Width="12" Width="12"
Height="12" Height="12"
Data="{DynamicResource DateTimePickerAcceptGlyph}" /> Data="{DynamicResource DateTimePickerAcceptGlyph}" />
</Button> </Button>
<Button <Rectangle
Name="PART_DismissButton" Grid.Column="1"
Grid.Column="1" Width="1"
HorizontalAlignment="Stretch" Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
VerticalAlignment="Stretch" <Button
FontSize="16" Name="PART_DismissButton"
Theme="{StaticResource DateTimePickerButton}"> Grid.Column="2"
<PathIcon HorizontalAlignment="Stretch"
Width="12" VerticalAlignment="Stretch"
Height="12" FontSize="16"
Data="{DynamicResource DateTimePickerDismissGlyph}" /> Theme="{StaticResource DateTimePickerButton}">
</Button> <PathIcon
<Rectangle Width="12"
Grid.Column="0" Height="12"
Grid.ColumnSpan="2" Data="{DynamicResource DateTimePickerDismissGlyph}" />
Height="1" </Button>
VerticalAlignment="Top" <Rectangle
Fill="{DynamicResource DateTimePickerSeparatorBackground}" /> Grid.Column="0"
Grid.ColumnSpan="3"
Height="1"
VerticalAlignment="Top"
Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
</Grid>
</Grid> </Grid>
</Grid> </Border>
</Border> </Border>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>

View File

@ -16,7 +16,7 @@
<StreamGeometry x:Key="ComboBoxIcon"> <StreamGeometry x:Key="ComboBoxIcon">
M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z
</StreamGeometry> </StreamGeometry>
<Thickness x:Key="ComboBoxPopupBorderMargin">0 4</Thickness> <Thickness x:Key="ComboBoxPopupBorderMargin">4</Thickness>
<x:Double x:Key="ComboBoxDefaultHeight">32</x:Double> <x:Double x:Key="ComboBoxDefaultHeight">32</x:Double>
<x:Double x:Key="ComboBoxSmallHeight">24</x:Double> <x:Double x:Key="ComboBoxSmallHeight">24</x:Double>