WPF draw clock with numbers

//xaml
<Window x:Class="WpfApp169.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp169"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="450">
    <Grid>        
        <Ellipse Width="350" Height="350" Stroke="Black" StrokeThickness="5" Fill="LightGray" />
         
        <Ellipse Width="10" Height="10" Fill="Black" HorizontalAlignment="Center" VerticalAlignment="Center" />
       
        <ItemsControl x:Name="ClockNumbers" 
                      HorizontalAlignment="Center" 
                      VerticalAlignment="Center">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas Width="330" Height="330" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}" FontSize="20" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
       
        <Line x:Name="HourHand" Stroke="Black" StrokeThickness="6" X1="0" Y1="0" X2="0" Y2="-80"
              HorizontalAlignment="Center" VerticalAlignment="Center">
            <Line.RenderTransform>
                <RotateTransform x:Name="HourHandRotate" CenterX="0" CenterY="0" />
            </Line.RenderTransform>
        </Line>
        
        <Line x:Name="MinuteHand" Stroke="Black" StrokeThickness="4" X1="0" Y1="0" X2="0" Y2="-120"
              HorizontalAlignment="Center" VerticalAlignment="Center">
            <Line.RenderTransform>
                <RotateTransform x:Name="MinuteHandRotate" CenterX="0" CenterY="0" />
            </Line.RenderTransform>
        </Line>
       
        <Line x:Name="SecondHand" Stroke="Red" StrokeThickness="2" X1="0" Y1="0" X2="0" Y2="-140"
              HorizontalAlignment="Center" VerticalAlignment="Center">
            <Line.RenderTransform>
                <RotateTransform x:Name="SecondHandRotate" CenterX="0" CenterY="0" />
            </Line.RenderTransform>
        </Line>
    </Grid>
</Window>



//cs
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Threading;

namespace WpfApp169
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private DispatcherTimer _timer;

        public MainWindow()
        {
            InitializeComponent();
            InitializeClock();
            DrawClockNumbers();
        }

        private void InitializeClock()
        {
            _timer = new DispatcherTimer();
            _timer.Interval = TimeSpan.FromSeconds(1);
            _timer.Tick += Timer_Tick;
            _timer.Start();
        }

        private void Timer_Tick(object sender, EventArgs e)
        {
            DateTime now = DateTime.Now;
            double secondAngle = now.Second * 6;  
            double minuteAngle = now.Minute * 6 + now.Second * 0.1; 
            double hourAngle = now.Hour * 30 + now.Minute * 0.5;
             
            SecondHandRotate.Angle = secondAngle;
            MinuteHandRotate.Angle = minuteAngle;
            HourHandRotate.Angle = hourAngle;
        }

        private void DrawClockNumbers()
        {            
            List<string> numbers = new List<string> { "12", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11" };

            
            double radius = 150; 
            double angleIncrement = 30;
            for (int i = 0; i < numbers.Count; i++)
            {
                double angle = angleIncrement * i;
                double radians = angle * Math.PI / 180;
               
                double x = radius * Math.Sin(radians);
                double y = -radius * Math.Cos(radians);

                var textBlock = new TextBlock
                {
                    Text = numbers[i],
                    FontSize = 20,
                    HorizontalAlignment = HorizontalAlignment.Left,
                    VerticalAlignment = VerticalAlignment.Top
                };

                Canvas.SetLeft(textBlock, x + 160);
                Canvas.SetTop(textBlock, y + 150);
                ClockNumbers.Items.Add(textBlock);
            }
        }
    }
}

 

 

posted @ 2025-03-09 20:00  FredGrit  阅读(20)  评论(0)    收藏  举报