Create a digital clock using only xaml code in wpfHow to solve the problem of conflicts between animation and property binding in xamlWhat is the correct way to create a single-instance WPF application?Setting WPF image source in codeHidden features of WPF and XAML?How do I get a TextBox to only accept numeric input in WPF?WPF Application that only has a tray iconCreate a menu Bar in WPF?Use StringFormat to add a string to a WPF XAML bindingwpf xaml binding to object created in code behindWPF Optimize XAML codeSetting DataContext in XAML in WPF
Help with understanding nuances of extremely popular Kyoto-ben (?) tweet
Do native speakers use ZVE or CPU?
How do Windows version numbers work?
Is `curl something | sudo bash -` a reasonably safe installation method?
Optimising Table wrapping over a Select
Should you avoid redundant information after dialogue?
Dropping outliers based on "2.5 times the RMSE"
Why is dry soil hydrophobic? Bad gardener paradox
Why does Hellboy file down his horns?
How to convert 1k to 1000 and 1m to 1000000 in Excel
Extract an attribute value from XML
What would be the ideal melee weapon made of "Phase Metal"?
Are randomly-generated passwords starting with "a" less secure?
Conciousness in Buddhism and Advaita Vedanta
Why did the Japanese attack the Aleutians at the same time as Midway?
Am I testing diodes properly?
Why would guns not work in the dungeon?
Can I call 112 to check a police officer's identity in the Czech Republic?
Is Arc Length always irrational between two rational points?
Can I play a first turn Simic Growth Chamber to have 3 mana available in the second turn?
Password maker in C#
Are there any double stars that I can actually see orbit each other?
Robbers: The Hidden OEIS Substring
Did any of the founding fathers anticipate Lysander Spooner's criticism of the constitution?
Create a digital clock using only xaml code in wpf
How to solve the problem of conflicts between animation and property binding in xamlWhat is the correct way to create a single-instance WPF application?Setting WPF image source in codeHidden features of WPF and XAML?How do I get a TextBox to only accept numeric input in WPF?WPF Application that only has a tray iconCreate a menu Bar in WPF?Use StringFormat to add a string to a WPF XAML bindingwpf xaml binding to object created in code behindWPF Optimize XAML codeSetting DataContext in XAML in WPF
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
0
I wonder if it is possible to create a digital clock in xaml using animation (without background code tags)
The analog clock can be realized by converting the current time to the angle by matrix conversion, but the digital clock can't be operated like this. I tried a lot of methods, but it didn't work. Does anyone know if there is any good way to implement it?
Analog clock implementation
<Window>
<Window.Resources>
<FrameworkElement x:Key="time" Tag=x:Static s:DateTime.Now/>
<TransformGroup x:Key="transformHour">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Hour"
Y="Binding Source=StaticResource time,Path=Tag.Minute"/>
<MatrixTransform Matrix="30 0 0.5 0 0 0"/>
</TransformGroup>
<TransformGroup x:Key="transformMinute">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Minute"
Y="Binding Source=StaticResource time,Path=Tag.Second"/>
<MatrixTransform Matrix="6 0 0.1 0 0 0"/>
</TransformGroup>
<TransformGroup x:Key="transformSecond">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Second"/>
<MatrixTransform Matrix="6 0 0 0 0 0"/>
</TransformGroup>
<Style TargetType="x:Type Path">
<Setter Property="Stroke"
Value="DynamicResource x:Static SystemColors.WindowTextBrushKey"/>
<Setter Property="StrokeThickness" Value="3"/>
<Setter Property="StrokeDashCap" Value="Triangle"/>
</Style>
</Window.Resources>
<Viewbox>
<Canvas Width="200" Height="200">
<Canvas.RenderTransform>
<TranslateTransform X="100" Y="100"/>
</Canvas.RenderTransform>
<Path Data="M 0 -90 A 90 90 0 1 1 -0.01 -90"
StrokeDashArray="0 3.14157" />
<Path Data="M 0 -90 A 90 90 0 1 1 -0.01 -90"
StrokeDashArray="0 7.854"
StrokeThickness="6"/>
<Border Background="LightBlue" Width="10" Height="80" RenderTransformOrigin="0.5 0">
<Border.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="bor_Second" Angle="Binding Source=StaticResource transformSecond,Path=Value.OffsetX"/>
<RotateTransform Angle="180"/>
</TransformGroup>
</Border.RenderTransform>
</Border>
<Border Background="LightGreen" Width="10" Height="60" RenderTransformOrigin="0.5 0">
<Border.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="bor_Minute" Angle="Binding Source=StaticResource transformMinute,Path=Value.OffsetX"/>
<RotateTransform Angle="180"/>
</TransformGroup>
</Border.RenderTransform>
</Border>
<Border Background="LightGray" Width="10" Height="40" RenderTransformOrigin="0.5 0">
<Border.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="bor_Hour" Angle="Binding Source=StaticResource transformHour,Path=Value.OffsetX"/>
<RotateTransform Angle="180"/>
</TransformGroup>
</Border.RenderTransform>
</Border>
</Canvas>
</Viewbox>
<Window.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="bor_Hour"
Storyboard.TargetProperty="Angle"
IsAdditive="True"
Duration="12:0:0"
From="0" To="360"
RepeatBehavior="Forever"/>
<DoubleAnimation Storyboard.TargetName="bor_Minute"
Storyboard.TargetProperty="Angle"
IsAdditive="True"
Duration="1:0:0"
From="0" To="360"
RepeatBehavior="Forever"/>
<DoubleAnimation Storyboard.TargetName="bor_Second"
Storyboard.TargetProperty="Angle"
IsAdditive="True"
Duration="0:1:0"
From="0" To="360"
RepeatBehavior="Forever"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
</Window>
Digital clock (there is an error), I feel that it is more troublesome to use this idea. Does anyone know if there is any good way to implement it?
<Window>
<Window.Resources>
<!--current time-->
<FrameworkElement x:Key="time" Tag="x:Static s:DateTime.Now"/>
<!--Current minutes remaining seconds-->
<TransformGroup x:Key="transformSecond">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Second" Y="60"/>
<MatrixTransform Matrix="-1 0 1 0 0 0"/>
</TransformGroup>
<!--Remaining seconds interval-->
<FrameworkElement x:Key="timeSpanSecond"
Tag="Binding Source=StaticResource transformSecond,Path=Value.OffsetX,StringFormat=0:F0"/>
<!--Current hours remaining minutes-->
<TransformGroup x:Key="transformMinute">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Minute" Y="60"/>
<MatrixTransform Matrix="-1 1 1 0 0 1"/>
</TransformGroup>
<!--Remaining minute interval-->
<FrameworkElement x:Key="timeSpanMinute"
Tag="Binding Source=StaticResource transformMinute,Path=Value.OffsetX,StringFormat=0:F0"/>
<!--Next minute-->
<FrameworkElement x:Key="minuteNext"
Tag="Binding Source=StaticResource transformMinute,Path=Value.OffsetY"/>
<!--Hours remaining on the day-->
<TransformGroup x:Key="transformHour">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Hour" Y="24"/>
<MatrixTransform Matrix="-1 1 1 0 0 1"/>
</TransformGroup>
<!--Remaining hours interval-->
<FrameworkElement x:Key="timeSpanHour"
Tag="Binding Source=StaticResource transformHour,Path=Value.OffsetX,StringFormat=0:F0"/>
<!--Next hour-->
<FrameworkElement x:Key="hourNext"
Tag="Binding Source=StaticResource transformHour,Path=Value.OffsetY"/>
</Window.Resources>
<Grid>
<!--Width:Current seconds-->
<!--Text:Current remaining seconds(TimeSpan)-->
<TextBlock x:Name="tbk_Second" Visibility="Hidden"
Width="Binding Source=StaticResource time,Path=Tag.Second"
Text="Binding Source=StaticResource timeSpanSecond,StringFormat=0:0:0,Path=Tag"/>
<TextBlock x:Name="tbk_Minute" Visibility="Hidden"
Width="Binding Source=StaticResource time,Path=Tag.Minute"
Text="Binding Source=StaticResource timeSpanMinute,StringFormat=0:0:0,Path=Tag">
</TextBlock>
<TextBlock x:Name="tbk_Hour" Visibility="Hidden"
Width="Binding Source=StaticResource time,Path=Tag.Hour"
Text="Binding Source=StaticResource timeSpanHour,StringFormat=0:0:0,Path=Tag"/>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">
<Run Text="Binding ElementName=tbk_Hour,Path=Width,StringFormat=0:F0"/>
<Run Text=":"/>
<Run Text="Binding ElementName=tbk_Minute,Path=Width,StringFormat=0:F0"/>
<Run Text=":"/>
<Run Text="Binding ElementName=tbk_Second,Path=Width,StringFormat=0:F0"/>
</TextBlock>
</Grid>
<Window.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation Storyboard.TargetName="tbk_Hour"
Storyboard.TargetProperty="Width"
BeginTime="Binding ElementName=tbk_Minute,Path=Text"
Duration="Binding ElementName=tbk_Hour,Path=Text"
From="Binding Source=StaticResource hourNext,Path=Tag"
To="23"/>
<DoubleAnimation Storyboard.TargetName="tbk_Hour"
Storyboard.TargetProperty="Width"
BeginTime="Binding ElementName=tbk_Hour,Path=Text"
Duration="24:0:0"
From="0"
To="23"
RepeatBehavior="Forever"/>
<DoubleAnimation Storyboard.TargetName="tbk_Minute"
Storyboard.TargetProperty="Width"
BeginTime="Binding ElementName=tbk_Second,Path=Text"
Duration="Binding ElementName=tbk_Minute,Path=Text"
From="Binding Source=StaticResource minuteNext,Path=Tag"
To="59"/>
<DoubleAnimation Storyboard.TargetName="tbk_Minute"
Storyboard.TargetProperty="Width"
BeginTime="Binding ElementName=tbk_Minute,Path=Text"
Duration="1:0:0"
From="0"
To="59"
RepeatBehavior="Forever"/>
<DoubleAnimation
Storyboard.TargetName="tbk_Second"
Storyboard.TargetProperty="Width"
Duration="Binding ElementName=tbk_Second,Path=Text"
From="Binding Source=StaticResource time,Path=Tag.Second"
To="59"
/>
<DoubleAnimation Storyboard.TargetName="tbk_Second"
Storyboard.TargetProperty="Width"
BeginTime="Binding ElementName=tbk_Second,Path=Text"
Duration="0:1:0"
From="0"
To="59"
RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
</Window>
wpf xaml
asked Mar 26 at 5:24
Blue Zhang Blue Zhang
72 bronze badges
|
show 1 more comment
0
I wonder if it is possible to create a digital clock in xaml using animation (without background code tags)
The analog clock can be realized by converting the current time to the angle by matrix conversion, but the digital clock can't be operated like this. I tried a lot of methods, but it didn't work. Does anyone know if there is any good way to implement it?
Analog clock implementation
<Window>
<Window.Resources>
<FrameworkElement x:Key="time" Tag=x:Static s:DateTime.Now/>
<TransformGroup x:Key="transformHour">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Hour"
Y="Binding Source=StaticResource time,Path=Tag.Minute"/>
<MatrixTransform Matrix="30 0 0.5 0 0 0"/>
</TransformGroup>
<TransformGroup x:Key="transformMinute">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Minute"
Y="Binding Source=StaticResource time,Path=Tag.Second"/>
<MatrixTransform Matrix="6 0 0.1 0 0 0"/>
</TransformGroup>
<TransformGroup x:Key="transformSecond">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Second"/>
<MatrixTransform Matrix="6 0 0 0 0 0"/>
</TransformGroup>
<Style TargetType="x:Type Path">
<Setter Property="Stroke"
Value="DynamicResource x:Static SystemColors.WindowTextBrushKey"/>
<Setter Property="StrokeThickness" Value="3"/>
<Setter Property="StrokeDashCap" Value="Triangle"/>
</Style>
</Window.Resources>
<Viewbox>
<Canvas Width="200" Height="200">
<Canvas.RenderTransform>
<TranslateTransform X="100" Y="100"/>
</Canvas.RenderTransform>
<Path Data="M 0 -90 A 90 90 0 1 1 -0.01 -90"
StrokeDashArray="0 3.14157" />
<Path Data="M 0 -90 A 90 90 0 1 1 -0.01 -90"
StrokeDashArray="0 7.854"
StrokeThickness="6"/>
<Border Background="LightBlue" Width="10" Height="80" RenderTransformOrigin="0.5 0">
<Border.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="bor_Second" Angle="Binding Source=StaticResource transformSecond,Path=Value.OffsetX"/>
<RotateTransform Angle="180"/>
</TransformGroup>
</Border.RenderTransform>
</Border>
<Border Background="LightGreen" Width="10" Height="60" RenderTransformOrigin="0.5 0">
<Border.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="bor_Minute" Angle="Binding Source=StaticResource transformMinute,Path=Value.OffsetX"/>
<RotateTransform Angle="180"/>
</TransformGroup>
</Border.RenderTransform>
</Border>
<Border Background="LightGray" Width="10" Height="40" RenderTransformOrigin="0.5 0">
<Border.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="bor_Hour" Angle="Binding Source=StaticResource transformHour,Path=Value.OffsetX"/>
<RotateTransform Angle="180"/>
</TransformGroup>
</Border.RenderTransform>
</Border>
</Canvas>
</Viewbox>
<Window.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="bor_Hour"
Storyboard.TargetProperty="Angle"
IsAdditive="True"
Duration="12:0:0"
From="0" To="360"
RepeatBehavior="Forever"/>
<DoubleAnimation Storyboard.TargetName="bor_Minute"
Storyboard.TargetProperty="Angle"
IsAdditive="True"
Duration="1:0:0"
From="0" To="360"
RepeatBehavior="Forever"/>
<DoubleAnimation Storyboard.TargetName="bor_Second"
Storyboard.TargetProperty="Angle"
IsAdditive="True"
Duration="0:1:0"
From="0" To="360"
RepeatBehavior="Forever"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
</Window>
Digital clock (there is an error), I feel that it is more troublesome to use this idea. Does anyone know if there is any good way to implement it?
<Window>
<Window.Resources>
<!--current time-->
<FrameworkElement x:Key="time" Tag="x:Static s:DateTime.Now"/>
<!--Current minutes remaining seconds-->
<TransformGroup x:Key="transformSecond">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Second" Y="60"/>
<MatrixTransform Matrix="-1 0 1 0 0 0"/>
</TransformGroup>
<!--Remaining seconds interval-->
<FrameworkElement x:Key="timeSpanSecond"
Tag="Binding Source=StaticResource transformSecond,Path=Value.OffsetX,StringFormat=0:F0"/>
<!--Current hours remaining minutes-->
<TransformGroup x:Key="transformMinute">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Minute" Y="60"/>
<MatrixTransform Matrix="-1 1 1 0 0 1"/>
</TransformGroup>
<!--Remaining minute interval-->
<FrameworkElement x:Key="timeSpanMinute"
Tag="Binding Source=StaticResource transformMinute,Path=Value.OffsetX,StringFormat=0:F0"/>
<!--Next minute-->
<FrameworkElement x:Key="minuteNext"
Tag="Binding Source=StaticResource transformMinute,Path=Value.OffsetY"/>
<!--Hours remaining on the day-->
<TransformGroup x:Key="transformHour">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Hour" Y="24"/>
<MatrixTransform Matrix="-1 1 1 0 0 1"/>
</TransformGroup>
<!--Remaining hours interval-->
<FrameworkElement x:Key="timeSpanHour"
Tag="Binding Source=StaticResource transformHour,Path=Value.OffsetX,StringFormat=0:F0"/>
<!--Next hour-->
<FrameworkElement x:Key="hourNext"
Tag="Binding Source=StaticResource transformHour,Path=Value.OffsetY"/>
</Window.Resources>
<Grid>
<!--Width:Current seconds-->
<!--Text:Current remaining seconds(TimeSpan)-->
<TextBlock x:Name="tbk_Second" Visibility="Hidden"
Width="Binding Source=StaticResource time,Path=Tag.Second"
Text="Binding Source=StaticResource timeSpanSecond,StringFormat=0:0:0,Path=Tag"/>
<TextBlock x:Name="tbk_Minute" Visibility="Hidden"
Width="Binding Source=StaticResource time,Path=Tag.Minute"
Text="Binding Source=StaticResource timeSpanMinute,StringFormat=0:0:0,Path=Tag">
</TextBlock>
<TextBlock x:Name="tbk_Hour" Visibility="Hidden"
Width="Binding Source=StaticResource time,Path=Tag.Hour"
Text="Binding Source=StaticResource timeSpanHour,StringFormat=0:0:0,Path=Tag"/>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">
<Run Text="Binding ElementName=tbk_Hour,Path=Width,StringFormat=0:F0"/>
<Run Text=":"/>
<Run Text="Binding ElementName=tbk_Minute,Path=Width,StringFormat=0:F0"/>
<Run Text=":"/>
<Run Text="Binding ElementName=tbk_Second,Path=Width,StringFormat=0:F0"/>
</TextBlock>
</Grid>
<Window.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation Storyboard.TargetName="tbk_Hour"
Storyboard.TargetProperty="Width"
BeginTime="Binding ElementName=tbk_Minute,Path=Text"
Duration="Binding ElementName=tbk_Hour,Path=Text"
From="Binding Source=StaticResource hourNext,Path=Tag"
To="23"/>
<DoubleAnimation Storyboard.TargetName="tbk_Hour"
Storyboard.TargetProperty="Width"
BeginTime="Binding ElementName=tbk_Hour,Path=Text"
Duration="24:0:0"
From="0"
To="23"
RepeatBehavior="Forever"/>
<DoubleAnimation Storyboard.TargetName="tbk_Minute"
Storyboard.TargetProperty="Width"
BeginTime="Binding ElementName=tbk_Second,Path=Text"
Duration="Binding ElementName=tbk_Minute,Path=Text"
From="Binding Source=StaticResource minuteNext,Path=Tag"
To="59"/>
<DoubleAnimation Storyboard.TargetName="tbk_Minute"
Storyboard.TargetProperty="Width"
BeginTime="Binding ElementName=tbk_Minute,Path=Text"
Duration="1:0:0"
From="0"
To="59"
RepeatBehavior="Forever"/>
<DoubleAnimation
Storyboard.TargetName="tbk_Second"
Storyboard.TargetProperty="Width"
Duration="Binding ElementName=tbk_Second,Path=Text"
From="Binding Source=StaticResource time,Path=Tag.Second"
To="59"
/>
<DoubleAnimation Storyboard.TargetName="tbk_Second"
Storyboard.TargetProperty="Width"
BeginTime="Binding ElementName=tbk_Second,Path=Text"
Duration="0:1:0"
From="0"
To="59"
RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
</Window>
wpf xaml
asked Mar 26 at 5:24
Blue Zhang Blue Zhang
72 bronze badges
What is "the digital clock"? Please explain how it is supposed to look like and to behave.
– Clemens
Mar 26 at 6:30
I guess the Comment Tag<!--Remaining minute interval->causes the Problem, because it is not properly closed. It is missing a second - at the end, write-->instead of ->`.
– LittleBit
Mar 26 at 6:53
@Clemens a clock in which hours, minutes, and sometimes seconds are represented by numbers.It looks like 00:00:00-23:59:59
– Blue Zhang
Mar 26 at 7:13
@LittleBit Yes, I have corrected this error.
– Blue Zhang
Mar 26 at 7:14
@BlueZhang the easiest way would be to use a textblock bound to a dependency property filled by DateTime.now() and use string format to get the timeformat you want to have this would also be already region specific also I recommend adding this font to you project: keshikan.net/fonts-e.html
– Denis Schaf
Mar 26 at 7:29
|
show 1 more comment
0
0
0
I wonder if it is possible to create a digital clock in xaml using animation (without background code tags)
The analog clock can be realized by converting the current time to the angle by matrix conversion, but the digital clock can't be operated like this. I tried a lot of methods, but it didn't work. Does anyone know if there is any good way to implement it?
Analog clock implementation
<Window>
<Window.Resources>
<FrameworkElement x:Key="time" Tag=x:Static s:DateTime.Now/>
<TransformGroup x:Key="transformHour">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Hour"
Y="Binding Source=StaticResource time,Path=Tag.Minute"/>
<MatrixTransform Matrix="30 0 0.5 0 0 0"/>
</TransformGroup>
<TransformGroup x:Key="transformMinute">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Minute"
Y="Binding Source=StaticResource time,Path=Tag.Second"/>
<MatrixTransform Matrix="6 0 0.1 0 0 0"/>
</TransformGroup>
<TransformGroup x:Key="transformSecond">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Second"/>
<MatrixTransform Matrix="6 0 0 0 0 0"/>
</TransformGroup>
<Style TargetType="x:Type Path">
<Setter Property="Stroke"
Value="DynamicResource x:Static SystemColors.WindowTextBrushKey"/>
<Setter Property="StrokeThickness" Value="3"/>
<Setter Property="StrokeDashCap" Value="Triangle"/>
</Style>
</Window.Resources>
<Viewbox>
<Canvas Width="200" Height="200">
<Canvas.RenderTransform>
<TranslateTransform X="100" Y="100"/>
</Canvas.RenderTransform>
<Path Data="M 0 -90 A 90 90 0 1 1 -0.01 -90"
StrokeDashArray="0 3.14157" />
<Path Data="M 0 -90 A 90 90 0 1 1 -0.01 -90"
StrokeDashArray="0 7.854"
StrokeThickness="6"/>
<Border Background="LightBlue" Width="10" Height="80" RenderTransformOrigin="0.5 0">
<Border.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="bor_Second" Angle="Binding Source=StaticResource transformSecond,Path=Value.OffsetX"/>
<RotateTransform Angle="180"/>
</TransformGroup>
</Border.RenderTransform>
</Border>
<Border Background="LightGreen" Width="10" Height="60" RenderTransformOrigin="0.5 0">
<Border.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="bor_Minute" Angle="Binding Source=StaticResource transformMinute,Path=Value.OffsetX"/>
<RotateTransform Angle="180"/>
</TransformGroup>
</Border.RenderTransform>
</Border>
<Border Background="LightGray" Width="10" Height="40" RenderTransformOrigin="0.5 0">
<Border.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="bor_Hour" Angle="Binding Source=StaticResource transformHour,Path=Value.OffsetX"/>
<RotateTransform Angle="180"/>
</TransformGroup>
</Border.RenderTransform>
</Border>
</Canvas>
</Viewbox>
<Window.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="bor_Hour"
Storyboard.TargetProperty="Angle"
IsAdditive="True"
Duration="12:0:0"
From="0" To="360"
RepeatBehavior="Forever"/>
<DoubleAnimation Storyboard.TargetName="bor_Minute"
Storyboard.TargetProperty="Angle"
IsAdditive="True"
Duration="1:0:0"
From="0" To="360"
RepeatBehavior="Forever"/>
<DoubleAnimation Storyboard.TargetName="bor_Second"
Storyboard.TargetProperty="Angle"
IsAdditive="True"
Duration="0:1:0"
From="0" To="360"
RepeatBehavior="Forever"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
</Window>
Digital clock (there is an error), I feel that it is more troublesome to use this idea. Does anyone know if there is any good way to implement it?
<Window>
<Window.Resources>
<!--current time-->
<FrameworkElement x:Key="time" Tag="x:Static s:DateTime.Now"/>
<!--Current minutes remaining seconds-->
<TransformGroup x:Key="transformSecond">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Second" Y="60"/>
<MatrixTransform Matrix="-1 0 1 0 0 0"/>
</TransformGroup>
<!--Remaining seconds interval-->
<FrameworkElement x:Key="timeSpanSecond"
Tag="Binding Source=StaticResource transformSecond,Path=Value.OffsetX,StringFormat=0:F0"/>
<!--Current hours remaining minutes-->
<TransformGroup x:Key="transformMinute">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Minute" Y="60"/>
<MatrixTransform Matrix="-1 1 1 0 0 1"/>
</TransformGroup>
<!--Remaining minute interval-->
<FrameworkElement x:Key="timeSpanMinute"
Tag="Binding Source=StaticResource transformMinute,Path=Value.OffsetX,StringFormat=0:F0"/>
<!--Next minute-->
<FrameworkElement x:Key="minuteNext"
Tag="Binding Source=StaticResource transformMinute,Path=Value.OffsetY"/>
<!--Hours remaining on the day-->
<TransformGroup x:Key="transformHour">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Hour" Y="24"/>
<MatrixTransform Matrix="-1 1 1 0 0 1"/>
</TransformGroup>
<!--Remaining hours interval-->
<FrameworkElement x:Key="timeSpanHour"
Tag="Binding Source=StaticResource transformHour,Path=Value.OffsetX,StringFormat=0:F0"/>
<!--Next hour-->
<FrameworkElement x:Key="hourNext"
Tag="Binding Source=StaticResource transformHour,Path=Value.OffsetY"/>
</Window.Resources>
<Grid>
<!--Width:Current seconds-->
<!--Text:Current remaining seconds(TimeSpan)-->
<TextBlock x:Name="tbk_Second" Visibility="Hidden"
Width="Binding Source=StaticResource time,Path=Tag.Second"
Text="Binding Source=StaticResource timeSpanSecond,StringFormat=0:0:0,Path=Tag"/>
<TextBlock x:Name="tbk_Minute" Visibility="Hidden"
Width="Binding Source=StaticResource time,Path=Tag.Minute"
Text="Binding Source=StaticResource timeSpanMinute,StringFormat=0:0:0,Path=Tag">
</TextBlock>
<TextBlock x:Name="tbk_Hour" Visibility="Hidden"
Width="Binding Source=StaticResource time,Path=Tag.Hour"
Text="Binding Source=StaticResource timeSpanHour,StringFormat=0:0:0,Path=Tag"/>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">
<Run Text="Binding ElementName=tbk_Hour,Path=Width,StringFormat=0:F0"/>
<Run Text=":"/>
<Run Text="Binding ElementName=tbk_Minute,Path=Width,StringFormat=0:F0"/>
<Run Text=":"/>
<Run Text="Binding ElementName=tbk_Second,Path=Width,StringFormat=0:F0"/>
</TextBlock>
</Grid>
<Window.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation Storyboard.TargetName="tbk_Hour"
Storyboard.TargetProperty="Width"
BeginTime="Binding ElementName=tbk_Minute,Path=Text"
Duration="Binding ElementName=tbk_Hour,Path=Text"
From="Binding Source=StaticResource hourNext,Path=Tag"
To="23"/>
<DoubleAnimation Storyboard.TargetName="tbk_Hour"
Storyboard.TargetProperty="Width"
BeginTime="Binding ElementName=tbk_Hour,Path=Text"
Duration="24:0:0"
From="0"
To="23"
RepeatBehavior="Forever"/>
<DoubleAnimation Storyboard.TargetName="tbk_Minute"
Storyboard.TargetProperty="Width"
BeginTime="Binding ElementName=tbk_Second,Path=Text"
Duration="Binding ElementName=tbk_Minute,Path=Text"
From="Binding Source=StaticResource minuteNext,Path=Tag"
To="59"/>
<DoubleAnimation Storyboard.TargetName="tbk_Minute"
Storyboard.TargetProperty="Width"
BeginTime="Binding ElementName=tbk_Minute,Path=Text"
Duration="1:0:0"
From="0"
To="59"
RepeatBehavior="Forever"/>
<DoubleAnimation
Storyboard.TargetName="tbk_Second"
Storyboard.TargetProperty="Width"
Duration="Binding ElementName=tbk_Second,Path=Text"
From="Binding Source=StaticResource time,Path=Tag.Second"
To="59"
/>
<DoubleAnimation Storyboard.TargetName="tbk_Second"
Storyboard.TargetProperty="Width"
BeginTime="Binding ElementName=tbk_Second,Path=Text"
Duration="0:1:0"
From="0"
To="59"
RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
</Window>
wpf xaml
asked Mar 26 at 5:24
Blue Zhang Blue Zhang
72 bronze badges
I wonder if it is possible to create a digital clock in xaml using animation (without background code tags)
The analog clock can be realized by converting the current time to the angle by matrix conversion, but the digital clock can't be operated like this. I tried a lot of methods, but it didn't work. Does anyone know if there is any good way to implement it?
Analog clock implementation
<Window>
<Window.Resources>
<FrameworkElement x:Key="time" Tag=x:Static s:DateTime.Now/>
<TransformGroup x:Key="transformHour">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Hour"
Y="Binding Source=StaticResource time,Path=Tag.Minute"/>
<MatrixTransform Matrix="30 0 0.5 0 0 0"/>
</TransformGroup>
<TransformGroup x:Key="transformMinute">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Minute"
Y="Binding Source=StaticResource time,Path=Tag.Second"/>
<MatrixTransform Matrix="6 0 0.1 0 0 0"/>
</TransformGroup>
<TransformGroup x:Key="transformSecond">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Second"/>
<MatrixTransform Matrix="6 0 0 0 0 0"/>
</TransformGroup>
<Style TargetType="x:Type Path">
<Setter Property="Stroke"
Value="DynamicResource x:Static SystemColors.WindowTextBrushKey"/>
<Setter Property="StrokeThickness" Value="3"/>
<Setter Property="StrokeDashCap" Value="Triangle"/>
</Style>
</Window.Resources>
<Viewbox>
<Canvas Width="200" Height="200">
<Canvas.RenderTransform>
<TranslateTransform X="100" Y="100"/>
</Canvas.RenderTransform>
<Path Data="M 0 -90 A 90 90 0 1 1 -0.01 -90"
StrokeDashArray="0 3.14157" />
<Path Data="M 0 -90 A 90 90 0 1 1 -0.01 -90"
StrokeDashArray="0 7.854"
StrokeThickness="6"/>
<Border Background="LightBlue" Width="10" Height="80" RenderTransformOrigin="0.5 0">
<Border.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="bor_Second" Angle="Binding Source=StaticResource transformSecond,Path=Value.OffsetX"/>
<RotateTransform Angle="180"/>
</TransformGroup>
</Border.RenderTransform>
</Border>
<Border Background="LightGreen" Width="10" Height="60" RenderTransformOrigin="0.5 0">
<Border.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="bor_Minute" Angle="Binding Source=StaticResource transformMinute,Path=Value.OffsetX"/>
<RotateTransform Angle="180"/>
</TransformGroup>
</Border.RenderTransform>
</Border>
<Border Background="LightGray" Width="10" Height="40" RenderTransformOrigin="0.5 0">
<Border.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="bor_Hour" Angle="Binding Source=StaticResource transformHour,Path=Value.OffsetX"/>
<RotateTransform Angle="180"/>
</TransformGroup>
</Border.RenderTransform>
</Border>
</Canvas>
</Viewbox>
<Window.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="bor_Hour"
Storyboard.TargetProperty="Angle"
IsAdditive="True"
Duration="12:0:0"
From="0" To="360"
RepeatBehavior="Forever"/>
<DoubleAnimation Storyboard.TargetName="bor_Minute"
Storyboard.TargetProperty="Angle"
IsAdditive="True"
Duration="1:0:0"
From="0" To="360"
RepeatBehavior="Forever"/>
<DoubleAnimation Storyboard.TargetName="bor_Second"
Storyboard.TargetProperty="Angle"
IsAdditive="True"
Duration="0:1:0"
From="0" To="360"
RepeatBehavior="Forever"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
</Window>
Digital clock (there is an error), I feel that it is more troublesome to use this idea. Does anyone know if there is any good way to implement it?
<Window>
<Window.Resources>
<!--current time-->
<FrameworkElement x:Key="time" Tag="x:Static s:DateTime.Now"/>
<!--Current minutes remaining seconds-->
<TransformGroup x:Key="transformSecond">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Second" Y="60"/>
<MatrixTransform Matrix="-1 0 1 0 0 0"/>
</TransformGroup>
<!--Remaining seconds interval-->
<FrameworkElement x:Key="timeSpanSecond"
Tag="Binding Source=StaticResource transformSecond,Path=Value.OffsetX,StringFormat=0:F0"/>
<!--Current hours remaining minutes-->
<TransformGroup x:Key="transformMinute">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Minute" Y="60"/>
<MatrixTransform Matrix="-1 1 1 0 0 1"/>
</TransformGroup>
<!--Remaining minute interval-->
<FrameworkElement x:Key="timeSpanMinute"
Tag="Binding Source=StaticResource transformMinute,Path=Value.OffsetX,StringFormat=0:F0"/>
<!--Next minute-->
<FrameworkElement x:Key="minuteNext"
Tag="Binding Source=StaticResource transformMinute,Path=Value.OffsetY"/>
<!--Hours remaining on the day-->
<TransformGroup x:Key="transformHour">
<TranslateTransform X="Binding Source=StaticResource time,Path=Tag.Hour" Y="24"/>
<MatrixTransform Matrix="-1 1 1 0 0 1"/>
</TransformGroup>
<!--Remaining hours interval-->
<FrameworkElement x:Key="timeSpanHour"
Tag="Binding Source=StaticResource transformHour,Path=Value.OffsetX,StringFormat=0:F0"/>
<!--Next hour-->
<FrameworkElement x:Key="hourNext"
Tag="Binding Source=StaticResource transformHour,Path=Value.OffsetY"/>
</Window.Resources>
<Grid>
<!--Width:Current seconds-->
<!--Text:Current remaining seconds(TimeSpan)-->
<TextBlock x:Name="tbk_Second" Visibility="Hidden"
Width="Binding Source=StaticResource time,Path=Tag.Second"
Text="Binding Source=StaticResource timeSpanSecond,StringFormat=0:0:0,Path=Tag"/>
<TextBlock x:Name="tbk_Minute" Visibility="Hidden"
Width="Binding Source=StaticResource time,Path=Tag.Minute"
Text="Binding Source=StaticResource timeSpanMinute,StringFormat=0:0:0,Path=Tag">
</TextBlock>
<TextBlock x:Name="tbk_Hour" Visibility="Hidden"
Width="Binding Source=StaticResource time,Path=Tag.Hour"
Text="Binding Source=StaticResource timeSpanHour,StringFormat=0:0:0,Path=Tag"/>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">
<Run Text="Binding ElementName=tbk_Hour,Path=Width,StringFormat=0:F0"/>
<Run Text=":"/>
<Run Text="Binding ElementName=tbk_Minute,Path=Width,StringFormat=0:F0"/>
<Run Text=":"/>
<Run Text="Binding ElementName=tbk_Second,Path=Width,StringFormat=0:F0"/>
</TextBlock>
</Grid>
<Window.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation Storyboard.TargetName="tbk_Hour"
Storyboard.TargetProperty="Width"
BeginTime="Binding ElementName=tbk_Minute,Path=Text"
Duration="Binding ElementName=tbk_Hour,Path=Text"
From="Binding Source=StaticResource hourNext,Path=Tag"
To="23"/>
<DoubleAnimation Storyboard.TargetName="tbk_Hour"
Storyboard.TargetProperty="Width"
BeginTime="Binding ElementName=tbk_Hour,Path=Text"
Duration="24:0:0"
From="0"
To="23"
RepeatBehavior="Forever"/>
<DoubleAnimation Storyboard.TargetName="tbk_Minute"
Storyboard.TargetProperty="Width"
BeginTime="Binding ElementName=tbk_Second,Path=Text"
Duration="Binding ElementName=tbk_Minute,Path=Text"
From="Binding Source=StaticResource minuteNext,Path=Tag"
To="59"/>
<DoubleAnimation Storyboard.TargetName="tbk_Minute"
Storyboard.TargetProperty="Width"
BeginTime="Binding ElementName=tbk_Minute,Path=Text"
Duration="1:0:0"
From="0"
To="59"
RepeatBehavior="Forever"/>
<DoubleAnimation
Storyboard.TargetName="tbk_Second"
Storyboard.TargetProperty="Width"
Duration="Binding ElementName=tbk_Second,Path=Text"
From="Binding Source=StaticResource time,Path=Tag.Second"
To="59"
/>
<DoubleAnimation Storyboard.TargetName="tbk_Second"
Storyboard.TargetProperty="Width"
BeginTime="Binding ElementName=tbk_Second,Path=Text"
Duration="0:1:0"
From="0"
To="59"
RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
</Window>
wpf xaml
wpf xaml
asked Mar 26 at 5:24
Blue Zhang Blue Zhang
72 bronze badges
asked Mar 26 at 5:24
Blue Zhang Blue Zhang
72 bronze badges
edited Mar 26 at 7:05
Blue Zhang
asked Mar 26 at 5:24
Blue Zhang Blue Zhang
72 bronze badges
asked Mar 26 at 5:24
Blue Zhang Blue Zhang
72 bronze badges
asked Mar 26 at 5:24
Blue Zhang Blue Zhang
72 bronze badges
72 bronze badges
What is "the digital clock"? Please explain how it is supposed to look like and to behave.
– Clemens
Mar 26 at 6:30
I guess the Comment Tag<!--Remaining minute interval->causes the Problem, because it is not properly closed. It is missing a second - at the end, write-->instead of ->`.
– LittleBit
Mar 26 at 6:53
@Clemens a clock in which hours, minutes, and sometimes seconds are represented by numbers.It looks like 00:00:00-23:59:59
– Blue Zhang
Mar 26 at 7:13
@LittleBit Yes, I have corrected this error.
– Blue Zhang
Mar 26 at 7:14
@BlueZhang the easiest way would be to use a textblock bound to a dependency property filled by DateTime.now() and use string format to get the timeformat you want to have this would also be already region specific also I recommend adding this font to you project: keshikan.net/fonts-e.html
– Denis Schaf
Mar 26 at 7:29
|
show 1 more comment
What is "the digital clock"? Please explain how it is supposed to look like and to behave.
– Clemens
Mar 26 at 6:30
I guess the Comment Tag<!--Remaining minute interval->causes the Problem, because it is not properly closed. It is missing a second - at the end, write-->instead of ->`.
– LittleBit
Mar 26 at 6:53
@Clemens a clock in which hours, minutes, and sometimes seconds are represented by numbers.It looks like 00:00:00-23:59:59
– Blue Zhang
Mar 26 at 7:13
@LittleBit Yes, I have corrected this error.
– Blue Zhang
Mar 26 at 7:14
@BlueZhang the easiest way would be to use a textblock bound to a dependency property filled by DateTime.now() and use string format to get the timeformat you want to have this would also be already region specific also I recommend adding this font to you project: keshikan.net/fonts-e.html
– Denis Schaf
Mar 26 at 7:29
What is "the digital clock"? Please explain how it is supposed to look like and to behave.
– Clemens
Mar 26 at 6:30
What is "the digital clock"? Please explain how it is supposed to look like and to behave.
– Clemens
Mar 26 at 6:30
I guess the Comment Tag
<!--Remaining minute interval-> causes the Problem, because it is not properly closed. It is missing a second - at the end, write --> instead of ->`.– LittleBit
Mar 26 at 6:53
I guess the Comment Tag
<!--Remaining minute interval-> causes the Problem, because it is not properly closed. It is missing a second - at the end, write --> instead of ->`.– LittleBit
Mar 26 at 6:53
@Clemens a clock in which hours, minutes, and sometimes seconds are represented by numbers.It looks like 00:00:00-23:59:59
– Blue Zhang
Mar 26 at 7:13
@Clemens a clock in which hours, minutes, and sometimes seconds are represented by numbers.It looks like 00:00:00-23:59:59
– Blue Zhang
Mar 26 at 7:13
@LittleBit Yes, I have corrected this error.
– Blue Zhang
Mar 26 at 7:14
@LittleBit Yes, I have corrected this error.
– Blue Zhang
Mar 26 at 7:14
@BlueZhang the easiest way would be to use a textblock bound to a dependency property filled by DateTime.now() and use string format to get the timeformat you want to have this would also be already region specific also I recommend adding this font to you project: keshikan.net/fonts-e.html
– Denis Schaf
Mar 26 at 7:29
@BlueZhang the easiest way would be to use a textblock bound to a dependency property filled by DateTime.now() and use string format to get the timeformat you want to have this would also be already region specific also I recommend adding this font to you project: keshikan.net/fonts-e.html
– Denis Schaf
Mar 26 at 7:29
|
show 1 more comment
1 Answer
1
active
oldest
votes
-1
I recommend you do it based on textblocks and a suitable font like this one:
https://www.keshikan.net/fonts-e.html
Your textblocks are bound to propertys that could be set by an async function calling 'DateTime.Now();'
here is a XAML-Example:
<Border HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,40" Background="DarkGray" BorderThickness="1,1,0,0" BorderBrush="Gray">
<Grid>
<!-- Displays the actual time in red-->
<StackPanel Orientation="Horizontal" Margin="2">
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" Text="Binding Hour, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini" >:</TextBlock>
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" Text="Binding Min, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini">:</TextBlock>
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" Text="Binding Sec, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
</StackPanel>
<!-- Creates a Glow Effect -->
<StackPanel Orientation="Horizontal" Margin="2">
<StackPanel.Effect>
<BlurEffect KernelType="Gaussian" Radius="3"/>
</StackPanel.Effect>
<TextBlock Foreground="Red" FontSize="20" Text="Binding Hour, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini" >:</TextBlock>
<TextBlock Foreground="Red" FontSize="20" Text="Binding Min, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini">:</TextBlock>
<TextBlock Foreground="Red" FontSize="20" Text="Binding Sec, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
</StackPanel>
<!-- Creates the effect of turned of segments -->
<StackPanel Orientation="Horizontal" Margin="2">
<TextBlock Opacity="0.1" FontSize="20" Text="88" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Opacity="0.1" FontSize="20" FontFamily="DSEG7 Classic Mini" >:</TextBlock>
<TextBlock Opacity="0.1" FontSize="20" Text="88" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Opacity="0.1" FontSize="20" FontFamily="DSEG7 Classic Mini">:</TextBlock>
<TextBlock Opacity="0.1" FontSize="20" Text="88" FontFamily="DSEG7 Classic Mini" ></TextBlock>
</StackPanel>
</Grid>
</Border>
it would be even easier using only one textblock and a string format but this example I already had lying around :)
answered Mar 26 at 7:43
Denis SchafDenis Schaf
1,6161 gold badge3 silver badges10 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55350358%2fcreate-a-digital-clock-using-only-xaml-code-in-wpf%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
-1
I recommend you do it based on textblocks and a suitable font like this one:
https://www.keshikan.net/fonts-e.html
Your textblocks are bound to propertys that could be set by an async function calling 'DateTime.Now();'
here is a XAML-Example:
<Border HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,40" Background="DarkGray" BorderThickness="1,1,0,0" BorderBrush="Gray">
<Grid>
<!-- Displays the actual time in red-->
<StackPanel Orientation="Horizontal" Margin="2">
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" Text="Binding Hour, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini" >:</TextBlock>
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" Text="Binding Min, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini">:</TextBlock>
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" Text="Binding Sec, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
</StackPanel>
<!-- Creates a Glow Effect -->
<StackPanel Orientation="Horizontal" Margin="2">
<StackPanel.Effect>
<BlurEffect KernelType="Gaussian" Radius="3"/>
</StackPanel.Effect>
<TextBlock Foreground="Red" FontSize="20" Text="Binding Hour, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini" >:</TextBlock>
<TextBlock Foreground="Red" FontSize="20" Text="Binding Min, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini">:</TextBlock>
<TextBlock Foreground="Red" FontSize="20" Text="Binding Sec, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
</StackPanel>
<!-- Creates the effect of turned of segments -->
<StackPanel Orientation="Horizontal" Margin="2">
<TextBlock Opacity="0.1" FontSize="20" Text="88" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Opacity="0.1" FontSize="20" FontFamily="DSEG7 Classic Mini" >:</TextBlock>
<TextBlock Opacity="0.1" FontSize="20" Text="88" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Opacity="0.1" FontSize="20" FontFamily="DSEG7 Classic Mini">:</TextBlock>
<TextBlock Opacity="0.1" FontSize="20" Text="88" FontFamily="DSEG7 Classic Mini" ></TextBlock>
</StackPanel>
</Grid>
</Border>
it would be even easier using only one textblock and a string format but this example I already had lying around :)
answered Mar 26 at 7:43
Denis SchafDenis Schaf
1,6161 gold badge3 silver badges10 bronze badges
add a comment |
-1
I recommend you do it based on textblocks and a suitable font like this one:
https://www.keshikan.net/fonts-e.html
Your textblocks are bound to propertys that could be set by an async function calling 'DateTime.Now();'
here is a XAML-Example:
<Border HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,40" Background="DarkGray" BorderThickness="1,1,0,0" BorderBrush="Gray">
<Grid>
<!-- Displays the actual time in red-->
<StackPanel Orientation="Horizontal" Margin="2">
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" Text="Binding Hour, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini" >:</TextBlock>
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" Text="Binding Min, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini">:</TextBlock>
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" Text="Binding Sec, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
</StackPanel>
<!-- Creates a Glow Effect -->
<StackPanel Orientation="Horizontal" Margin="2">
<StackPanel.Effect>
<BlurEffect KernelType="Gaussian" Radius="3"/>
</StackPanel.Effect>
<TextBlock Foreground="Red" FontSize="20" Text="Binding Hour, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini" >:</TextBlock>
<TextBlock Foreground="Red" FontSize="20" Text="Binding Min, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini">:</TextBlock>
<TextBlock Foreground="Red" FontSize="20" Text="Binding Sec, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
</StackPanel>
<!-- Creates the effect of turned of segments -->
<StackPanel Orientation="Horizontal" Margin="2">
<TextBlock Opacity="0.1" FontSize="20" Text="88" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Opacity="0.1" FontSize="20" FontFamily="DSEG7 Classic Mini" >:</TextBlock>
<TextBlock Opacity="0.1" FontSize="20" Text="88" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Opacity="0.1" FontSize="20" FontFamily="DSEG7 Classic Mini">:</TextBlock>
<TextBlock Opacity="0.1" FontSize="20" Text="88" FontFamily="DSEG7 Classic Mini" ></TextBlock>
</StackPanel>
</Grid>
</Border>
it would be even easier using only one textblock and a string format but this example I already had lying around :)
answered Mar 26 at 7:43
Denis SchafDenis Schaf
1,6161 gold badge3 silver badges10 bronze badges
add a comment |
-1
-1
-1
I recommend you do it based on textblocks and a suitable font like this one:
https://www.keshikan.net/fonts-e.html
Your textblocks are bound to propertys that could be set by an async function calling 'DateTime.Now();'
here is a XAML-Example:
<Border HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,40" Background="DarkGray" BorderThickness="1,1,0,0" BorderBrush="Gray">
<Grid>
<!-- Displays the actual time in red-->
<StackPanel Orientation="Horizontal" Margin="2">
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" Text="Binding Hour, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini" >:</TextBlock>
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" Text="Binding Min, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini">:</TextBlock>
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" Text="Binding Sec, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
</StackPanel>
<!-- Creates a Glow Effect -->
<StackPanel Orientation="Horizontal" Margin="2">
<StackPanel.Effect>
<BlurEffect KernelType="Gaussian" Radius="3"/>
</StackPanel.Effect>
<TextBlock Foreground="Red" FontSize="20" Text="Binding Hour, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini" >:</TextBlock>
<TextBlock Foreground="Red" FontSize="20" Text="Binding Min, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini">:</TextBlock>
<TextBlock Foreground="Red" FontSize="20" Text="Binding Sec, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
</StackPanel>
<!-- Creates the effect of turned of segments -->
<StackPanel Orientation="Horizontal" Margin="2">
<TextBlock Opacity="0.1" FontSize="20" Text="88" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Opacity="0.1" FontSize="20" FontFamily="DSEG7 Classic Mini" >:</TextBlock>
<TextBlock Opacity="0.1" FontSize="20" Text="88" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Opacity="0.1" FontSize="20" FontFamily="DSEG7 Classic Mini">:</TextBlock>
<TextBlock Opacity="0.1" FontSize="20" Text="88" FontFamily="DSEG7 Classic Mini" ></TextBlock>
</StackPanel>
</Grid>
</Border>
it would be even easier using only one textblock and a string format but this example I already had lying around :)
answered Mar 26 at 7:43
Denis SchafDenis Schaf
1,6161 gold badge3 silver badges10 bronze badges
I recommend you do it based on textblocks and a suitable font like this one:
https://www.keshikan.net/fonts-e.html
Your textblocks are bound to propertys that could be set by an async function calling 'DateTime.Now();'
here is a XAML-Example:
<Border HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,40" Background="DarkGray" BorderThickness="1,1,0,0" BorderBrush="Gray">
<Grid>
<!-- Displays the actual time in red-->
<StackPanel Orientation="Horizontal" Margin="2">
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" Text="Binding Hour, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini" >:</TextBlock>
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" Text="Binding Min, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini">:</TextBlock>
<TextBlock Opacity="0.6" Foreground="Red" FontSize="20" Text="Binding Sec, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
</StackPanel>
<!-- Creates a Glow Effect -->
<StackPanel Orientation="Horizontal" Margin="2">
<StackPanel.Effect>
<BlurEffect KernelType="Gaussian" Radius="3"/>
</StackPanel.Effect>
<TextBlock Foreground="Red" FontSize="20" Text="Binding Hour, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini" >:</TextBlock>
<TextBlock Foreground="Red" FontSize="20" Text="Binding Min, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Foreground="Red" FontSize="20" FontFamily="DSEG7 Classic Mini">:</TextBlock>
<TextBlock Foreground="Red" FontSize="20" Text="Binding Sec, FallbackValue=00, StringFormat=00" FontFamily="DSEG7 Classic Mini" ></TextBlock>
</StackPanel>
<!-- Creates the effect of turned of segments -->
<StackPanel Orientation="Horizontal" Margin="2">
<TextBlock Opacity="0.1" FontSize="20" Text="88" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Opacity="0.1" FontSize="20" FontFamily="DSEG7 Classic Mini" >:</TextBlock>
<TextBlock Opacity="0.1" FontSize="20" Text="88" FontFamily="DSEG7 Classic Mini" ></TextBlock>
<TextBlock Opacity="0.1" FontSize="20" FontFamily="DSEG7 Classic Mini">:</TextBlock>
<TextBlock Opacity="0.1" FontSize="20" Text="88" FontFamily="DSEG7 Classic Mini" ></TextBlock>
</StackPanel>
</Grid>
</Border>
it would be even easier using only one textblock and a string format but this example I already had lying around :)
answered Mar 26 at 7:43
Denis SchafDenis Schaf
1,6161 gold badge3 silver badges10 bronze badges
edited Mar 26 at 7:52
answered Mar 26 at 7:43
Denis SchafDenis Schaf
1,6161 gold badge3 silver badges10 bronze badges
answered Mar 26 at 7:43
Denis SchafDenis Schaf
1,6161 gold badge3 silver badges10 bronze badges
answered Mar 26 at 7:43
Denis SchafDenis Schaf
1,6161 gold badge3 silver badges10 bronze badges
1,6161 gold badge3 silver badges10 bronze badges
add a comment |
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55350358%2fcreate-a-digital-clock-using-only-xaml-code-in-wpf%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What is "the digital clock"? Please explain how it is supposed to look like and to behave.
– Clemens
Mar 26 at 6:30
I guess the Comment Tag
<!--Remaining minute interval->causes the Problem, because it is not properly closed. It is missing a second - at the end, write-->instead of ->`.– LittleBit
Mar 26 at 6:53
@Clemens a clock in which hours, minutes, and sometimes seconds are represented by numbers.It looks like 00:00:00-23:59:59
– Blue Zhang
Mar 26 at 7:13
@LittleBit Yes, I have corrected this error.
– Blue Zhang
Mar 26 at 7:14
@BlueZhang the easiest way would be to use a textblock bound to a dependency property filled by DateTime.now() and use string format to get the timeformat you want to have this would also be already region specific also I recommend adding this font to you project: keshikan.net/fonts-e.html
– Denis Schaf
Mar 26 at 7:29