WPF学习————制作时钟

话不多说,这个实例非常适合入门者。主要的东西是路径Path。然后是RenderTransfer和数据绑定。不熟悉的请先阅读相关知识,也可以根据实例来一边实践一边学习。

先上效果:WPF学习————制作时钟

整体结构如下:

窗体设置: 

Height="450" Width="450" ResizeMode="NoResize" WindowStyle="None"

xaml层次:

WPF学习————制作时钟

WPF学习————制作时钟
 <Border Background="LightCyan">
        <Grid>
            <Ellipse Stroke="Black" StrokeThickness="10" Margin="10"></Ellipse>
            <Ellipse Stroke="Gray" StrokeThickness="1" Width="350" Height="350"></Ellipse>
            <Ellipse Stroke="Gray" StrokeThickness="1" Width="380" Height="380"></Ellipse>
            <Ellipse  StrokeThickness="5" Fill="White" Width="20" Height="20" Stroke="Black" ></Ellipse>

            <TextBlock Text="12" FontSize="35" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="205" Y="50"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock Text="1" FontSize="25" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="290" Y="80"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock Text="2" FontSize="25" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="340" Y="130"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock Text="3" FontSize="35" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="370" Y="200"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock Text="4" FontSize="25" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="350" Y="280"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock Text="5" FontSize="25" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="300" Y="340"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock Text="6" FontSize="35" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="215" Y="360"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock Text="8" FontSize="25" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="80" Y="280"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock Text="7" FontSize="25" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="140" Y="340"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock Text="9" FontSize="35" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="60" Y="205"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock Text="11" FontSize="25" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="140" Y="80"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock Text="10" FontSize="25" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="85" Y="130"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <Path  Stroke="Black" StrokeThickness="3">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="0" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path  Stroke="Black" StrokeThickness="3">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="90" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path  Stroke="Black" StrokeThickness="3">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="180" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path  Stroke="Black" StrokeThickness="3">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="270" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path  Stroke="Black" StrokeThickness="1">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="30" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path  Stroke="Black" StrokeThickness="1">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="60" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path  Stroke="Black" StrokeThickness="1">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="120" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path  Stroke="Black" StrokeThickness="1">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="150" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path  Stroke="Black" StrokeThickness="1">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="210" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path  Stroke="Black" StrokeThickness="1">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="240" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>

            </Path>
            <Path  Stroke="Black" StrokeThickness="1">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="300" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path  Stroke="Black" StrokeThickness="1">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="330" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path  Stroke="Yellow" StrokeThickness="1" Name="seconds">
                <Path.RenderTransform>
                    <RotateTransform CenterX="225" CenterY="225" Angle="{Binding clockTimeData.second_indicate,  UpdateSourceTrigger=PropertyChanged}">
                        
                    </RotateTransform>
                </Path.RenderTransform>
                <Path.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF2BE60E" Offset="0.3"/>
                        <GradientStop Color="White" Offset="1"/>
                    </LinearGradientBrush>
                </Path.Fill>
                <Path.Data>
                    <PathGeometry Figures="M 225,60 220,200 225,225 225,250  225,225  230,200 z">
                    </PathGeometry>
                </Path.Data>
                <!--<Path.Triggers>
                    <EventTrigger RoutedEvent="Loaded">
                        --><!--<BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation 
                                    Storyboard.TargetName="seconds"
                                    Storyboard.TargetProperty="RenderTransform.Angle"
                                    Duration="00:01:00" From="0" To="360" By="6" RepeatBehavior="Forever"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>--><!--
                    </EventTrigger>
                </Path.Triggers>-->

            </Path>
            <Path  Stroke="Black" StrokeThickness="2">
                <Path.RenderTransform>
                    <RotateTransform CenterX="225" CenterY="225" Angle="{Binding clockTimeData.minius_indicate,  UpdateSourceTrigger=PropertyChanged}">

                    </RotateTransform>
                </Path.RenderTransform>
                <Path.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF157AF3" Offset="0.3"/>
                        <GradientStop Color="White" Offset="1"/>
                    </LinearGradientBrush>
                </Path.Fill>
                <Path.Data>
                    <PathGeometry Figures="M 225,80 215,200 225,225 225,250  225,225  235,200 z">

                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path  Stroke="Black" StrokeThickness="2">
                <Path.RenderTransform>
                    <RotateTransform CenterX="225" CenterY="225" Angle="{Binding clockTimeData.hours_indicate,  UpdateSourceTrigger=PropertyChanged}">

                    </RotateTransform>
                </Path.RenderTransform>
                <Path.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFE233AA" Offset="0.3"/>
                        <GradientStop Color="White" Offset="1"/>
                    </LinearGradientBrush>
                </Path.Fill>
                <Path.Data>
                    <PathGeometry Figures="M 225,120 200,200 225,225 225,250  225,225  250,200 z">

                    </PathGeometry>
                </Path.Data>
            </Path>

        </Grid>
    </Border>
