test/atomui
1
0
Fork 0
mirror of https://gitee.com/chinware/atomui.git synced 2024-12-02 03:47:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

优化 InnerContent 是 Icon 的情况的样式

Browse Source
This commit is contained in:
polarboy 2024-08-07 16:34:45 +08:00
parent 2c03b27424
commit 2d33d56823
3 changed files with 81 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
samples/AtomUI.Demo.Desktop/ShowCase/LineEditShowCase.axaml
View File

@ -18,9 +18,9 @@
Title="Three sizes of Input" Title="Three sizes of Input"
Description="There are three sizes of an Input box: large (40px), default (32px) and small (24px)."> Description="There are three sizes of an Input box: large (40px), default (32px) and small (24px).">
<StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0"> <StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
<atom:LineEdit Watermark="Large" SizeType="Large" InnerLeftContent="{atom:IconProvider Kind=UserOutlined, Width=16, Height=16}"/> <atom:LineEdit Watermark="Large" SizeType="Large" InnerLeftContent="{atom:IconProvider Kind=UserOutlined}"/>
<atom:LineEdit Watermark="Middle" SizeType="Middle" InnerLeftContent="{atom:IconProvider Kind=UserOutlined, Width=14, Height=14}"/> <atom:LineEdit Watermark="Middle" SizeType="Middle" InnerLeftContent="{atom:IconProvider Kind=UserOutlined}"/>
<atom:LineEdit Watermark="Small" SizeType="Small" InnerLeftContent="{atom:IconProvider Kind=UserOutlined, Width=12, Height=12}"/> <atom:LineEdit Watermark="Small" SizeType="Small" InnerLeftContent="{atom:IconProvider Kind=UserOutlined}"/>
</StackPanel> </StackPanel>
</showcase:ShowCaseItem> </showcase:ShowCaseItem>
@ -40,7 +40,7 @@
<StackPanel Orientation="Vertical" Spacing="10"> <StackPanel Orientation="Vertical" Spacing="10">
<atom:LineEdit LeftAddOn="http://" RightAddOn=".com" Width="400" HorizontalAlignment="Left" <atom:LineEdit LeftAddOn="http://" RightAddOn=".com" Width="400" HorizontalAlignment="Left"
Text="mysite"/> Text="mysite"/>
<atom:LineEdit RightAddOn="{atom:IconProvider Kind=SettingOutlined, Width=16, Height=16}" Width="400" HorizontalAlignment="Left" <atom:LineEdit RightAddOn="{atom:IconProvider Kind=SettingOutlined}" Width="400" HorizontalAlignment="Left"
Text="mysite"/> Text="mysite"/>
<atom:LineEdit LeftAddOn="http://" InnerRightContent=".com" Width="400" HorizontalAlignment="Left" <atom:LineEdit LeftAddOn="http://" InnerRightContent=".com" Width="400" HorizontalAlignment="Left"
Text="mysite"/> Text="mysite"/>
@ -80,8 +80,8 @@
Description="Add a prefix or suffix icons inside input."> Description="Add a prefix or suffix icons inside input.">
<StackPanel Orientation="Vertical" Spacing="10"> <StackPanel Orientation="Vertical" Spacing="10">
<atom:LineEdit Watermark="Enter your username" <atom:LineEdit Watermark="Enter your username"
InnerLeftContent="{atom:IconProvider Kind=UserOutlined, NormalFilledColor=#D7D7D7, Width=16, Height=16}" InnerLeftContent="{atom:IconProvider Kind=UserOutlined, NormalFilledColor=#D7D7D7}"
InnerRightContent="{atom:IconProvider Kind=InfoCircleOutlined, NormalFilledColor=#8C8C8C, Width=16, Height=16}"/> InnerRightContent="{atom:IconProvider Kind=InfoCircleOutlined, NormalFilledColor=#8C8C8C}"/>
<atom:LineEdit InnerLeftContent="￥" InnerRightContent="RMB"/> <atom:LineEdit InnerLeftContent="￥" InnerRightContent="RMB"/>
<atom:LineEdit InnerLeftContent="￥" InnerRightContent="RMB" IsEnabled="False"/> <atom:LineEdit InnerLeftContent="￥" InnerRightContent="RMB" IsEnabled="False"/>
</StackPanel> </StackPanel>
@ -93,14 +93,14 @@
<StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0"> <StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
<atom:LineEdit Watermark="Error" Status="Error"/> <atom:LineEdit Watermark="Error" Status="Error"/>
<atom:LineEdit Watermark="Warning" Status="Warning"/> <atom:LineEdit Watermark="Warning" Status="Warning"/>
<atom:LineEdit Watermark="Error with prefix" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined, Width=16, Height=16}" Status="Error"/> <atom:LineEdit Watermark="Error with prefix" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" Status="Error"/>
<atom:LineEdit Watermark="Warning with prefix" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined, Width=16, Height=16}" Status="Warning"/> <atom:LineEdit Watermark="Warning with prefix" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" Status="Warning"/>
<atom:LineEdit Watermark="Error" Status="Error" StyleVariant="Filled"/> <atom:LineEdit Watermark="Error" Status="Error" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Filled"/>
<atom:LineEdit Watermark="Warning" Status="Warning" StyleVariant="Filled"/> <atom:LineEdit Watermark="Warning" Status="Warning" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Filled"/>
<atom:LineEdit Watermark="Error" Status="Error" StyleVariant="Borderless"/> <atom:LineEdit Watermark="Error" Status="Error" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Borderless"/>
<atom:LineEdit Watermark="Warning" Status="Warning" StyleVariant="Borderless"/> <atom:LineEdit Watermark="Warning" Status="Warning" InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" StyleVariant="Borderless"/>
</StackPanel> </StackPanel>
</showcase:ShowCaseItem> </showcase:ShowCaseItem>

