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

一、基础样式属性示例

背景与前景

复制代码

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

字体相关

复制代码

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

尺寸与边距

复制代码

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

文本装饰与格式

复制代码

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

对齐方式

复制代码

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

<!-- 内容对齐（控件内部内容） -->
<Button 
    Content="内容对齐"
    Width="100"
    HorizontalContentAlignment="Left"  <!-- 内容水平对齐 -->
    VerticalContentAlignment="Bottom"/> <!-- 内容垂直对齐 -->

边框属性

复制代码

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

透明度与可见性

复制代码

<Button 
    Content="透明度示例"
    Opacity="0.7"/>  <!-- 透明度：0-1之间，1为完全不透明 -->

<Button 
    Content="可见性示例"
    Visibility="Collapsed"/>  <!-- 可见性：Visible/Hidden/Collapsed -->
    <!-- Hidden：隐藏但保留空间；Collapsed：隐藏且不保留空间 -->

控件层级

复制代码

<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）

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

平移变换（TranslateTransform）

复制代码

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

旋转变换（RotateTransform）

复制代码

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

缩放变换（ScaleTransform）

复制代码

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

倾斜变换（SkewTransform）

复制代码

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

组合变换（TransformGroup）

复制代码

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

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

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

透明度动画

复制代码

<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>

缩放动画

复制代码

<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 效果和交互逻辑。