View Code

 

1:先设计静态的东西。时钟的面板上的,最外面的大黑圆。数值对应的分度圆。

<Ellipse Stroke="Black" StrokeThickness="10" Margin="10"></Ellipse>
<Ellipse Stroke="Gray" StrokeThickness="1" Width="350" Height="350"></Ellipse>
<Ellipse Stroke="Gray" StrokeThickness="1" Width="380" Height="380"></Ellipse>
<Ellipse StrokeThickness="5" Fill="White" Width="20" Height="20" Stroke="Black" ></Ellipse>

2:设计数字,并安排到合适的位置,注意数值对应的黑点也是Path。

WPF学习————制作时钟
 <TextBlock Text="12" FontSize="35" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="205" Y="50"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock Text="1" FontSize="25" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="290" Y="80"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock Text="2" FontSize="25" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="340" Y="130"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock Text="3" FontSize="35" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="370" Y="200"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock Text="4" FontSize="25" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="350" Y="280"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock Text="5" FontSize="25" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="300" Y="340"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock Text="6" FontSize="35" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="215" Y="360"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock Text="8" FontSize="25" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="80" Y="280"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock Text="7" FontSize="25" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="140" Y="340"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock Text="9" FontSize="35" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="60" Y="205"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock Text="11" FontSize="25" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="140" Y="80"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock Text="10" FontSize="25" >
                <TextBlock.RenderTransform>
                    <TranslateTransform X="85" Y="130"></TranslateTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
            <Path  Stroke="Black" StrokeThickness="3">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="0" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path  Stroke="Black" StrokeThickness="3">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="90" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path  Stroke="Black" StrokeThickness="3">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="180" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path  Stroke="Black" StrokeThickness="3">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="270" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path  Stroke="Black" StrokeThickness="1">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="30" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path  Stroke="Black" StrokeThickness="1">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="60" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path  Stroke="Black" StrokeThickness="1">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="120" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path  Stroke="Black" StrokeThickness="1">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="150" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path  Stroke="Black" StrokeThickness="1">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="210" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path  Stroke="Black" StrokeThickness="1">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="240" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>

            </Path>
            <Path  Stroke="Black" StrokeThickness="1">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="300" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path  Stroke="Black" StrokeThickness="1">
                <Path.Data>
                    <PathGeometry Figures="M 225,35 225,50">
                        <PathGeometry.Transform>
                            <RotateTransform Angle="330" CenterX="225" CenterY="225"></RotateTransform>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>
            </Path>
View Code

 

3:用Path设计好时针,分针,秒针的形状,并加入渐变效果。