19
src/AtomUI.Controls/Input/LineEdit.cs
View File

@ -172,7 +172,6 @@ public class LineEdit : TextBox
#endregion #endregion
private readonly BorderRenderHelper _borderRenderHelper;
private ContentPresenter? _leftAddOnPresenter; private ContentPresenter? _leftAddOnPresenter;
private ContentPresenter? _rightAddOnPresenter; private ContentPresenter? _rightAddOnPresenter;
private Border? _lineEditKernelDecorator; private Border? _lineEditKernelDecorator;
@ -183,12 +182,7 @@ public class LineEdit : TextBox
AffectsRender<LineEdit>(BorderBrushProperty, BackgroundProperty); AffectsRender<LineEdit>(BorderBrushProperty, BackgroundProperty);
AffectsMeasure<LineEdit>(LeftAddOnProperty, RightAddOnProperty); AffectsMeasure<LineEdit>(LeftAddOnProperty, RightAddOnProperty);
} }
public LineEdit()
{
_borderRenderHelper = new BorderRenderHelper();
}
protected override void OnApplyTemplate(TemplateAppliedEventArgs e) protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
{ {
base.OnApplyTemplate(e); base.OnApplyTemplate(e);
@ -225,6 +219,17 @@ public class LineEdit : TextBox
if (change.Property == StatusProperty) { if (change.Property == StatusProperty) {
UpdatePseudoClasses(); UpdatePseudoClasses();
} }
if (change.Property == InnerLeftContentProperty ||
change.Property == InnerRightContentProperty) {
if (change.OldValue is Control oldControl) {
UIStructureUtils.SetTemplateParent(oldControl, null);
}
if (change.NewValue is Control newControl) {
UIStructureUtils.SetTemplateParent(newControl, this);
}
}
} }
private void SetupAddOnBorderInfo() private void SetupAddOnBorderInfo()

58
src/AtomUI.Controls/Input/LineEditTheme.cs
View File

