优化样式和功能

This commit is contained in:
2026-02-23 18:53:29 +08:00
parent 18174b404c
commit 68dfdc15a9
4 changed files with 87 additions and 30 deletions

View File

@@ -118,10 +118,13 @@
<Setter Property="BorderThickness" Value="0" />
<Setter Property="assists:ControlAssist.Orientation" Value="Horizontal" />
<Setter Property="assists:ControlAssist.CornerRadius" Value="10" />
<!-- 1. 设置 ItemContainerStyle -->
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Background" Value="{DynamicResource ControlBackgroundNormalBrush}" />
<Setter Property="Background" Value="Transparent" />
<!-- 改为透明,露出父级背景 -->
<Setter Property="Foreground" Value="{DynamicResource TextPrimaryBrush}" />
<Setter Property="FontSize" Value="16" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
@@ -129,10 +132,11 @@
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid>
<!-- 注意:这里的 CornerRadius 设为 0因为圆角由外层 ListBox 统一裁切 -->
<Border
x:Name="Border"
Background="{TemplateBinding Background}"
CornerRadius="{Binding Path=(assists:ControlAssist.CornerRadius), RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBox}}"
CornerRadius="0"
Cursor="Hand">
<ContentPresenter
Margin="10"
@@ -143,8 +147,8 @@
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="{DynamicResource PrimaryNormalBrush}" />
<Setter Property="Background" Value="{DynamicResource ControlBackgroundSelectedBrush}" />
<Setter Property="Foreground" Value="{DynamicResource TextAccentBrush}" />
<Setter Property="Background" Value="{DynamicResource PrimaryNormalBrush}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource TextDisabledBrush}" />
@@ -156,7 +160,8 @@
</Style>
</Setter.Value>
</Setter>
<!-- 设置布局面板为水平排列 -->
<!-- 2. 设置布局面板为水平/垂直排列 -->
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
@@ -164,10 +169,32 @@
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<!-- 3. 设置 ListBox 自身的 Template 进行整体裁切 (核心修改点) -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ItemsPresenter />
<!-- 外层框架:提供整体的背景和真实的圆角 -->
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{Binding Path=(assists:ControlAssist.CornerRadius), RelativeSource={RelativeSource TemplatedParent}}">
<Grid>
<!-- 绘制一个带有圆角的黑色遮罩 Border (颜色不重要OpacityMask只看透明度) -->
<Border
x:Name="Mask"
Background="{DynamicResource ControlBackgroundNormalBrush}"
CornerRadius="{Binding Path=(assists:ControlAssist.CornerRadius), RelativeSource={RelativeSource TemplatedParent}}" />
<!-- ItemsPresenter 展示子项,应用遮罩,超出圆角的部分会被自动裁切 -->
<ItemsPresenter>
<ItemsPresenter.OpacityMask>
<VisualBrush Visual="{Binding ElementName=Mask}" />
</ItemsPresenter.OpacityMask>
</ItemsPresenter>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>