WPF学习————制作时钟
  <Path  Stroke="Yellow" StrokeThickness="1" Name="seconds">
                <Path.RenderTransform>
                    <RotateTransform CenterX="225" CenterY="225" Angle="{Binding clockTimeData.second_indicate,  UpdateSourceTrigger=PropertyChanged}">
                        
                    </RotateTransform>
                </Path.RenderTransform>
                <Path.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF2BE60E" Offset="0.3"/>
                        <GradientStop Color="White" Offset="1"/>
                    </LinearGradientBrush>
                </Path.Fill>
                <Path.Data>
                    <PathGeometry Figures="M 225,60 220,200 225,225 225,250  225,225  230,200 z">
                    </PathGeometry>
                </Path.Data>
                <!--<Path.Triggers>
                    <EventTrigger RoutedEvent="Loaded">
                        --><!--<BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation 
                                    Storyboard.TargetName="seconds"
                                    Storyboard.TargetProperty="RenderTransform.Angle"
                                    Duration="00:01:00" From="0" To="360" By="6" RepeatBehavior="Forever"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>--><!--
                    </EventTrigger>
                </Path.Triggers>-->

            </Path>
            <Path  Stroke="Black" StrokeThickness="2">
                <Path.RenderTransform>
                    <RotateTransform CenterX="225" CenterY="225" Angle="{Binding clockTimeData.minius_indicate,  UpdateSourceTrigger=PropertyChanged}">

                    </RotateTransform>
                </Path.RenderTransform>
                <Path.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF157AF3" Offset="0.3"/>
                        <GradientStop Color="White" Offset="1"/>
                    </LinearGradientBrush>
                </Path.Fill>
                <Path.Data>
                    <PathGeometry Figures="M 225,80 215,200 225,225 225,250  225,225  235,200 z">

                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path  Stroke="Black" StrokeThickness="2">
                <Path.RenderTransform>
                    <RotateTransform CenterX="225" CenterY="225" Angle="{Binding clockTimeData.hours_indicate,  UpdateSourceTrigger=PropertyChanged}">

                    </RotateTransform>
                </Path.RenderTransform>
                <Path.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFE233AA" Offset="0.3"/>
                        <GradientStop Color="White" Offset="1"/>
                    </LinearGradientBrush>
                </Path.Fill>
                <Path.Data>
                    <PathGeometry Figures="M 225,120 200,200 225,225 225,250  225,225  250,200 z">

                    </PathGeometry>
                </Path.Data>
            </Path>
View Code

 

4:建立时分秒对应的数据,并开notifypropertychange。

WPF学习————制作时钟
 public class ClockTimeData:NotifyPropertyChange
    {


        public ClockTimeData()
        {
           

        }



        double _second_indicate;
        public double second_indicate
        {
            set
            {
                _second_indicate = value;
                RaisePropertyChanged(nameof(second_indicate));
            }
            get
            {
                return _second_indicate;
            }

        }




        double _minius_indicate;
        public double minius_indicate
        {
            set
            {
                _minius_indicate = value;
                RaisePropertyChanged(nameof(minius_indicate));
            }
            get
            {
                return _minius_indicate;
            }

        }
        public double hours_indicate
        {
            set;
            get;
        }
    }
View Code

 

5:建立ViewModel.搭建数据和UI的关联逻辑。

WPF学习————制作时钟
public class ClolcTimeVM:ViewModelBase
    {

        public ClockTimeData clockTimeData
        {
            set;
            get;
        }

        Action Updateindicate;

        public ClolcTimeVM()
        {
            clockTimeData = new ClockTimeData();
            Updateindicate += Updateindicatefun;
            Updateindicate.BeginInvoke(
                ar=>Updateindicate.EndInvoke(ar)
                ,null);
        }

        private void Updateindicatefun()
        {
           while(true)
            {
                clockTimeData.second_indicate = DateTime.Now.Second*6.0;
                clockTimeData.minius_indicate = DateTime.Now.Minute * 6.0+ DateTime.Now.Second/60.0*6;
                clockTimeData.hours_indicate = DateTime.Now.Hour * 30.0+ DateTime.Now.Minute / 60.0*30;
                Thread.Sleep(200);
            }
        }
    }
View Code

 

6:将UI的datacontex设置到ViewModel.

 <Window.DataContext>
        <vm:ClolcTimeVM></vm:ClolcTimeVM>
    </Window.DataContext>

 

7:运行后,时针,分针,秒针将根据当前的计算机时间来布置和运动。

WPF学习————制作时钟
 clockTimeData.second_indicate = DateTime.Now.Second*6.0;
                clockTimeData.minius_indicate = DateTime.Now.Minute * 6.0+ DateTime.Now.Second/60.0*6;
                clockTimeData.hours_indicate = DateTime.Now.Hour * 30.0+ DateTime.Now.Minute / 60.0*30;
View Code

 

上一篇:[JLOI2016]方[题解]


下一篇:带权中位数liuseroj.picp.io