@ -372,6 +372,15 @@ internal class LineEditTheme : BaseControlTheme
var revealButtonStyle = new Style(selector => selector.Nesting().Template().Name(RevealButtonPart)); var revealButtonStyle = new Style(selector => selector.Nesting().Template().Name(RevealButtonPart));
revealButtonStyle.Add(ToggleIconButton.PaddingProperty, LineEditResourceKey.RightInnerAddOnMargin); revealButtonStyle.Add(ToggleIconButton.PaddingProperty, LineEditResourceKey.RightInnerAddOnMargin);
commonStyle.Add(revealButtonStyle); commonStyle.Add(revealButtonStyle);
{
// 左右 inner icon 的大小
var innerContentIconStyle = new Style(selector => Selectors.Or(selector.Nesting().Template().Name(LeftInnerContentPart).Descendant().OfType<PathIcon>(),
selector.Nesting().Template().Name(RightInnerContentPart).Descendant().OfType<PathIcon>()));
innerContentIconStyle.Add(PathIcon.WidthProperty, GlobalResourceKey.IconSize);
innerContentIconStyle.Add(PathIcon.HeightProperty, GlobalResourceKey.IconSize);
commonStyle.Add(innerContentIconStyle);
}
var largeStyle = var largeStyle =
new Style(selector => selector.Nesting().PropertyEquals(LineEdit.SizeTypeProperty, SizeType.Large)); new Style(selector => selector.Nesting().PropertyEquals(LineEdit.SizeTypeProperty, SizeType.Large));
@ -460,6 +469,12 @@ internal class LineEditTheme : BaseControlTheme
} }
{ {
var errorStyle = new Style(selector => selector.Nesting().Class(LineEdit.ErrorPC)); var errorStyle = new Style(selector => selector.Nesting().Class(LineEdit.ErrorPC));
{
var innerContentIconStyle = new Style(selector => Selectors.Or(selector.Nesting().Template().Name(LeftInnerContentPart).Descendant().OfType<PathIcon>(),
selector.Nesting().Template().Name(RightInnerContentPart).Descendant().OfType<PathIcon>()));
innerContentIconStyle.Add(PathIcon.NormalFilledBrushProperty, GlobalResourceKey.ColorError);
errorStyle.Add(innerContentIconStyle);
}
var editKernelDecoratorStyle = var editKernelDecoratorStyle =
new Style(selector => selector.Nesting().Template().Name(LineEditKernelDecoratorPart)); new Style(selector => selector.Nesting().Template().Name(LineEditKernelDecoratorPart));
@ -480,6 +495,13 @@ internal class LineEditTheme : BaseControlTheme
{ {
var warningStyle = new Style(selector => selector.Nesting().Class(LineEdit.WarningPC)); var warningStyle = new Style(selector => selector.Nesting().Class(LineEdit.WarningPC));
{
var innerContentIconStyle = new Style(selector => Selectors.Or(selector.Nesting().Template().Name(LeftInnerContentPart).Descendant().OfType<PathIcon>(),
selector.Nesting().Template().Name(RightInnerContentPart).Descendant().OfType<PathIcon>()));
innerContentIconStyle.Add(PathIcon.NormalFilledBrushProperty, GlobalResourceKey.ColorWarning);
warningStyle.Add(innerContentIconStyle);
}
var editKernelDecoratorStyle = var editKernelDecoratorStyle =
new Style(selector => selector.Nesting().Template().Name(LineEditKernelDecoratorPart)); new Style(selector => selector.Nesting().Template().Name(LineEditKernelDecoratorPart));
editKernelDecoratorStyle.Add(Border.BorderBrushProperty, GlobalResourceKey.ColorWarning); editKernelDecoratorStyle.Add(Border.BorderBrushProperty, GlobalResourceKey.ColorWarning);
@ -504,9 +526,15 @@ internal class LineEditTheme : BaseControlTheme
var borderlessStyle = var borderlessStyle =
new Style(selector => selector.Nesting() new Style(selector => selector.Nesting()
.PropertyEquals(LineEdit.StyleVariantProperty, TextBoxVariant.Borderless)); .PropertyEquals(LineEdit.StyleVariantProperty, TextBoxVariant.Borderless));
{ {
var errorStyle = new Style(selector => selector.Nesting().Class(LineEdit.ErrorPC)); var errorStyle = new Style(selector => selector.Nesting().Class(LineEdit.ErrorPC));
{
var innerContentIconStyle = new Style(selector => Selectors.Or(selector.Nesting().Template().Name(LeftInnerContentPart).Descendant().OfType<PathIcon>(),
selector.Nesting().Template().Name(RightInnerContentPart).Descendant().OfType<PathIcon>()));
innerContentIconStyle.Add(PathIcon.NormalFilledBrushProperty, GlobalResourceKey.ColorError);
errorStyle.Add(innerContentIconStyle);
}
var scrollViewerStyle = new Style(selector => selector.Nesting().Template().Name(LineEditKernelDecoratorPart) var scrollViewerStyle = new Style(selector => selector.Nesting().Template().Name(LineEditKernelDecoratorPart)
.Descendant().OfType<ScrollViewer>()); .Descendant().OfType<ScrollViewer>());
scrollViewerStyle.Add(ScrollViewer.ForegroundProperty, GlobalResourceKey.ColorErrorText); scrollViewerStyle.Add(ScrollViewer.ForegroundProperty, GlobalResourceKey.ColorErrorText);
@ -516,6 +544,12 @@ internal class LineEditTheme : BaseControlTheme
{ {
var warningStyle = new Style(selector => selector.Nesting().Class(LineEdit.WarningPC)); var warningStyle = new Style(selector => selector.Nesting().Class(LineEdit.WarningPC));
{
var innerContentIconStyle = new Style(selector => Selectors.Or(selector.Nesting().Template().Name(LeftInnerContentPart).Descendant().OfType<PathIcon>(),
selector.Nesting().Template().Name(RightInnerContentPart).Descendant().OfType<PathIcon>()));
innerContentIconStyle.Add(PathIcon.NormalFilledBrushProperty, GlobalResourceKey.ColorWarning);
warningStyle.Add(innerContentIconStyle);
}
var scrollViewerStyle = new Style(selector => selector.Nesting().Template().Name(LineEditKernelDecoratorPart) var scrollViewerStyle = new Style(selector => selector.Nesting().Template().Name(LineEditKernelDecoratorPart)
.Descendant().OfType<ScrollViewer>()); .Descendant().OfType<ScrollViewer>());
scrollViewerStyle.Add(ScrollViewer.ForegroundProperty, GlobalResourceKey.ColorWarningText); scrollViewerStyle.Add(ScrollViewer.ForegroundProperty, GlobalResourceKey.ColorWarningText);
@ -553,6 +587,13 @@ internal class LineEditTheme : BaseControlTheme
{ {
var errorStyle = new Style(selector => selector.Nesting().Class(LineEdit.ErrorPC)); var errorStyle = new Style(selector => selector.Nesting().Class(LineEdit.ErrorPC));
{
var innerContentIconStyle = new Style(selector => Selectors.Or(selector.Nesting().Template().Name(LeftInnerContentPart).Descendant().OfType<PathIcon>(),
selector.Nesting().Template().Name(RightInnerContentPart).Descendant().OfType<PathIcon>()));
innerContentIconStyle.Add(PathIcon.NormalFilledBrushProperty, GlobalResourceKey.ColorError);
errorStyle.Add(innerContentIconStyle);
}
var editKernelDecoratorStyle = var editKernelDecoratorStyle =
new Style(selector => selector.Nesting().Template().Name(LineEditKernelDecoratorPart)); new Style(selector => selector.Nesting().Template().Name(LineEditKernelDecoratorPart));
@ -582,6 +623,13 @@ internal class LineEditTheme : BaseControlTheme
{ {
var warningStyle = new Style(selector => selector.Nesting().Class(LineEdit.WarningPC)); var warningStyle = new Style(selector => selector.Nesting().Class(LineEdit.WarningPC));
{
var innerContentIconStyle = new Style(selector => Selectors.Or(selector.Nesting().Template().Name(LeftInnerContentPart).Descendant().OfType<PathIcon>(),
selector.Nesting().Template().Name(RightInnerContentPart).Descendant().OfType<PathIcon>()));
innerContentIconStyle.Add(PathIcon.NormalFilledBrushProperty, GlobalResourceKey.ColorWarning);
warningStyle.Add(innerContentIconStyle);
}
var editKernelDecoratorStyle = var editKernelDecoratorStyle =
new Style(selector => selector.Nesting().Template().Name(LineEditKernelDecoratorPart)); new Style(selector => selector.Nesting().Template().Name(LineEditKernelDecoratorPart));
@ -597,6 +645,14 @@ internal class LineEditTheme : BaseControlTheme
var focusStyle = new Style(selector => selector.Nesting().Class(StdPseudoClass.FocusWithIn)); var focusStyle = new Style(selector => selector.Nesting().Class(StdPseudoClass.FocusWithIn));
focusStyle.Add(Border.BorderBrushProperty, GlobalResourceKey.ColorWarning); focusStyle.Add(Border.BorderBrushProperty, GlobalResourceKey.ColorWarning);
focusStyle.Add(Border.BackgroundProperty, LineEditResourceKey.ActiveBg); focusStyle.Add(Border.BackgroundProperty, LineEditResourceKey.ActiveBg);
{
var innerContentIconStyle = new Style(selector => Selectors.Or(selector.Nesting().Template().Name(LeftInnerContentPart).Descendant().OfType<PathIcon>(),
selector.Nesting().Template().Name(RightInnerContentPart).Descendant().OfType<PathIcon>()));
innerContentIconStyle.Add(PathIcon.NormalFilledBrushProperty, GlobalResourceKey.ColorWarning);
focusStyle.Add(innerContentIconStyle);
}
editKernelDecoratorStyle.Add(focusStyle); editKernelDecoratorStyle.Add(focusStyle);
var scrollViewerStyle = new Style(selector => selector.Nesting().Template().Name(LineEditKernelDecoratorPart) var scrollViewerStyle = new Style(selector => selector.Nesting().Template().Name(LineEditKernelDecoratorPart)