WPF 常用样式属性及示例笔记

一、基础样式属性示例

1. 背景与前景

   <!-- 背景色与字体颜色 -->
   <TextBlock Text="背景与前景示例"Background="#3498db"  <!-- 背景色（支持十六进制、命名颜色、Brush对象） -->Foreground="White"/>  <!-- 前景色（字体颜色） -->

2. 字体相关

   <TextBlock Text="字体样式示例"FontFamily="Microsoft YaHei"  <!-- 字体家族 -->FontSize="16"                 <!-- 字体大小 -->FontWeight="Bold"             <!-- 粗细：Bold/Normal/Thin等 -->FontStyle="Italic"/>          <!-- 倾斜：Italic/Normal -->

3. 尺寸与边距

   <Button Content="尺寸与边距"Width="120"         <!-- 宽度 -->Height="40"         <!-- 高度 -->Margin="10,5,10,5"  <!-- 外间距：左,上,右,下 -->Padding="15,8"/>    <!-- 内间距：左,上,右,下 -->

4. 文本装饰与格式

   <TextBlock Text="文本装饰示例"TextDecorations="Underline"  <!-- 装饰：Underline/Strikethrough/Overline -->TextIndent="20"              <!-- 首行缩进（像素） -->LineHeight="25"              <!-- 行高 -->TextWrapping="Wrap"/>        <!-- 换行：Wrap/NoWrap/WrapWithOverflow -->

5. 对齐方式

   <!-- 控件对齐（相对于父容器） -->
   <Button Content="控件对齐"HorizontalAlignment="Right"  <!-- 水平：Left/Center/Right/Stretch -->VerticalAlignment="Center"/> <!-- 垂直：Top/Center/Bottom/Stretch -->
   ​
   <!-- 内容对齐（控件内部内容） -->
   <Button Content="内容对齐"Width="100"HorizontalContentAlignment="Left"  <!-- 内容水平对齐 -->VerticalContentAlignment="Bottom"/> <!-- 内容垂直对齐 -->

6. 边框属性

   <TextBox Text="边框示例"BorderBrush="#bdc3c7"    <!-- 边框颜色 -->BorderThickness="2"/>    <!-- 边框粗细 -->

7. 透明度与可见性

   <Button Content="透明度示例"Opacity="0.7"/>  <!-- 透明度：0-1之间，1为完全不透明 -->
   ​
   <Button Content="可见性示例"Visibility="Collapsed"/>  <!-- 可见性：Visible/Hidden/Collapsed --><!-- Hidden：隐藏但保留空间；Collapsed：隐藏且不保留空间 -->

8. 控件层级

   <Canvas><Rectangle Width="100" Height="100" Fill="Red" Canvas.ZIndex="1"/><Rectangle Width="100" Height="100" Fill="Blue" Canvas.ZIndex="2" Margin="50"/><!-- ZIndex值越大，层级越高，显示在上方 -->
   </Canvas>

二、进阶样式：变换（Transform）

变换用于改变控件的形状、位置或方向，常用变换类型：

1. 平移变换（TranslateTransform）

   <Button Content="平移变换"><Button.RenderTransform><TranslateTransform X="20" Y="10"/>  <!-- X：水平偏移，Y：垂直偏移 --></Button.RenderTransform>
   </Button>

2. 旋转变换（RotateTransform）

   <TextBlock Text="旋转变换"><TextBlock.RenderTransform><RotateTransform Angle="15" CenterX="50" CenterY="50"/><!-- Angle：旋转角度，CenterX/Y：旋转中心点 --></TextBlock.RenderTransform>
   </TextBlock>

3. 缩放变换（ScaleTransform）

   <Image Source="logo.png"><Image.RenderTransform><ScaleTransform ScaleX="1.2" ScaleY="1.2"/>  <!-- 缩放比例，大于1放大 --></Image.RenderTransform>
   </Image>

4. 倾斜变换（SkewTransform）

   <Border BorderBrush="Black" BorderThickness="1" Width="100" Height="50"><Border.RenderTransform><SkewTransform AngleX="10" AngleY="5"/>  <!-- 水平和垂直倾斜角度 --></Border.RenderTransform>
   </Border>

5. 组合变换（TransformGroup）

   <Button Content="组合变换"><Button.RenderTransform><TransformGroup><TranslateTransform X="30"/><RotateTransform Angle="10"/><ScaleTransform ScaleX="1.1"/></TransformGroup></Button.RenderTransform>
   </Button>

三、进阶样式：简单动画示例

动画通过改变属性值产生动态效果，基础示例：

1. 透明度动画

   <Button Content="透明度动画"><Button.Triggers><EventTrigger RoutedEvent="MouseEnter"><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetProperty="Opacity"From="0.5" To="1" Duration="0:0:0.3"/></Storyboard></BeginStoryboard></EventTrigger></Button.Triggers>
   </Button>

2. 缩放动画

   <Button Content="缩放动画"><Button.RenderTransform><ScaleTransform x:Name="scaleTransform"/></Button.RenderTransform><Button.Triggers><EventTrigger RoutedEvent="Click"><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetName="scaleTransform"Storyboard.TargetProperty="ScaleX"From="1" To="1.2" Duration="0:0:0.2"AutoReverse="True"/>  <!-- 自动反向恢复 --><DoubleAnimation Storyboard.TargetName="scaleTransform"Storyboard.TargetProperty="ScaleY"From="1" To="1.2" Duration="0:0:0.2"AutoReverse="True"/></Storyboard></BeginStoryboard></EventTrigger></Button.Triggers>
   </Button>

总结

• 基础样式属性控制控件的外观和布局，是 UI 设计的基础。

• 变换（Transform）可以实现控件的平移、旋转、缩放和倾斜，增强 UI 的表现力。

• 动画通过属性值的动态变化实现交互反馈，提升用户体验。

实际开发中，这些属性常与样式（Style）和触发器（Trigger）结合使用，实现复杂的 UI 效果和交互逻辑。