feat: add textbox internal style, fix various internal textbox styles.

This commit is contained in:
rabbitism 2023-05-08 22:15:17 +08:00
parent 4ba6ea324d
commit 6eb405abe2
4 changed files with 201 additions and 92 deletions

View File

@ -8,51 +8,63 @@
d:DesignHeight="450" d:DesignHeight="450"
d:DesignWidth="800" d:DesignWidth="800"
mc:Ignorable="d"> mc:Ignorable="d">
<StackPanel HorizontalAlignment="Left" Spacing="20"> <ScrollViewer>
<AutoCompleteBox Width="300"> <StackPanel HorizontalAlignment="Left" Spacing="20">
<DataValidationErrors.Error> <AutoCompleteBox Width="300">
<system:Exception /> <DataValidationErrors.Error>
</DataValidationErrors.Error> <system:Exception />
</AutoCompleteBox> </DataValidationErrors.Error>
<CalendarDatePicker Width="300"> </AutoCompleteBox>
<DataValidationErrors.Error> <AutoCompleteBox Width="300" Classes="Large">
<system:Exception /> <DataValidationErrors.Error>
</DataValidationErrors.Error> <system:Exception />
</CalendarDatePicker> </DataValidationErrors.Error>
<ComboBox Width="300"> </AutoCompleteBox>
<ComboBoxItem>AAA</ComboBoxItem> <AutoCompleteBox Width="300" Classes="Small">
<ComboBoxItem>BBB</ComboBoxItem> <DataValidationErrors.Error>
<DataValidationErrors.Error> <system:Exception />
<system:Exception /> </DataValidationErrors.Error>
</DataValidationErrors.Error> </AutoCompleteBox>
</ComboBox> <CalendarDatePicker Width="300">
<DatePicker Width="300"> <DataValidationErrors.Error>
<DataValidationErrors.Error> <system:Exception />
<system:Exception /> </DataValidationErrors.Error>
</DataValidationErrors.Error> </CalendarDatePicker>
</DatePicker> <ComboBox Width="300">
<NumericUpDown Width="300"> <ComboBoxItem>AAA</ComboBoxItem>
<DataValidationErrors.Error> <ComboBoxItem>BBB</ComboBoxItem>
<system:Exception /> <DataValidationErrors.Error>
</DataValidationErrors.Error> <system:Exception />
</NumericUpDown> </DataValidationErrors.Error>
<Slider Width="300"> </ComboBox>
<DataValidationErrors.Error> <DatePicker Width="300">
<system:Exception /> <DataValidationErrors.Error>
</DataValidationErrors.Error> <system:Exception />
</Slider> </DataValidationErrors.Error>
<TimePicker Width="300"> </DatePicker>
<DataValidationErrors.Error> <NumericUpDown Width="300">
<system:Exception /> <DataValidationErrors.Error>
</DataValidationErrors.Error> <system:Exception />
</TimePicker> </DataValidationErrors.Error>
<TextBox </NumericUpDown>
Width="300" <Slider Width="300">
InnerLeftContent="http://" <DataValidationErrors.Error>
InnerRightContent=".com"> <system:Exception />
<DataValidationErrors.Error> </DataValidationErrors.Error>
<system:Exception /> </Slider>
</DataValidationErrors.Error> <TimePicker Width="300">
</TextBox> <DataValidationErrors.Error>
</StackPanel> <system:Exception />
</DataValidationErrors.Error>
</TimePicker>
<TextBox
Width="300"
InnerLeftContent="http://"
InnerRightContent=".com">
<DataValidationErrors.Error>
<system:Exception />
</DataValidationErrors.Error>
</TextBox>
</StackPanel>
</ScrollViewer>
</UserControl> </UserControl>

View File

