WPF设计标准学习记录27

属性名	功能说明	例子
Color	设置阴影效果背景色	Color="Red"
ShadowDepth	设置阴影的偏移度	ShadowDepth="5"
Direction	设置阴影的角度	Direction="-45"
BlurRadius	设置阴影模糊程度	BlurRadius="20"
Opacity	设置阴影透明度	Opacity="1"

<Button Content="进入WPF中文网" Width="100" Height="50">
    <Button.Effect>
        <DropShadowEffect ShadowDepth="10" BlurRadius="20" Color="Gray"/>
    </Button.Effect>
</Button>

元素类型	关键属性/特性
Button	Content="进入WPF中文网" Width="100" Height="50"
Button.Effect	<DropShadowEffect>
DropShadowEffect	ShadowDepth="10" BlurRadius="20" Color="Gray"

graph TD 
    A[Button] --> B[基础属性]
    A --> C[视觉效果]
    
    B --> B1("显示文字：进入WPF中文网")
    B --> B2("尺寸：100x50")
    
    C --> C1{DropShadowEffect}
    C1 --> C1a("阴影深度：10")
    C1 --> C1b("模糊半径：20")
    C1 --> C1c("颜色：Gray")

    <Grid x:Name="grid" Background="Transparent"
          MouseMove="grid_MouseMove">
        <Button x:Name="button" Content="进入WPF" Width="100" Height="50">
            <Button.Effect>
                <DropShadowEffect Direction="-45"
                                  ShadowDepth="10"
                                  BlurRadius="25"
                                  Color="Gray"/>
            </Button.Effect>
        </Button>
    </Grid>

素类型	关键属性/特性	属性含义
Grid	x:Name="grid" Background="Transparent" MouseMove="grid_MouseMove"	容器命名、透明背景、绑定鼠标移动事件
Button	x:Name="button" Content="进入WPF" Width="100" Height="50"	按钮命名、显示文本、固定尺寸（100×50）
DropShadowEffect	Direction="-45" ShadowDepth="10" BlurRadius="25" Color="Gray"	阴影方向（-45°角）、投影距离（10像素）、模糊强度（25像素）、阴影颜色（灰色）

graph TD  
    A[Grid] --> B[基础属性]  
    A --> C[事件绑定]  
    A --> D[Button控件]  
    
    B --> B1("x:Name=grid")  
    B --> B2("Background=Transparent")  
    
    C --> C1("MouseMove=grid_MouseMove")  
    
    D --> D1("x:Name=button")  
    D --> D2("Content=进入WPF")  
    D --> D3("Width=100 | Height=50")  
    
    D --> E[视觉效果]  
    E --> E1{DropShadowEffect}  
    E1 --> E1a("Direction=-45°")  
    E1 --> E1b("ShadowDepth=10")  
    E1 --> E1c("BlurRadius=25")  
    E1 --> E1d("Color=Gray")  

private void grid_MouseMove(object sender, MouseEventArgs e)
{
    double width = grid.ActualWidth;
    double height = grid.ActualHeight;
    Point centerPoint = new Point(width / 2, height / 2);
    Point mousePoint = e.GetPosition(grid);
 
    //与X轴的夹角
    double angle = Math.Atan2(
        mousePoint.Y - centerPoint.Y, 
        mousePoint.X - centerPoint.X); //弧度
    double theta = angle * 180 / Math.PI;// 角度
    this.Title = $"角度={theta}";
 
    DropShadowEffect dropShadowEffect = button.Effect as DropShadowEffect;            
 
    //计算距离
    var distance = Math.Sqrt(
        (Math.Pow(mousePoint.X - centerPoint.X, 2) 
        + Math.Pow(mousePoint.Y - centerPoint.Y, 2)));
 
    dropShadowEffect.Direction = -theta;//设置阴影角度
    dropShadowEffect.ShadowDepth = distance/10;//设置阴影偏移量
    dropShadowEffect.BlurRadius = distance / 10 * 2;//设置模糊程度
}

