community/Ink Canvas/Windows/CountdownTimerWindow.xaml

<Window x:Class="Ink_Canvas.CountdownTimerWindow"
        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:Ink_Canvas"
        xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
        xmlns:processbars="clr-namespace:Ink_Canvas.ProcessBars"
        ui:ThemeManager.RequestedTheme="Light" Topmost="True" Background="Transparent"
        mc:Ignorable="d" WindowStyle="None" AllowsTransparency="True"
        Loaded="Window_Loaded" Closing="Window_Closing" WindowStartupLocation="CenterScreen"
        Title="Ink Canvas 画板 - 计时器" Height="700" Width="1100">
    <Border Background="#F0F3F9" CornerRadius="10" BorderThickness="1" BorderBrush="#0066BF" Margin="60">
        <Grid>
            <TextBlock x:Name="TbCurrentTime" MouseDown="BtnMinimal_OnMouseUp" Visibility="Collapsed" FontSize="56" FontWeight="Black" HorizontalAlignment="Center" VerticalAlignment="Center" Text="00:00:00">
                <TextBlock.Style>
                    <Style TargetType="TextBlock" BasedOn="{x:Null}">
                        <Setter Property="TextWrapping" Value="NoWrap" />
                        <Setter Property="TextTrimming" Value="None" />
                    </Style>
                </TextBlock.Style>
            </TextBlock>
            <Border MouseMove="WindowDragMove" Visibility="{Binding ElementName=TbCurrentTime, Path=Visibility}" Width="64" Height="15" CornerRadius="8" Background="Gray" Margin="0,0,0,5" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
            <Viewbox x:Name="BigViewController" Margin="20,20,20,20">
                <Grid Height="180" Width="200">
                    <processbars:CycleProcessBar x:Name="ProcessBarTime" CurrentValue="0" Width="150" VerticalAlignment="Top"/>
                    <ui:SimpleStackPanel MouseMove="WindowDragMove" Orientation="Horizontal" Height="28.5" Margin="0,0,0,25"
                                         VerticalAlignment="Center"
                                         HorizontalAlignment="Center">
                        <TextBlock Name="TextBlockHour" FontFamily="Segeo UI"
                                   Margin="0,0,0,0" Visibility="Collapsed"
                                   Foreground="#5B5D5F"
                                   Text="00" FontSize="26"/>
                        <TextBlock Name="TextControlHour" Text="{Binding ElementName=TextBlockHour, Path=Text}"
                                   FontFamily="{Binding ElementName=TextBlockHour, Path=FontFamily}"
                                   Foreground="{Binding ElementName=TextBlockHour, Path=Foreground}"
                                   FontSize="{Binding ElementName=TextBlockHour, Path=FontSize}"
                                   FontWeight="SemiBold" HorizontalAlignment="Center"/>
                        <Grid Name="GridAdjustHour" Visibility="Visible" Margin="-29,-30,0,-30" Width="29">
                            <ui:SimpleStackPanel Spacing="2">
                                <Button Height="13" Width="{Binding ElementName=GridAdjustHour, Path=ActualWidth}" Click="Button_Click_1">
                                    <TextBlock Text="+5" Margin="-10" FontSize="8" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Button>
                                <Button Height="13" Width="{Binding ElementName=GridAdjustHour, Path=ActualWidth}" Click="Button_Click">
                                    <TextBlock Text="+1" Margin="-10" FontSize="8" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Button>
                            </ui:SimpleStackPanel>
                            <ui:SimpleStackPanel Spacing="2" VerticalAlignment="Bottom">
                                <Button  Height="13" Width="{Binding ElementName=GridAdjustHour, Path=ActualWidth}" Click="Button_Click_2">
                                    <TextBlock Text="-1" Margin="-10" FontSize="8" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Button>
                                <Button Height="13" Width="{Binding ElementName=GridAdjustHour, Path=ActualWidth}" Click="Button_Click_3">
                                    <TextBlock Text="-5" Margin="-10" FontSize="8" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Button>
                            </ui:SimpleStackPanel>
                        </Grid>
                        <TextBlock Text=":"
                                   FontFamily="{Binding ElementName=TextBlockHour, Path=FontFamily}"
                                   Margin="0,-2.5,0,0"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Top"
                                   Foreground="{Binding ElementName=TextBlockHour, Path=Foreground}"
                                   FontSize="{Binding ElementName=TextBlockHour, Path=FontSize}"
                                   FontWeight="DemiBold"/>
                        <TextBlock Name="TextBlockMinute" FontFamily="{Binding ElementName=TextBlockHour, Path=FontFamily}"
                                   Margin="0,0,0,0" Visibility="Collapsed"
                                   Foreground="{Binding ElementName=TextBlockHour, Path=Foreground}"
                                   Text="01" FontSize="26"/>
                        <TextBlock Name="TextControlMinute" Text="{Binding ElementName=TextBlockMinute, Path=Text}"
                                   FontFamily="{Binding ElementName=TextBlockMinute, Path=FontFamily}"
                                   Foreground="{Binding ElementName=TextBlockMinute, Path=Foreground}"
                                   FontSize="{Binding ElementName=TextBlockMinute, Path=FontSize}"
                                   FontWeight="SemiBold" HorizontalAlignment="Center"/>
                        <Grid Visibility="{Binding ElementName=GridAdjustHour, Path=Visibility}" Margin="-29,-30,0,-30" Width="29">
                            <ui:SimpleStackPanel Spacing="2">
                                <Button Height="13" Width="{Binding ElementName=GridAdjustHour, Path=ActualWidth}" Click="Button_Click_5">
                                    <TextBlock Text="+5" Margin="-10" FontSize="8" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Button>
                                <Button Height="13" Width="{Binding ElementName=GridAdjustHour, Path=ActualWidth}" Click="Button_Click_4">
                                    <TextBlock Text="+1" Margin="-10" FontSize="8" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Button>
                            </ui:SimpleStackPanel>
                            <ui:SimpleStackPanel Spacing="2" VerticalAlignment="Bottom">
                                <Button Height="13" Width="{Binding ElementName=GridAdjustHour, Path=ActualWidth}" Click="Button_Click_6">
                                    <TextBlock Text="-1" Margin="-10" FontSize="8" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Button>
                                <Button Height="13" Width="{Binding ElementName=GridAdjustHour, Path=ActualWidth}" Click="Button_Click_7">
                                    <TextBlock Text="-5" Margin="-10" FontSize="8" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Button>
                            </ui:SimpleStackPanel>
                            <Border x:Name="BtnTimeSetOkay" MouseUp="Grid_MouseUp"
                                    Background="#0066BF"
                                    Height="20" Width="20"
                                    CornerRadius="100"
                                    VerticalAlignment="Bottom" Margin="0,0,0,-35">
                                <Border.Effect>
                                    <DropShadowEffect Direction="0" ShadowDepth="0" Opacity="0.1" BlurRadius="3"/>
                                </Border.Effect>
                                <Viewbox Margin="5.5">
                                    <ui:SymbolIcon Symbol="Save" Foreground="White"/>
                                </Viewbox>
                            </Border>
                        </Grid>
                        <TextBlock Text=":"
                                   FontFamily="{Binding ElementName=TextBlockHour, Path=FontFamily}"
                                   Margin="0,-2.5,0,0"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Top"
                                   Foreground="{Binding ElementName=TextBlockHour, Path=Foreground}"
                                   FontSize="{Binding ElementName=TextBlockHour, Path=FontSize}"
                                   FontWeight="DemiBold"/>
                        <TextBlock Name="TextBlockSecond" FontFamily="{Binding ElementName=TextBlockHour, Path=FontFamily}"
                                   Margin="0,0,0,0" Visibility="Collapsed"
                                   Foreground="{Binding ElementName=TextBlockHour, Path=Foreground}"
                                   Text="00" FontSize="26"/>
                        <TextBlock Name="TextControlSecond" Text="{Binding ElementName=TextBlockSecond, Path=Text}"
                                   FontFamily="{Binding ElementName=TextBlockSecond, Path=FontFamily}"
                                   Foreground="{Binding ElementName=TextBlockSecond, Path=Foreground}"
                                   FontSize="{Binding ElementName=TextBlockSecond, Path=FontSize}"
                                   FontWeight="SemiBold" HorizontalAlignment="Center"/>
                        <Grid Margin="-96.8,0,0,0" Width="96.8" Background="Transparent" MouseUp="Grid_MouseUp"/>
                        <Grid Visibility="{Binding ElementName=GridAdjustHour, Path=Visibility}" Margin="-29,-30,0,-30" Width="29">
                            <ui:SimpleStackPanel Spacing="2">
                                <Button Height="13" Width="{Binding ElementName=GridAdjustHour, Path=ActualWidth}" Click="Button_Click_8">
                                    <TextBlock Text="+5" Margin="-10" FontSize="8" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Button>
                                <Button Height="13" Width="{Binding ElementName=GridAdjustHour, Path=ActualWidth}" Click="Button_Click_9">
                                    <TextBlock Text="+1" Margin="-10" FontSize="8" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Button>
                            </ui:SimpleStackPanel>
                            <ui:SimpleStackPanel Spacing="2" VerticalAlignment="Bottom">
                                <Button Height="13" Width="{Binding ElementName=GridAdjustHour, Path=ActualWidth}" Click="Button_Click_10">
                                    <TextBlock Text="-1" Margin="-10" FontSize="8" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Button>
                                <Button Height="13" Width="{Binding ElementName=GridAdjustHour, Path=ActualWidth}" Click="Button_Click_11">
                                    <TextBlock Text="-5" Margin="-10" FontSize="8" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Button>
                            </ui:SimpleStackPanel>
                        </Grid>
                    </ui:SimpleStackPanel>
                    <Border x:Name="BorderStopTime" Background="#E8EAF0" Margin="0,23,0,0"
                            Height="18" CornerRadius="9"
                            VerticalAlignment="Center" HorizontalAlignment="Center">
                        <ui:SimpleStackPanel Margin="6,0" Spacing="0" Orientation="Horizontal" HorizontalAlignment="Center">
                            <Image Margin="0,0,2,0" Source="/Resources/Icons-Fluent/ic_fluent_clock_24_regular.png" RenderOptions.BitmapScalingMode="HighQuality" Height="10" Width="10"/>
                            <TextBlock Name="TextBlockStopTime" Text="12:30 PM" FontSize="9" VerticalAlignment="Center"/>
                        </ui:SimpleStackPanel>
                    </Border>
                    <ui:SimpleStackPanel Visibility="{Binding ElementName=ProcessBarTime, Path=Visibility}" Spacing="10" Orientation="Horizontal" Height="30" HorizontalAlignment="Center" VerticalAlignment="Bottom">
                        <Grid>
                            <Border x:Name="BtnStart" MouseUp="BtnStart_MouseUp" Background="#0066BF" Height="20" Width="20" CornerRadius="100">
                                <Viewbox Margin="5">
                                    <ui:FontIcon Name="FontIconStart" Glyph="&#xE768;" Foreground="White"/>
                                </Viewbox>
                            </Border>
                            <Border x:Name="BtnStartCover" Visibility="Collapsed" Background="#BFBFBF" Height="20" Width="20" CornerRadius="100">
                                <Viewbox Margin="5">
                                    <ui:FontIcon Glyph="{Binding ElementName=FontIconStart, Path=Glyph}" Foreground="White"/>
                                </Viewbox>
                            </Border>
                        </Grid>
                        <Grid>
                            <Border x:Name="BtnReset" MouseUp="BtnReset_MouseUp" Background="#FBFBFD" Height="20" Width="20" CornerRadius="100">
                                <Border.Effect>
                                    <DropShadowEffect Direction="0" ShadowDepth="0" Opacity="0.15" BlurRadius="3"/>
                                </Border.Effect>
                                <Viewbox Margin="5.5">
                                    <ui:FontIcon Glyph="&#xE72C;" Foreground="Black"/>
                                </Viewbox>
                            </Border>
                            <Border x:Name="BtnResetCover" Background="#F3F5F9" Height="20" Width="20" CornerRadius="100">
                                <Viewbox Margin="5.5">
                                    <ui:FontIcon Glyph="&#xE72C;" Foreground="#9D9D9E"/>
                                </Viewbox>
                            </Border>
                        </Grid>
                    </ui:SimpleStackPanel>
                </Grid>
            </Viewbox>
            <Viewbox Visibility="{Binding ElementName=BigViewController, Path=Visibility}" Margin="20,20,20,20" HorizontalAlignment="Right">
                <ui:SimpleStackPanel Height="180" Orientation="Horizontal">
                    <Border x:Name="BtnMinimal" Visibility="{Binding ElementName=BorderStopTime, Path=Visibility}" MouseUp="BtnMinimal_OnMouseUp" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                            Margin="5"
                            Background="#FBFBFD" Height="20" Width="20" CornerRadius="100">
                        <Border.Effect>
                            <DropShadowEffect Direction="0" ShadowDepth="0" Opacity="0.1" BlurRadius="3"/>
                        </Border.Effect>
                        <Viewbox Margin="5.5">
                            <TextBlock Name="FontIconMinimal" Text="&#xE7B3;" Foreground="Black" FontFamily="Segoe MDL2 Assets" FontSize="12" />
                        </Viewbox>
                    </Border>
                    <Border x:Name="BtnFullscreen" MouseUp="BtnFullscreen_MouseUp" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                            Margin="5"
                            Background="#FBFBFD" Height="20" Width="20" CornerRadius="100">
                        <Border.Effect>
                            <DropShadowEffect Direction="0" ShadowDepth="0" Opacity="0.1" BlurRadius="3"/>
                        </Border.Effect>
                        <Viewbox Margin="5.5">
                            <TextBlock Name="FontIconFullscreen" Text="&#xE740;" Foreground="Black" FontFamily="Segoe MDL2 Assets" FontSize="12" />
                        </Viewbox>
                    </Border>
                    <Border x:Name="BtnClose" MouseUp="BtnClose_MouseUp" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                        Margin="5"
                        Background="#E32A34" Height="20" Width="20" CornerRadius="100">
                        <Border.Effect>
                            <DropShadowEffect Direction="0" ShadowDepth="0" Opacity="0.1" BlurRadius="3"/>
                        </Border.Effect>
                        <Viewbox Margin="5.5">
                            <TextBlock Text="&#xE8BB;" Foreground="White" FontFamily="Segoe MDL2 Assets" FontSize="12" />
                        </Viewbox>
                    </Border>
                </ui:SimpleStackPanel>
            </Viewbox>
            <MediaElement  Visibility="Collapsed" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100"/>
        </Grid>
    </Border>
</Window>