@ -12,35 +12,38 @@
<Setter Property="AutoCompleteBox.MaxDropDownHeight" Value="{DynamicResource AutoCompleteMaxDropdownHeight}" /> <Setter Property="AutoCompleteBox.MaxDropDownHeight" Value="{DynamicResource AutoCompleteMaxDropdownHeight}" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="AutoCompleteBox"> <ControlTemplate TargetType="AutoCompleteBox">
<Panel> <DataValidationErrors>
<TextBox <Panel>
Name="PART_TextBox" <TextBox
VerticalAlignment="Center" Name="PART_TextBox"
DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}" VerticalAlignment="Center"
Watermark="{TemplateBinding Watermark}" /> DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
<Popup Theme="{DynamicResource NonErrorTextBox}"
Name="PART_Popup" Watermark="{TemplateBinding Watermark}" />
MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}" <Popup
MaxHeight="{TemplateBinding MaxDropDownHeight}" Name="PART_Popup"
IsLightDismissEnabled="True" MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
PlacementTarget="{TemplateBinding}"> MaxHeight="{TemplateBinding MaxDropDownHeight}"
<Border IsLightDismissEnabled="True"
Margin="{DynamicResource AutoCompleteBoxPopupMargin}" PlacementTarget="{TemplateBinding}">
HorizontalAlignment="Stretch" <Border
Background="{DynamicResource AutoCompleteBoxPopupBackground}" Margin="{DynamicResource AutoCompleteBoxPopupMargin}"
BorderBrush="{DynamicResource AutoCompleteBoxPopupBorderBrush}" HorizontalAlignment="Stretch"
BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}" Background="{DynamicResource AutoCompleteBoxPopupBackground}"
BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}" BorderBrush="{DynamicResource AutoCompleteBoxPopupBorderBrush}"
CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}"> BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
<ListBox BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
Name="PART_SelectingItemsControl" CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
Foreground="{TemplateBinding Foreground}" <ListBox
ItemTemplate="{TemplateBinding ItemTemplate}" Name="PART_SelectingItemsControl"
ScrollViewer.HorizontalScrollBarVisibility="Auto" Foreground="{TemplateBinding Foreground}"
ScrollViewer.VerticalScrollBarVisibility="Auto" /> ItemTemplate="{TemplateBinding ItemTemplate}"
</Border> ScrollViewer.HorizontalScrollBarVisibility="Auto"
</Popup> ScrollViewer.VerticalScrollBarVisibility="Auto" />
</Panel> </Border>
</Popup>
</Panel>
</DataValidationErrors>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>

View File