private void grid_MouseMove(object sender, MouseEventArgs e)
{
    // 获取Grid容器的实际尺寸（动态适应布局变化）
    double width = grid.ActualWidth;   // [!] 若Grid未初始化可能为0 
    double height = grid.ActualHeight;
    
    // 计算Grid中心点坐标（坐标系原点为左上角）
    Point centerPoint = new Point(width / 2, height / 2);
    
    // 获取鼠标相对于Grid的实时坐标 
    Point mousePoint = e.GetPosition(grid);  // [!] 坐标可能超出Grid边界 
    
    // 计算鼠标与中心点的夹角（基于笛卡尔坐标系）
    // [!] Atan2参数顺序为(Y,X)，与数学常规相反 
    double angle = Math.Atan2( 
        mousePoint.Y - centerPoint.Y,      // Y轴差值 
        mousePoint.X - centerPoint.X);     // X轴差值 
    double theta = angle * 180 / Math.PI;  // 弧度转角度（-180°~180°）
    
    // 在窗口标题显示实时角度（调试用途）
    this.Title = $"角度={theta}";          // [!] 高频更新可能影响性能 
 
    // 获取按钮的投影效果（需提前设置Effect为DropShadowEffect）
    DropShadowEffect dropShadowEffect = button.Effect as DropShadowEffect; 
    // [!] 未处理类型转换失败情况 
 
    // 计算欧氏距离（勾股定理）
    var distance = Math.Sqrt(
        Math.Pow(mousePoint.X - centerPoint.X, 2) 
      + Math.Pow(mousePoint.Y - centerPoint.Y, 2));
    
    // 动态调整阴影参数 
    dropShadowEffect.Direction = -theta;          // 角度镜像处理 
    dropShadowEffect.ShadowDepth = distance / 10; // 随距离线性变化 
    dropShadowEffect.BlurRadius = distance / 10 * 2; // 模糊度为深度2倍 
    // [!] 未设置数值边界，极端坐标可能产生异常效果 
}

graph TD
    subgraph 鼠标事件处理
        A[进入图像区域] --> B[显示放大镜]
        C[移动鼠标] --> D{控件校验}
        D -->|image/ellipse已初始化| E[计算坐标与尺寸]
        E --> F[构建视口矩形]
        F --> G[更新画刷显示区域]
        E --> H[定位放大镜中心]
        I[离开图像区域] --> J[隐藏放大镜]
    end

    style B stroke:#4CAF50,stroke-width:2px
    style J stroke:#F44336,stroke-width:2px
    classDef critical fill:#FFEBEE,stroke:#EF5350;
    class D critical

增强版代码示例

// 带边界检查和动画过渡的版本
private void Enhanced_MouseMove(object sender, MouseEventArgs e)
{
    if (image.ActualWidth > 0 && ellipse != null)
    {
        Point point = e.GetPosition(image);
        double maxX = image.ActualWidth - length;
        double maxY = image.ActualHeight - length;

        // 边界约束计算
        double clampedX = Math.Clamp(point.X - radius, 0, maxX);
        double clampedY = Math.Clamp(point.Y - radius, 0, maxY);
        
        // 添加视口切换动画
        visualBrush.BeginAnimation(VisualBrush.ViewboxProperty,
            new RectAnimation(new Rect(clampedX, clampedY, length, length),
                TimeSpan.FromMilliseconds(150)));

        // 弹性定位动画
        ellipse.BeginAnimation(Canvas.LeftProperty, 
            new DoubleAnimation(point.X - ellipse.ActualWidth / 2, 
                new Duration(TimeSpan.FromMilliseconds(200))));
    }
}

属性名称	说明	例子
Radius	获取或设置模糊效果的曲线的半径。默认值为5	Radius="5"
KernelType	获取或设置计算变得模糊的曲线
RenderingBias	获取或设置是否呈现效果时注重速度还是质量

	<Window.Resources>
    <Storyboard x:Key="WidthStoryboard" TargetProperty="Width">
        <DoubleAnimation 
                     From="200" 
                     To="300" 
                     Duration="0:0:1.5"
                     AutoReverse="True" 
                     RepeatBehavior="Forever">
        </DoubleAnimation>
    </Storyboard>
    <Storyboard x:Key="HeightStoryboard" TargetProperty="Height">
        <DoubleAnimation 
                     From="200" 
                     To="30