WPF 实现Windows日历光影效果

最终效果：

 

 

后台代码：

        private void Canvas_MouseMove(object sender, MouseEventArgs e)
        {
            Canvas.SetLeft(el, e.GetPosition((UIElement)sender).X - 135/2);
            Canvas.SetTop(el, e.GetPosition((UIElement)sender).Y - 135 / 2);

        }

 

xaml代码：

      <Canvas Height="225" Width="225" ClipToBounds="True" PreviewMouseMove="Canvas_MouseMove"  Background="#37383a" SnapsToDevicePixels="True">
            <Ellipse x:Name="el" Height="135" Width="135" RenderTransformOrigin="-1.712,1.269">
                <Ellipse.Fill>
                    <RadialGradientBrush>
                        <GradientStop Color="#6c6d6e" Offset="0"/>
                        <GradientStop Color="#37383a" Offset="1"/>
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Path Data="
                          M0,0 L225, 0
                          M0,45 L225, 45
                          M0,90 L225, 90
                          M0,135 L225, 135
                          M0,180 L225, 180
                          M0,225 L225, 225
                          
                          M0,0 L0,255
                          M45,0 L45,255
                          M90,0 L90,255
                          M135,0 L135,255
                          M180,0 L180,255
                          M225,0 L225,255
                          " Stroke="#37383a" StrokeThickness="2"/>
            <WrapPanel Height="225" Width="225">
                <WrapPanel.Resources>
                    <Style TargetType="Label">
                        <Style.Setters>
                            <Setter Property="BorderThickness" Value="3"/>
                            <Setter Property="Width" Value="45"/>
                            <Setter Property="Height" Value="45"/>
                            <Setter Property="Background" Value="#37383a"/>
                            <Setter Property="Content" Value="88"/>
                            <Setter Property="HorizontalContentAlignment" Value="Center"/>
                            <Setter Property="VerticalContentAlignment" Value="Center"/>
                            <Setter Property="Foreground" Value="White"/>
                        </Style.Setters>
                        <Style.Resources>
                            <SolidColorBrush x:Key="EnterColor" Color="#888989" />
                            <SolidColorBrush x:Key="LeaveColor" Color="Transparent" />
                            <Storyboard x:Key="OnMouseEnter1">
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0"  Value="{StaticResource EnterColor }" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Key="OnMouseLeave1">
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0"  Value="{StaticResource LeaveColor }" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </Style.Resources>
                        <Style.Triggers>
                            <EventTrigger RoutedEvent="UIElement.MouseEnter">
                                <BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}"/>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="UIElement.MouseLeave">
                                <BeginStoryboard Storyboard="{StaticResource OnMouseLeave1}"/>
                            </EventTrigger>
                        </Style.Triggers>
                    </Style>
                </WrapPanel.Resources>
                <Label  />
                <Label/>
                <Label/>
                <Label/>
                <Label/>
                <Label/>
                <Label/>
                <Label/>
                <Label/>
                <Label/>
                <Label/>
                <Label/>
                <Label/>
                <Label/>
                <Label/>
                <Label/>
                <Label/>
                <Label/>
                <Label/>
                <Label/>
                <Label/>
                <Label/>
                <Label/>
                <Label/>
                <Label/>
                <Label/>
            </WrapPanel>
        </Canvas>