@ -65,18 +65,17 @@
BorderThickness="0" BorderThickness="0"
CornerRadius="{TemplateBinding CornerRadius}" CornerRadius="{TemplateBinding CornerRadius}"
Foreground="{TemplateBinding Foreground}" Foreground="{TemplateBinding Foreground}"
Theme="{DynamicResource NonErrorTextBox}"
UseFloatingWatermark="{TemplateBinding UseFloatingWatermark}" UseFloatingWatermark="{TemplateBinding UseFloatingWatermark}"
Watermark="{TemplateBinding Watermark}"> Watermark="{TemplateBinding Watermark}">
<TextBox.Styles> <TextBox.Styles>
<Style <Style Selector="TextBox#PART_TextBox:pointerover /template/ Border#PART_ContentPresenterBorder">
Selector="TextBox#PART_TextBox:pointerover /template/ Border#PART_ContentPresenterBorder">
<!-- By default the TextBox has its own focused state, override this to disable it here --> <!-- By default the TextBox has its own focused state, override this to disable it here -->
<Setter Property="Background" Value="Transparent" /> <Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" /> <Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" /> <Setter Property="BorderThickness" Value="0" />
</Style> </Style>
<Style <Style Selector="TextBox#PART_TextBox:focus /template/ Border#PART_ContentPresenterBorder">
Selector="TextBox#PART_TextBox:focus /template/ Border#PART_ContentPresenterBorder">
<!-- By default the TextBox has its own focused state, override this to disable it here --> <!-- By default the TextBox has its own focused state, override this to disable it here -->
<Setter Property="Background" Value="Transparent" /> <Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" /> <Setter Property="BorderBrush" Value="Transparent" />
@ -118,7 +117,8 @@
DisplayDateStart="{TemplateBinding DisplayDateStart}" DisplayDateStart="{TemplateBinding DisplayDateStart}"
FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}" FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}" IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}"
SelectedDate="{TemplateBinding SelectedDate, Mode=TwoWay}" /> SelectedDate="{TemplateBinding SelectedDate,
Mode=TwoWay}" />
</Border> </Border>
</Popup> </Popup>
</Grid> </Grid>
@ -126,18 +126,16 @@
</Panel> </Panel>
</DataValidationErrors> </DataValidationErrors>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<Style Selector="^.Large"> <Style Selector="^.Large">
<Setter Property="CalendarDatePicker.MinHeight" Value="{DynamicResource CalendarDatePickerLargeHeight}" />
<Style Selector="^ /template/ TextBox#PART_TextBox"> <Style Selector="^ /template/ TextBox#PART_TextBox">
<Setter Property="TextBox.MinHeight" Value="{DynamicResource CalendarDatePickerInnerLargeHeight}" /> <Setter Property="TextBox.MinHeight" Value="{DynamicResource CalendarDatePickerInnerLargeHeight}" />
</Style> </Style>
</Style> </Style>
<Style Selector="^.Small"> <Style Selector="^.Small">
<Setter Property="CalendarDatePicker.MinHeight" Value="{DynamicResource CalendarDatePickerSmallHeight}" />
<Style Selector="^ /template/ TextBox#PART_TextBox"> <Style Selector="^ /template/ TextBox#PART_TextBox">
<Setter Property="TextBox.MinHeight" Value="{DynamicResource CalendarDatePickerInnerSmallHeight}" /> <Setter Property="TextBox.MinHeight" Value="{DynamicResource CalendarDatePickerInnerSmallHeight}" />
</Style> </Style>
@ -182,7 +180,7 @@
<Setter Property="Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" /> <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
<Setter Property="BorderBrush" Value="Transparent" /> <Setter Property="BorderBrush" Value="Transparent" />
</Style> </Style>
<Style Selector="^:focus /template/ Border#Background"> <Style Selector="^:focus-within /template/ Border#Background">
<Setter Property="Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" /> <Setter Property="Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" /> <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
</Style> </Style>
@ -224,7 +222,7 @@
<Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" /> <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
<Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsPressedBorderBrush}" /> <Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsPressedBorderBrush}" />
</Style> </Style>
<Style Selector="^:focus /template/ Border#Background"> <Style Selector="^:focus-within /template/ Border#Background">
<Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" /> <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
<Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" /> <Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
</Style> </Style>

View File

