Wednesday, October 28, 2009
Numeric Up down control in WPF
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>
Tuesday, October 20, 2009
Dynamically load a xaml in WPF
i was looking for a way to load the xaml file on the fly.This will help the user to change the text color etc without building the application again.However Please note that loading XAML dynamically is not as efficient as compiling it. However, sometimes, it is necessary to load it dynamically at runtime.
Here i have a window - with 2 radiobutton.. checking will load respective pages.
here is the C# part
public partial class Window1 : Window
{
Button buttoninXAML;
public Window1()
{
InitializeComponent();
}
private void radioButton1_Checked(object sender, RoutedEventArgs e)
{
try
{
StreamReader mysr = new StreamReader(@"C:\test1.xaml");
DependencyObject rootObject = XamlReader.Load(mysr.BaseStream) as DependencyObject;
buttoninXAML = LogicalTreeHelper.FindLogicalNode(rootObject, "button1") as Button;
buttoninXAML.Click += new RoutedEventHandler(Button_Click);
myContainerframe.Content = rootObject;
}
catch (FileNotFoundException ex)
{
MessageBox.Show(ex.Message.ToString());
}
}
private void radioButton2_Checked(object sender, RoutedEventArgs e)
{
try
{
StreamReader mysr = new StreamReader(@"C:\test.xaml");
DependencyObject rootObject = XamlReader.Load(mysr.BaseStream) as DependencyObject;
buttoninXAML = LogicalTreeHelper.FindLogicalNode(rootObject, "btntest") as Button;
buttoninXAML.Click += new RoutedEventHandler(Button_Click);
myContainerframe.Content = rootObject;
}
catch (FileNotFoundException ex)
{
MessageBox.Show(ex.Message.ToString());
}
}
public void Button_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Click of dynamically loaded btn");
}
}
Here is the xaml part of window
<stackpanel height="39" margin="12,12,12,0" name="stackPanel1" verticalalignment="Top" >
<radiobutton height="20" name="radioButton1" width="86" checked="radioButton1_Checked">SimplePage</radiobutton>
<radiobutton height="19" name="radioButton2" width="87" checked="radioButton2_Checked">Complexpage</radiobutton>
</stackpanel>
Regards
Balu
Here i have a window - with 2 radiobutton.. checking will load respective pages.
here is the C# part
public partial class Window1 : Window
{
Button buttoninXAML;
public Window1()
{
InitializeComponent();
}
private void radioButton1_Checked(object sender, RoutedEventArgs e)
{
try
{
StreamReader mysr = new StreamReader(@"C:\test1.xaml");
DependencyObject rootObject = XamlReader.Load(mysr.BaseStream) as DependencyObject;
buttoninXAML = LogicalTreeHelper.FindLogicalNode(rootObject, "button1") as Button;
buttoninXAML.Click += new RoutedEventHandler(Button_Click);
myContainerframe.Content = rootObject;
}
catch (FileNotFoundException ex)
{
MessageBox.Show(ex.Message.ToString());
}
}
private void radioButton2_Checked(object sender, RoutedEventArgs e)
{
try
{
StreamReader mysr = new StreamReader(@"C:\test.xaml");
DependencyObject rootObject = XamlReader.Load(mysr.BaseStream) as DependencyObject;
buttoninXAML = LogicalTreeHelper.FindLogicalNode(rootObject, "btntest") as Button;
buttoninXAML.Click += new RoutedEventHandler(Button_Click);
myContainerframe.Content = rootObject;
}
catch (FileNotFoundException ex)
{
MessageBox.Show(ex.Message.ToString());
}
}
public void Button_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Click of dynamically loaded btn");
}
}
Here is the xaml part of window
<stackpanel height="39" margin="12,12,12,0" name="stackPanel1" verticalalignment="Top" >
<radiobutton height="20" name="radioButton1" width="86" checked="radioButton1_Checked">SimplePage</radiobutton>
<radiobutton height="19" name="radioButton2" width="87" checked="radioButton2_Checked">Complexpage</radiobutton>
</stackpanel>
Regards
Balu
Subscribe to:
Posts (Atom)