WPF 核心概念笔记（补充示例）

一、样式分类与使用示例

1. 按范围分类示例

   <!-- 1. 全局样式（App.xaml中） -->
   <Application.Resources>
       <Style x:Key="GlobalButtonStyle" TargetType="Button">
           <Setter Property="Background" Value="LightBlue"/>
           <Setter Property="FontSize" Value="14"/>
       </Style>
   </Application.Resources>
   ​
   <!-- 2. 局部样式（Window.xaml中） -->
   <Window.Resources>
       <Style x:Key="LocalTextBoxStyle" TargetType="TextBox">
           <Setter Property="Foreground" Value="DarkGreen"/>
           <Setter Property="Margin" Value="5"/>
       </Style>
   </Window.Resources>
   ​
   <!-- 3. 行内样式 -->
   <Button Style="{StaticResource GlobalButtonStyle}">
       <Button.Style>
           <!-- 行内样式会覆盖外部样式 -->
           <Style TargetType="Button">
               <Setter Property="Width" Value="100"/>
           </Style>
       </Button.Style>
   </Button>

2. 静态与动态资源使用区别

   <!-- 静态资源 -->
   <TextBox Style="{StaticResource LocalTextBoxStyle}"/>
   ​
   <!-- 动态资源 -->
   <TextBox Style="{DynamicResource ThemeTextBoxStyle}"/>

二、触发器示例

1. Trigger（普通触发器）

   <Style TargetType="Button">
       <Setter Property="Background" Value="Gray"/>
       <Style.Triggers>
           <!-- 鼠标悬停时改变背景 -->
           <Trigger Property="IsMouseOver" Value="True">
               <Setter Property="Background" Value="Blue"/>
               <Setter Property="Cursor" Value="Hand"/>
           </Trigger>
       </Style.Triggers>
   </Style>

2. MultiTrigger（多条件触发器）

   <Style TargetType="TextBox">
       <Style.Triggers>
           <!-- 同时满足两个条件 -->
           <MultiTrigger>
               <MultiTrigger.Conditions>
                   <Condition Property="IsFocused" Value="True"/>
                   <Condition Property="Text" Value=""/>
               </MultiTrigger.Conditions>
               <Setter Property="BorderBrush" Value="Red"/>
               <Setter Property="ToolTip" Value="不能为空"/>
           </MultiTrigger>
       </Style.Triggers>
   </Style>

3. EventTrigger（事件触发器）

   <Style TargetType="Button">
       <Style.Triggers>
           <!-- 点击事件触发动画 -->
           <EventTrigger RoutedEvent="Click">
               <BeginStoryboard>
                   <Storyboard>
                       <DoubleAnimation 
                           Storyboard.TargetProperty="Opacity"
                           From="1" To="0.5" Duration="0:0:0.2" 
                           AutoReverse="True"/>
                   </Storyboard>
               </BeginStoryboard>
           </EventTrigger>
       </Style.Triggers>
   </Style>

三、模板示例

1. ControlTemplate（控件模板）

   <Style TargetType="Button">
       <Setter Property="Template">
           <Setter.Value>
               <ControlTemplate TargetType="Button">
                   <!-- 自定义按钮外观 -->
                   <Border 
                       x:Name="border"
                       Background="LightGray" 
                       BorderBrush="Gray"
                       BorderThickness="2"
                       CornerRadius="5">
                       <ContentPresenter 
                           HorizontalAlignment="Center"
                           VerticalAlignment="Center"/>
                   </Border>
                   <ControlTemplate.Triggers>
                       <Trigger Property="IsPressed" Value="True">
                           <Setter TargetName="border" Property="Background" Value="DarkGray"/>
                       </Trigger>
                   </ControlTemplate.Triggers>
               </ControlTemplate>
           </Setter.Value>
       </Setter>
   </Style>

2. DataTemplate（数据模板）

   <!-- 为ListBox中的User对象定义显示方式 -->
   <ListBox ItemsSource="{Binding Users}">
       <ListBox.ItemTemplate>
           <DataTemplate>
               <StackPanel Orientation="Horizontal">
                   <TextBlock Text="{Binding Name}" Width="100"/>
                   <TextBlock Text="{Binding Age}" Width="50"/>
                   <TextBlock Text="{Binding Email}"/>
               </StackPanel>
           </DataTemplate>
       </ListBox.ItemTemplate>
   </ListBox>

四、数据绑定模式示例

1. 绑定到元素

   <!-- Slider控制TextBox字体大小 -->
   <Slider x:Name="fontSizeSlider" Minimum="10" Maximum="30" Value="12"/>
   <TextBox 
       Text="绑定示例"
       FontSize="{Binding ElementName=fontSizeSlider, Path=Value}"/>

2. 五种绑定模式

   <!-- 1. Default - 文本框默认双向 -->
   <TextBox Text="{Binding UserName}"/>
   
   <!-- 2. OneWay - 仅数据源更新UI -->
   <TextBlock Text="{Binding CurrentTime, Mode=OneWay}"/>
   
   <!-- 3. TwoWay - 双向同步 -->
   <CheckBox IsChecked="{Binding IsAgree, Mode=TwoWay}"/>
   
   <!-- 4. OneTime - 仅初始加载 -->
   <TextBlock Text="{Binding InitialSetupInfo, Mode=OneTime}"/>
   
   <!-- 5. OneWayToSource - 仅UI更新数据源 -->
   <Slider Value="{Binding FilterValue, Mode=OneWayToSource}"/>

3. 绑定补充属性

   <!-- 格式化与更新时机 -->
   <TextBox 
       Text="{Binding Price, 
              StringFormat=C,  <!-- 货币格式 -->
              UpdateSourceTrigger=PropertyChanged}"/>  <!-- 实时更新 -->
   
   <!-- 绑定失败时显示默认值 -->
   <TextBlock Text="{Binding UnknownData, FallbackValue='无数据'}"/>

通过这些示例可以更直观地理解 WPF 中样式、触发器、模板和数据绑定的使用方式，实际开发中可以根据需求组合运用这些特性创建丰富的 UI 效果。