fix: ClearButton will take the icon place when TextBox has value.

(cherry picked from commit 7a6c42e1066606daecc6448bfcc01ef8baf9072f)
This commit is contained in:
Zhang Dian 2024-08-10 13:50:33 +08:00
parent 871f112800
commit 2fadfdd5de
2 changed files with 126 additions and 108 deletions

View File

@ -27,115 +27,112 @@
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid
CornerRadius="{TemplateBinding CornerRadius}"/>
<Grid
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ColumnDefinitions="*, Auto">
<TextBox
Name="PART_TextBox"
Grid.Column="0"
MinHeight="{DynamicResource CalendarDatePickerDefaultHeight}"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
ColumnDefinitions="*, Auto, Auto">
<TextBox
Name="PART_TextBox"
Grid.Column="0"
Grid.ColumnSpan="2"
MinHeight="{DynamicResource CalendarDatePickerDefaultHeight}"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Background="Transparent"
BorderBrush="Transparent"
BorderThickness="0"
CornerRadius="{TemplateBinding CornerRadius}"
Foreground="{TemplateBinding Foreground}"
Theme="{DynamicResource NonErrorTextBox}"
UseFloatingWatermark="{TemplateBinding UseFloatingWatermark}"
Watermark="{TemplateBinding Watermark}">
<TextBox.Styles>
<Style Selector="TextBox#PART_TextBox:pointerover /template/ Border#PART_ContentPresenterBorder">
<!-- By default the TextBox has its own focused state, override this to disable it here -->
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
</Style>
<Style Selector="TextBox#PART_TextBox:focus /template/ Border#PART_ContentPresenterBorder">
<!-- By default the TextBox has its own focused state, override this to disable it here -->
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
</Style>
<Style Selector="TextBox#PART_TextBox:disabled">
<Style Selector="^ /template/ Border#PART_ContentPresenterBorder">
<!-- By default the TextBox has its own disabled state, override this to make the border background show through -->
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
</Style>
</Style>
</TextBox.Styles>
</TextBox>
<Button
Name="ClearButton"
Grid.Column="1"
Padding="0,0,8,0"
Content="{DynamicResource IconButtonClearData}"
Command="{Binding $parent[CalendarDatePicker].Clear}"
Focusable="False"
IsVisible="False"
Theme="{DynamicResource InnerIconButton}" />
<Button
Name="PART_Button"
Grid.Column="1"
Padding="0,0,8,0"
Content="{DynamicResource CalendarDatePickerIconGlyph}"
Focusable="False"
Theme="{DynamicResource InnerIconButton}" />
<Popup
Name="PART_Popup"
Grid.Column="0"
HorizontalOffset="-8"
IsLightDismissEnabled="True"
PlacementTarget="{TemplateBinding}"
VerticalOffset="-4">
<Border
Margin="8"
Background="Transparent"
BorderBrush="Transparent"
BorderThickness="0"
CornerRadius="{TemplateBinding CornerRadius}"
Foreground="{TemplateBinding Foreground}"
Theme="{DynamicResource NonErrorTextBox}"
UseFloatingWatermark="{TemplateBinding UseFloatingWatermark}"
Watermark="{TemplateBinding Watermark}">
<TextBox.Styles>
<Style Selector="TextBox#PART_TextBox:pointerover /template/ Border#PART_ContentPresenterBorder">
<!-- By default the TextBox has its own focused state, override this to disable it here -->
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
</Style>
<Style Selector="TextBox#PART_TextBox:focus /template/ Border#PART_ContentPresenterBorder">
<!-- By default the TextBox has its own focused state, override this to disable it here -->
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
</Style>
<Style Selector="TextBox#PART_TextBox:disabled">
<Style Selector="^ /template/ Border#PART_ContentPresenterBorder">
<!-- By default the TextBox has its own disabled state, override this to make the border background show through -->
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
</Style>
</Style>
</TextBox.Styles>
</TextBox>
<Button
Name="ClearButton"
Grid.Column="1"
Padding="0,0,8,0"
Content="{DynamicResource IconButtonClearData}"
Command="{Binding $parent[CalendarDatePicker].Clear}"
Focusable="False"
IsVisible="False"
Theme="{DynamicResource InnerIconButton}" />
<Button
Name="PART_Button"
Grid.Column="2"
Padding="0,0,8,0"
Content="{DynamicResource CalendarDatePickerIconGlyph}"
Focusable="False"
Theme="{DynamicResource InnerIconButton}" />
<Popup
Name="PART_Popup"
Grid.Column="0"
HorizontalOffset="-8"
IsLightDismissEnabled="True"
PlacementTarget="{TemplateBinding}"
VerticalOffset="-4">
<Border
Margin="8"
Background="Transparent"
BoxShadow="{DynamicResource CalendarDatePickerPopupBoxShadows}"
CornerRadius="{DynamicResource CalendarCornerRadius}">
<Calendar
Name="PART_Calendar"
BorderThickness="0"
CornerRadius="{Binding $parent[Border].CornerRadius}"
DisplayDate="{TemplateBinding DisplayDate}"
DisplayDateEnd="{TemplateBinding DisplayDateEnd}"
DisplayDateStart="{TemplateBinding DisplayDateStart}"
FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}"
SelectedDate="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedDate, Mode=TwoWay}">
</Calendar>
</Border>
</Popup>
</Grid>
</Border>
BoxShadow="{DynamicResource CalendarDatePickerPopupBoxShadows}"
CornerRadius="{DynamicResource CalendarCornerRadius}">
<Calendar
Name="PART_Calendar"
BorderThickness="0"
CornerRadius="{Binding $parent[Border].CornerRadius}"
DisplayDate="{TemplateBinding DisplayDate}"
DisplayDateEnd="{TemplateBinding DisplayDateEnd}"
DisplayDateStart="{TemplateBinding DisplayDateStart}"
FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}"
SelectedDate="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedDate, Mode=TwoWay}">
</Calendar>
</Border>
</Popup>
</Grid>
</Panel>
</DataValidationErrors>
</ControlTemplate>
</Setter>
<Style Selector="^.clearButton, ^.ClearButton">
<Style Selector="^:pointerover /template/ Button#ClearButton">
<Setter Property="IsVisible" Value="{Binding $parent[CalendarDatePicker].SelectedDate, Converter={x:Static ObjectConverters.IsNotNull}}"></Setter>
<Setter Property="IsVisible" Value="{Binding $parent[CalendarDatePicker].SelectedDate, Converter={x:Static ObjectConverters.IsNotNull}}" />
</Style>
<Style Selector="^:pointerover /template/ Button#PART_Button">
<Setter Property="IsVisible" Value="{Binding $parent[CalendarDatePicker].SelectedDate, Converter={x:Static ObjectConverters.IsNull}}" />
</Style>
</Style>
<Style Selector="^.Large">
<Style Selector="^ /template/ TextBox#PART_TextBox">
<Setter Property="MinHeight" Value="{DynamicResource CalendarDatePickerInnerLargeHeight}" />
</Style>
<Style Selector="^.Large /template/ TextBox#PART_TextBox">
<Setter Property="MinHeight" Value="{DynamicResource CalendarDatePickerInnerLargeHeight}" />
</Style>
<Style Selector="^.Small">
<Style Selector="^ /template/ TextBox#PART_TextBox">
<Setter Property="MinHeight" Value="{DynamicResource CalendarDatePickerInnerSmallHeight}" />
</Style>
<Style Selector="^.Small /template/ TextBox#PART_TextBox">
<Setter Property="MinHeight" Value="{DynamicResource CalendarDatePickerInnerSmallHeight}" />
</Style>
<Style Selector="^:pointerover">

