This is a simple updown control done in WPF.
I had a requirement of updown control in a project.But couldnt find any in WPPF tool kit.So just made a quick updown control.
I had put timers to a up- down effects..
public partial class Window1 : Window
{
BtnClick btnClick = new BtnClick();
DispatcherTimer fadeoutTimer = new DispatcherTimer();
DispatcherTimer fadeintTimer = new DispatcherTimer();
int currentValue;
public Window1()
{
this.InitializeComponent();
fadeintTimer.Tick += new EventHandler(fadeintTimer_Tick);
fadeoutTimer.Tick += new EventHandler(fadeoutTimer_Tick);
fadeoutTimer.Interval = new TimeSpan(0, 0, 0, 0, 10);
fadeintTimer.Interval = new TimeSpan(0, 0, 0, 0, 10);
tbValue.Text = "0";
}
void fadeoutTimer_Tick(object sender, EventArgs e)
{
tbValue.Opacity = tbValue.Opacity - .2;
if (tbValue.Opacity <= 0)
{
fadeoutTimer.Stop();
tbValue.Text = currentValue.ToString();
fadeintTimer.Start();
}
}
void fadeintTimer_Tick(object sender, EventArgs e)
{
tbValue.Opacity = tbValue.Opacity + .2;
if (tbValue.Opacity >= 1)
{
tbValue.Opacity = 1;
fadeintTimer.Stop();
tbValue.Text = currentValue.ToString();
fadeintTimer.Stop();
}
}
private void btnUp_Click(object sender, RoutedEventArgs e)
{
StopTimers();
btnClick = BtnClick.Up;
if (tbValue.Text != "")
{
currentValue = Convert.ToInt32(tbValue.Text);
}
else
{
currentValue = 0;
}
UpdateValue();
}
private void StopTimers()
{
fadeintTimer.Stop();
fadeoutTimer.Stop();
}
private void UpdateValue()
{
if (btnClick == BtnClick.Up)
{
currentValue = currentValue + 1;
}
else
{
currentValue = currentValue - 1;
}
fadeoutTimer.Start();
}
private void btnDown_Click(object sender, RoutedEventArgs e)
{
StopTimers();
btnClick = BtnClick.Down;
if (tbValue.Text != "")
{
currentValue = Convert.ToInt32(tbValue.Text);
}
else
{
currentValue = 0;
}
UpdateValue();
}
private void tbValue_TextChanged(object sender, TextChangedEventArgs e)
{
if (!IsInteger(tbValue.Text))
{
}
else
{
tbValue.Text = "0";
}
}
// Function to Test for Integers both Positive & Negative
public bool IsInteger(String strNumber)
{
//Regex objNotIntPattern = new Regex("[^0-9-]");
Regex objIntPattern = new Regex("^-[0-9]+$|^[0-9]+$");
return ! objIntPattern.IsMatch(strNumber);
}
}
public enum BtnClick
{
Up,
Down,
};
this is the xaml design...
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WpfApplication4.Window1"
x:Name="Window"
Title="Window1"
Width="640" Height="480" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna" Background="#FF6E93FF" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Window.Resources>
<Style x:Key="ButtonStyleup" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackgroundFill}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonBorder}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ControlTemplate.Resources>
<Storyboard x:Key="OnMouseEnter1">
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFC6291B"/>
<SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FFDC5E42"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnMouseLeave1">
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFDC5E42"/>
<SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FFBF2A1B"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid Width="Auto" Height="Auto" x:Name="grid">
<Border BorderBrush="{x:Null}" BorderThickness="0.5,0.5,0.5,0.5" CornerRadius="4,4,4,4" x:Name="border" Background="#FFC6291B">
<Grid Width="Auto" Height="Auto" Margin="0,0,0,0">
<Rectangle Stroke="{x:Null}" Margin="0.211,0.552,0.375,0" RadiusY="2.247" RadiusX="2.247" VerticalAlignment="Top" Height="5.448">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#CCEAD9D9" Offset="0"/>
<GradientStop Color="#19FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Margin="5.833,1.507,6.584,1.665" Text="^" TextWrapping="Wrap" FontSize="16" Foreground="#FFFFF6D8"/>
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard Storyboard="{StaticResource OnMouseLeave1}" x:Name="OnMouseLeave1_BeginStoryboard1"/>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave"/>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard x:Name="OnMouseLeave1_BeginStoryboard" Storyboard="{StaticResource OnMouseEnter1}"/>
</EventTrigger>
<Trigger Property="IsKeyboardFocused" Value="true"/>
<Trigger Property="ToggleButton.IsChecked" Value="true"/>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtonStyleDown" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackgroundFill}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonBorder}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ControlTemplate.Resources>
<Storyboard x:Key="OnMouseEnter1">
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFC6291B"/>
<SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FFDC5E42"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnMouseLeave1">
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFDC5E42"/>
<SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FFBF2A1B"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid Width="Auto" Height="Auto" x:Name="grid">
<Border BorderBrush="{x:Null}" BorderThickness="0.5,0.5,0.5,0.5" CornerRadius="4,4,4,4" x:Name="border" Background="#FFC6291B">
<Grid Width="Auto" Height="Auto" Margin="0,0,0,0">
<Rectangle Stroke="{x:Null}" Margin="0.211,0.552,0.375,0" RadiusY="2.247" RadiusX="2.247" VerticalAlignment="Top" Height="5.448">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#CCEAD9D9" Offset="0"/>
<GradientStop Color="#19FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Margin="6.135,-2.326,6.282,7.079" Text="^" TextWrapping="Wrap" FontSize="16" RenderTransformOrigin="0.5,0.5" d:LayoutOverrides="VerticalAlignment" Foreground="#FFFFF6D8">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="180.657"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard Storyboard="{StaticResource OnMouseLeave1}" x:Name="OnMouseLeave1_BeginStoryboard1"/>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave"/>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard x:Name="OnMouseLeave1_BeginStoryboard" Storyboard="{StaticResource OnMouseEnter1}"/>
</EventTrigger>
<Trigger Property="IsKeyboardFocused" Value="true"/>
<Trigger Property="ToggleButton.IsChecked" Value="true"/>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<StackPanel Margin="224.039,96,44,76">
<Border x:Name="myImage" Width="267" Height="145" CornerRadius="5,5,5,5">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFB9D9D" Offset="0.013"/>
<GradientStop Color="#FF220A0A" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Canvas Width="267" Height="145" Background="{x:Null}">
<UserControl Width="82.667" Height="46.333" x:Name="USNumericUpDown" Canvas.Left="176.333" Canvas.Top="90.667">
<Border Width="72.5" Height="39.334" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
<Border.BitmapEffect>
<DropShadowBitmapEffect Color="#FFF5D9D9"/>
</Border.BitmapEffect>
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF0A0503" Offset="0.513"/>
<GradientStop Color="#FFA73838" Offset="1"/>
<GradientStop Color="#FFA73131" Offset="0.013"/>
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF7BE603" Offset="0.009"/>
<GradientStop Color="#FFAAE80F" Offset="0.982"/>
<GradientStop Color="#FFFFFFFF" Offset="0.554"/>
</LinearGradientBrush>
</Border.BorderBrush>
<StackPanel Width="70.5" Height="37.833" Orientation="Horizontal">
<TextBox Margin="3,5,0,5" TextChanged="tbValue_TextChanged" Width="41.334" x:Name="tbValue" Height="22" Background="#C5E98B8B" FontFamily="Times New Roman" FontSize="14" Foreground="#FFFDFDFD" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Opacity="1" Text="9999" TextWrapping="Wrap" FontWeight="Normal" FontStyle="Normal">
<TextBox.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
<GradientStop Color="#FF111111" Offset="0.513"/>
</LinearGradientBrush>
</TextBox.BorderBrush>
<TextBox.BitmapEffect>
<BitmapEffectGroup/>
</TextBox.BitmapEffect>
<TextBox.BitmapEffectInput>
<BitmapEffectInput/>
</TextBox.BitmapEffectInput>
</TextBox>
<StackPanel Margin="0,0,0,2" Width="25.667" Height="35.833">
<Button x:Name="btnUp" Click="btnUp_Click" Style="{DynamicResource ButtonStyleup}" Width="25" Height="18" Content="X" BorderThickness="0,0,0,0">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#FFF0EDEA" Offset="0.9"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button x:Name="btnDown" Click="btnDown_Click" Style="{DynamicResource ButtonStyleDown}" Width="25" Height="18" Content="Button" BorderThickness="0,0,0,0"/>
</StackPanel>
</StackPanel>
</Border>
</UserControl>
<TextBlock Width="156" Height="29.5" Text="Numeric up down" TextWrapping="Wrap" FontFamily="Tekton Pro" FontSize="22" Canvas.Top="100.5" Foreground="#FFF0F0F0" Canvas.Left="10"/>
</Canvas>
</Border>
<Border Width="260" BorderThickness="1,1,1,1" CornerRadius="2,2,2,2" Opacity="1" Height="145" Margin="0,1,0,0" RenderTransformOrigin="0.5,0.7">
<Border.Background>
<VisualBrush Visual="{Binding ElementName=myImage}" Stretch="Fill" TileMode="None">
<VisualBrush.Transform>
<ScaleTransform ScaleX="1" ScaleY="-1" CenterX="50" CenterY="73"/>
</VisualBrush.Transform>
</VisualBrush>
</Border.Background>
<Border.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#7B000000"/>
<GradientStop Offset="0.357" Color="Transparent"/>
</LinearGradientBrush>
</Border.OpacityMask>
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="10" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="19.426316451256383" Y="0"/>
</TransformGroup>
</Border.RenderTransform>
</Border>
</StackPanel>
</Grid>
</Window>
No comments:
Post a Comment