Цифровые часы на WPF

Цифровые часы на графике WPF

Приложение WPF создает реалистичную симуляцию электронных цифровых часов. Для отображения цифр используется пользовательский графический элемент семисегментной цифры со страницы WPF создание графического элемента.

Приложение "Электронные часы" может менять цветовую гамму дисплея: в прикрепленном исходном коде 6 цветовых тем. Для добавления желаемых цветовых решений в программный код нужно добавить или изменить буквально несколько строчек.

Архивный файл, прикрепленный к статье, содержит исходник и скомпилированный файл приложения для быстрого тестирования. Настоящая статья подробно описывает работу методов в дополнение к комментариям программного кода.

Получение текущего времени и даты

Правильность и точность показаний времени и даты цифровыми часами равно точности часов устройства, на котором запущено приложение. Получение текущего времени происходит от структуры System.DateTime посредством свойства DateTime.Now.

Принцип преобразования объекта DateTime в цифры с соблюдением разрядности времени и даты очень прост и основан на свойствах класса System.String как коллекции символов. Объекты DateTime конвертируются в строки и посимвольно присваиваются соответствующим цифрам электронного дисплея.

// Получение текущего времени и даты.
// Вывод на табло.
void ShowDateTime()
{
    // Получение и вывод времени 
    string time = DateTime.Now.ToString("HHmmss");
    int h1 = int.Parse(time.ToString()[0].ToString());
    int h2 = int.Parse(time.ToString()[1].ToString());
    int m1 = int.Parse(time.ToString()[2].ToString());
    int m2 = int.Parse(time.ToString()[3].ToString());
    int s1 = int.Parse(time.ToString()[4].ToString());
    int s2 = int.Parse(time.ToString()[5].ToString());
    digit1.ValueDigit(h1);
    digit2.ValueDigit(h2);
    digit3.ValueDigit(m1);
    digit4.ValueDigit(m2);
    digit5.ValueDigit(s1);
    digit6.ValueDigit(s2);

    // Получение и вывод даты
    string date = DateTime.Now.ToString("ddMMyyyy");
    int d1 = int.Parse(date.ToString()[0].ToString());
    int d2 = int.Parse(date.ToString()[1].ToString());
    int M1 = int.Parse(date.ToString()[2].ToString());
    int M2 = int.Parse(date.ToString()[3].ToString());
    int y1 = int.Parse(date.ToString()[4].ToString());
    int y2 = int.Parse(date.ToString()[5].ToString());
    int y3 = int.Parse(date.ToString()[6].ToString());
    int y4 = int.Parse(date.ToString()[7].ToString());
    digitD1.ValueDigit(d1);
    digitD2.ValueDigit(d2);
    digitM1.ValueDigit(M1);
    digitM2.ValueDigit(M2);
    digitY1.ValueDigit(y1);
    digitY2.ValueDigit(y2);
    digitY3.ValueDigit(y3);
    digitY4.ValueDigit(y4);

    // Получение и вывод дня недели
    string day = DateTime.Now.ToString("ddd");
    labelddd.Content = day;
}

Цветовые темы часов

Поскольку настоящие электронные часы имеют дисплеи различных цветов, приложение "Цифровые часы" следует этой моде и может динамически изменять цветовую тему программного дисплея.

Для изменения цветов интерфейса часов служат два метода:
- ThemeGenerator(int count) – в зависимости от аргумента-счетчика возвращает соответствующий кортеж (упорядоченный набор элементов) из цветовых кистей SolidColorBrush для сегментов цифр и фона дисплея;
- ThemeClock(SolidColorBrush color, SolidColorBrush bg) – устанавливает соответственно цвет цифр и фона часов.

 // Счетчик тем
int countTheme = 0;
// Выбор цветовых тем кликом мыши.
private void BorderColors_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    (SolidColorBrush color, SolidColorBrush bg)  = ThemeGenerator(countTheme);

    ThemeClock(color, bg);

    countTheme++;
    if (countTheme == 6) countTheme = 0;
}