View File

@ -41,20 +41,20 @@
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="MinHeight" Value="{DynamicResource ComboBoxDefaultHeight}" />
<Setter Property="Template">
<ControlTemplate TargetType="ComboBox">
<DataValidationErrors>
<Grid ColumnDefinitions="*, Auto, 32">
<Grid ColumnDefinitions="*, Auto">
<Border
x:Name="Background"
Grid.Column="0"
Grid.ColumnSpan="3"
MinWidth="{DynamicResource ComboBoxThemeMinWidth}"
MinHeight="{DynamicResource ComboBoxDefaultHeight}"
Grid.ColumnSpan="2"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}" />
CornerRadius="{TemplateBinding CornerRadius}"
MinHeight="{TemplateBinding MinHeight}" />
<TextBlock
x:Name="PlaceholderTextBlock"
Grid.Column="0"
@ -78,13 +78,15 @@
<Button
Name="ClearButton"
Grid.Column="1"
Margin="0,0,8,0"
Command="{Binding $parent[ComboBox].Clear}"
Content="{DynamicResource IconButtonClearData}"
Focusable="False"
IsVisible="False"
Theme="{DynamicResource InnerIconButton}" />
<Border
x:Name="DropDownOverlay"
Grid.Column="2"
Grid.Column="1"
Width="30"
Margin="0,1,1,1"
HorizontalAlignment="Right"
@ -93,12 +95,10 @@
<PathIcon
x:Name="DropDownGlyph"
Grid.Column="2"
Grid.Column="1"
Width="12"
Height="12"
Margin="0,0,10,0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0,0,12,0"
Data="{DynamicResource ComboBoxIcon}"
Foreground="{DynamicResource ComboBoxIconDefaultForeground}"
IsHitTestVisible="False"
@ -146,12 +146,15 @@
<Style Selector="^:pointerover /template/ Button#ClearButton">
<Setter Property="IsVisible" Value="{Binding $parent[ComboBox].SelectionBoxItem, Converter={x:Static ObjectConverters.IsNotNull}}" />
</Style>
<Style Selector="^:pointerover /template/ PathIcon#DropDownGlyph">
<Setter Property="IsVisible" Value="{Binding $parent[ComboBox].SelectionBoxItem, Converter={x:Static ObjectConverters.IsNull}}"/>
</Style>
</Style>
<Style Selector="^.Large /template/ Border#Background">
<Style Selector="^.Large">
<Setter Property="MinHeight" Value="{DynamicResource ComboBoxLargeHeight}" />
</Style>
<Style Selector="^.Small /template/ Border#Background">
<Style Selector="^.Small">
<Setter Property="MinHeight" Value="{DynamicResource ComboBoxSmallHeight}" />
</Style>
@ -159,9 +162,18 @@
<Style Selector="^:pointerover">
<Setter Property="Background" Value="{DynamicResource ComboBoxSelectorPointeroverBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorPointeroverBorderBrush}" />
<Style Selector="^ /template/ PathIcon#DropDownGlyph">
<Setter Property="Foreground" Value="{DynamicResource ComboBoxIconPointeroverForeground}" />
</Style>
</Style>
<Style Selector="^:pointerover /template/ PathIcon#DropDownGlyph">
<Setter Property="Foreground" Value="{DynamicResource ComboBoxIconPointeroverForeground}" />
<!-- Focus State -->
<Style Selector="^:focus">
<Setter Property="Background" Value="{DynamicResource ComboBoxSelectorFocusBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorFocusBorderBrush}" />
<Style Selector="^ /template/ PathIcon#DropDownGlyph">
<Setter Property="Foreground" Value="{DynamicResource ComboBoxIconFocusForeground}" />
</Style>
</Style>
<!-- Pressed State -->
@ -222,6 +234,10 @@
<Setter Property="Background" Value="{DynamicResource ComboBoxSelectorBorderedPressedBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorBorderedPressedBorderBrush}" />
</Style>
<Style Selector="^:focus /template/ Border#Background">
<Setter Property="Background" Value="{DynamicResource ComboBoxSelectorBorderedFocusBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorBorderedFocusBorderBrush}" />
</Style>
<Style Selector="^:disabled">
<Style Selector="^ /template/ Border#Background">
<Setter Property="Background" Value="{DynamicResource ComboBoxSelectorDisabledBackground}" />
@ -284,6 +300,10 @@
<Setter Property="Background" Value="{DynamicResource ComboBoxItemPointeroverBackground}" />
</Style>
<Style Selector="^:focus /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ComboBoxItemFocusBackground}" />
</Style>
<Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ComboBoxItemDisabledBackground}" />
</Style>
@ -303,5 +323,6 @@
<Setter Property="Background" Value="{DynamicResource ComboBoxItemSelectedPointeroverBackground}" />
</Style>
</Style>
</ControlTheme>
</ResourceDictionary>