@ -275,12 +275,108 @@
</Style> </Style>
</ControlTheme> </ControlTheme>
<ControlTheme <ControlTheme x:Key="NonErrorTextBox" TargetType="TextBox">
x:Key="NonErrorTextBox" <Setter Property="TextBox.Foreground" Value="{DynamicResource TextBoxForeground}" />
BasedOn="{StaticResource {x:Type TextBox}}" <Setter Property="TextBox.Background" Value="{DynamicResource TextBoxDefaultBackground}" />
TargetType="TextBox"> <Setter Property="TextBox.BorderBrush" Value="{DynamicResource TextBoxDefaultBorderBrush}" />
<Style Selector="^ /template/ DataValidationErrors"> <Setter Property="TextBox.SelectionBrush" Value="{DynamicResource TextBoxSelectionBackground}" />
<Setter Property="Theme" Value="{DynamicResource SilentDataValidationErrors}" /> <Setter Property="TextBox.SelectionForegroundBrush" Value="{DynamicResource TextBoxSelectionForeground}" />
<Setter Property="TextBox.BorderThickness" Value="{DynamicResource TextBoxBorderThickness}" />
<Setter Property="TextBox.CornerRadius" Value="{DynamicResource TextBoxDefaultCornerRadius}" />
<Setter Property="TextBox.FontSize" Value="14" />
<Setter Property="TextBox.Cursor" Value="Ibeam" />
<Setter Property="TextBox.CaretBrush" Value="{DynamicResource TextBoxTextCaretBrush}" />
<Setter Property="TextBox.Padding" Value="{DynamicResource TextBoxContentPadding}" />
<Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxWrapperDefaultHeight}" />
<Setter Property="TextBox.VerticalContentAlignment" Value="Center" />
<Setter Property="TextBox.FocusAdorner" Value="{x:Null}" />
<Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
<Setter Property="TextBox.ContextFlyout" Value="{StaticResource DefaultTextBoxContextFlyout}" />
<Setter Property="TextBox.Template">
<ControlTemplate TargetType="TextBox">
<DataValidationErrors Theme="{DynamicResource SilentDataValidationErrors}">
<Border
Name="PART_ContentPresenterBorder"
MinHeight="{TemplateBinding MinHeight}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<ScrollViewer
Margin="{TemplateBinding Padding}"
AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
<Panel>
<TextBlock
Name="PART_Watermark"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
IsVisible="{TemplateBinding Text,
Converter={x:Static StringConverters.IsNullOrEmpty}}"
Opacity="0.5"
Text="{TemplateBinding Watermark}"
TextAlignment="{TemplateBinding TextAlignment}"
TextWrapping="{TemplateBinding TextWrapping}" />
<TextPresenter
Name="PART_TextPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
CaretBrush="{TemplateBinding CaretBrush}"
CaretIndex="{TemplateBinding CaretIndex}"
LineHeight="{TemplateBinding LineHeight}"
PasswordChar="{TemplateBinding PasswordChar}"
RevealPassword="{TemplateBinding RevealPassword}"
SelectionBrush="{TemplateBinding SelectionBrush}"
SelectionEnd="{TemplateBinding SelectionEnd}"
SelectionForegroundBrush="{TemplateBinding SelectionForegroundBrush}"
SelectionStart="{TemplateBinding SelectionStart}"
Text="{TemplateBinding Text,
Mode=TwoWay}"
TextAlignment="{TemplateBinding TextAlignment}"
TextWrapping="{TemplateBinding TextWrapping}" />
</Panel>
</ScrollViewer>
</Border>
</DataValidationErrors>
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover /template/ Border#PART_ContentPresenterBorder">
<Setter Property="Border.Background" Value="{DynamicResource TextBoxPointeroverBackground}" />
</Style>
<Style Selector="^:pressed /template/ Border#PART_ContentPresenterBorder">
<Setter Property="Border.Background" Value="{DynamicResource TextBoxPressedBackground}" />
</Style>
<Style Selector="^:focus /template/ Border#PART_ContentPresenterBorder">
<Setter Property="Border.BorderBrush" Value="{DynamicResource TextBoxFocusBorderBrush}" />
</Style>
<Style Selector="^:disabled /template/ Border#PART_ContentPresenterBorder">
<Setter Property="Border.BorderBrush" Value="{DynamicResource TextBoxDisabledBorderBrush}" />
<Setter Property="Border.Background" Value="{DynamicResource TextBoxDisabledBackground}" />
</Style>
<Style Selector="^:disabled">
<Setter Property="TextBox.Foreground" Value="{DynamicResource TextBoxDisabledForeground}" />
</Style>
<Style Selector="^:error">
<Style Selector="^ /template/ Border#PART_ContentPresenterBorder">
<Setter Property="Background" Value="{DynamicResource DataValidationErrorsBackground}" />
<Setter Property="BorderBrush" Value="Transparent" />
</Style>
<Style Selector="^:pointerover /template/ Border#PART_ContentPresenterBorder">
<Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
<Setter Property="Border.BorderBrush" Value="Transparent" />
</Style>
<Style Selector="^:pressed /template/ Border#PART_ContentPresenterBorder">
<Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
<Setter Property="Border.BorderBrush" Value="Transparent" />
</Style>
<Style Selector="^:focus /template/ Border#PART_ContentPresenterBorder">
<Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
<Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
</Style>
</Style> </Style>
</ControlTheme> </ControlTheme>
</ResourceDictionary> </ResourceDictionary>