// Генератор тем,
// на выходе выдает цвет графических элементов и
// цвет фона дисплея часов.
public static (SolidColorBrush color, SolidColorBrush bg) ThemeGenerator(int count) => count switch
{
    0 => (Brushes.Red, Brushes.Black),
    1 => (new SolidColorBrush(Color.FromRgb(70, 255, 70)), Brushes.Black),
    2 => (new SolidColorBrush(Color.FromRgb(30, 150, 255)), Brushes.Black),
    3 => (Brushes.Yellow, Brushes.Black),
    4 => (Brushes.White, Brushes.Black),
    _ => (Brushes.Black, new SolidColorBrush(Color.FromRgb(118, 167, 148)))
};

// Назначение цветовых тем цифровых часов.
void ThemeClock(SolidColorBrush color, SolidColorBrush bg)
{
    // Фон табло часов.
    this.Background = bg;

    // Цифры табло
    digit1.ColorDigit = color;
    digit2.ColorDigit = color;
    digit3.ColorDigit = color;
    digit4.ColorDigit = color;
    digit5.ColorDigit = color;
    digit6.ColorDigit = color;
    digitD1.ColorDigit = color;
    digitD2.ColorDigit = color;
    digitM1.ColorDigit = color;
    digitM2.ColorDigit = color;
    digitY1.ColorDigit = color;
    digitY2.ColorDigit = color;
    digitY3.ColorDigit = color;
    digitY4.ColorDigit = color;

    // Разделительные точки (эллипсы)
    dotTime1.Fill = color;
    dotTime2.Fill = color;
    dotDate1.Fill = color;
    dotDate2.Fill = color;

    // Разделительные линии.
    lineSeparator.Stroke = color;
    lineControl.Stroke = color;

    // Кнопка изменения цвета
    borderColors.BorderBrush = color;
    ellipseColors1.Stroke = color;
    ellipseColors1.Fill = bg;
    ellipseColors2.Stroke = color;
    ellipseColors2.Fill = color;

    // Кнопка закрытия
    borderClose.BorderBrush = color;
    lineClose1.Stroke = color;
    lineClose2.Stroke = color;

    // Цвет текстовых меток.
    labelddd.Foreground = color;
    labelIP.Foreground = color;

    // Смайлик (Path)
    smile.Stroke = color;
}

Декоратор масштабирования Viewbox

Пользовательский элемент "Цифра " не имеет свойств автоматически подстраиваться под размер родительского контейнера. Но было бы замечательно если цифры часов самостоятельно масштабировались соответственно размерам окна приложения.

Для таких целей платформа WPF предлагает легкое решение – декоратор Viewbox. Класс Viewbox умеет автоматически растягивать или сжимать дочернее содержимое. Хотя Viewbox принимает единственный дочерний элемент, но можно посредством одного контейнера со множеством элементов обойти это ограничение.

Так и сделано в исходном коде описываемого приложения электронных часов. Размер цифр первоначально в XAML настраивается максимально рационально, затем, после запуска приложения, Viewbox пропорционально масштабирует дочерний контейнер. В этом контейнере и содержится графика с пользовательскими и стандартными элементами WPF.

<Grid  x:Name="maingrid" Margin="20">
    <Viewbox>
        <!-- Контейнер графики электронных часов 
                                которая автоматически масштабируется -->
        <Grid>
            <Grid HorizontalAlignment="Center" VerticalAlignment="Top">
                <!-- Цифры часов, минут и секунд -->
                <mycode:Digit x:Name="digit1"
                                  HorizontalAlignment="Left" 
                                  VerticalAlignment="Top" Width="110"  />
                <mycode:Digit x:Name="digit2" Margin="120,0,0,0" 
                                HorizontalAlignment="Left" 
                                VerticalAlignment="Top" Width="110"  />
                                
                ...
                
            </Grid>

            <Grid Margin="0,220,0,0" HorizontalAlignment="Center" >
                <!-- Контейнер даты и управления -->
                <mycode:Digit Width="40" x:Name="digitD1" 
                Margin="0,10,0,0" 
                HorizontalAlignment="Left" 
                VerticalAlignment="Top"  />
                <mycode:Digit Width="40" x:Name="digitD2" 
                Margin="45,10,0,0" 
                HorizontalAlignment="Left" 
                VerticalAlignment="Top"  />
                
                ...
                
            </Grid>
        </Grid>
    </Viewbox>
</Grid>

Исходник приложения “Цифровые часы”

Исходный код приложения написан на языке C# .NET6 в MS Visual Studio 2022. Архивный файл содержит исходный код и скомпилированное приложение WPF для быстрого тестирования.