优化样式和功能
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user