Finally, the wait is over and Microsoft has released Surface Toolkit for Windows Touch. Now we will be able to create Windows Applications that are touch enabled and works on Windows 7 computers with touch screens. The Toolkit brings many good old Surface touch controls including the much awaited ScatterView to the Windows platform. The good thing is that tremendous research has been done by Microsoft team in the areas of user experience and usability for these controls and hence we developers can save precious time otherwise spent on developing custom touch controls.
The controls included are:
LibraryBar, LibraryContainer, LibraryStack, ScatterView, SurfaceButton, SurfaceCheckBox, SurfaceInkCanvas, SurfaceListBox, SurfaceRadioButton, SurfaceScrollViewer, SurfaceSlider, SurfaceWindow.
These touch specific controls responds to touches, stylus and mouse clicks and have many special touch features (One example is the bulging out of scroll bars when touched).
One thing that is missing from the Toolkit is a Simulator similar to the Surface Simulator to help out those developers who do not have a touch screen. Also the applications written using these controls will now only work on Windows 7 and not on Surface. Hopefully these may change when they release the next version of Surface (Surface 2.0) based on .NET 4.0.
Microsoft Surface Toolkit for Windows Touch Beta can be downloaded from here and more details can be found at the Surface Blog.
Showing posts with label WPF. Show all posts
Showing posts with label WPF. Show all posts
Tuesday, April 13, 2010
Wednesday, May 07, 2008
WPF Color Pad
Ever wanted to see the list of named colors available in WPF's System.Windows.Media.Colors? And fancied using it's hexa code to get the colors like 'Tomato' in your web page?
Here is a simple WPF Application called ColorPad that lists out all the named colors. Click on a color to see its hexa code value. Remember to remove the first two letters/digits that represents the transparency (Alpha value) if you are using this color in html pages.

The application can be downloaded from here.
The XAML Source Code:
And the Code Behind in C#:
Here is a simple WPF Application called ColorPad that lists out all the named colors. Click on a color to see its hexa code value. Remember to remove the first two letters/digits that represents the transparency (Alpha value) if you are using this color in html pages.

The application can be downloaded from here.
The XAML Source Code:
<Window x:Class="ColorPad.Window1" Icon="ColorPad.ico"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ColorPad" Height="500" Width="300" WindowStyle="SingleBorderWindow" ResizeMode="NoResize">
<Window.Resources>
<DataTemplate x:Key="tempGrid">
<Rectangle Width="60" Height="20" Fill="{Binding Name}" Stroke="#FF000000"/>
</DataTemplate>
</Window.Resources>
<Grid x:Name="LayoutRoot" ShowGridLines="True">
<StackPanel Orientation="Vertical">
<TextBlock x:Name="uxTitle" Text="ColorPad Version 1.0.0" Width="210" TextAlignment="Center" />
<ListView Height="400" Width="210" Name="uxColorGrid">
<ListView.View>
<GridView x:Name="uxColorGridView">
<GridViewColumn Header="Color Name" DisplayMemberBinding="{Binding Path=Name}" />
<GridViewColumn CellTemplate="{DynamicResource tempGrid}" Header="Color" />
</GridView>
</ListView.View>
</ListView>
<TextBlock x:Name="uxFooter" Visibility="Collapsed" Width="200" Background="{Binding RelativeSource={RelativeSource Self}, Path=Text}" />
<TextBox x:Name="uxColorCode" Width="210" TextAlignment="Center" />
</StackPanel>
</Grid>
</Window>
And the Code Behind in C#:
using System.Reflection;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Collections.Generic;
namespace ColorPad
{
/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
uxColorGrid.ItemsSource = typeof(Colors).GetProperties();
uxColorGrid.SelectionChanged += new SelectionChangedEventHandler(uxColorGrid_SelectionChanged);
}
void uxColorGrid_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
PropertyInfo c = uxColorGrid.SelectedItem as PropertyInfo;
uxFooter.Text = c.Name;
SolidColorBrush scb = uxFooter.Background as SolidColorBrush;
uxColorCode.Text = scb.Color.ToString();
uxTitle.Foreground = uxFooter.Background;
}
}
}
Friday, January 25, 2008
Windows Presentation Foundation (WPF)
WPF or Windows Presentation Foundation is an exciting presentation technology from Microsoft shipped in the .NET Framework 3.0 Version along with other technologies called Windows Communication Foundation, Windows Workflow Foundation, and Windows CardSpace.
It has been in the air since long back and I always used to wonder why some critical business application would require such a flashy jazzy user interface technology. Now that I got a chance to work in WPF, I am slowly realizing its benefits and potential.
Earlier the applications were command prompt based. Then came the GUI (Graphical User Interface) revolution that introduced the end users to windows, buttons, drop downs and so forth. But after that, there has been nothing exciting in the user interface world for desktop applications, though the web went through a fabulous UX (User Experience) change. Windows Forms that appeared with .NET was just a better version of old GUIs.
Now there is WPF with an entirely new set of features and technologies that makes it possible to define the UX of desktop application user to a new level. Of course Windows Forms will continue to be in the field, especially for LOB (Line Of Business) applications, but WPF can be used to make compelling data visualizations for applications that require a pleasing user experience.
Developing stunning applications in WPF is much easier than we might think of. In earlier technologies audio, video, etc were islands in an application. With WPF, a single API can be used for all of this. A video can be part of an application just like a button or label.
For example the below code snippet creates a Windows Vista Style Button with content as a playing video.
The new XAML language helps in creating the UI layer keeping the business logic separately in the code behind files. With features like Templates, Styles, and Animations WPF is opening up a new arena where a normal developer can now create ‘cool’ apps!
It has been in the air since long back and I always used to wonder why some critical business application would require such a flashy jazzy user interface technology. Now that I got a chance to work in WPF, I am slowly realizing its benefits and potential.
Earlier the applications were command prompt based. Then came the GUI (Graphical User Interface) revolution that introduced the end users to windows, buttons, drop downs and so forth. But after that, there has been nothing exciting in the user interface world for desktop applications, though the web went through a fabulous UX (User Experience) change. Windows Forms that appeared with .NET was just a better version of old GUIs.
Now there is WPF with an entirely new set of features and technologies that makes it possible to define the UX of desktop application user to a new level. Of course Windows Forms will continue to be in the field, especially for LOB (Line Of Business) applications, but WPF can be used to make compelling data visualizations for applications that require a pleasing user experience.
Developing stunning applications in WPF is much easier than we might think of. In earlier technologies audio, video, etc were islands in an application. With WPF, a single API can be used for all of this. A video can be part of an application just like a button or label.
For example the below code snippet creates a Windows Vista Style Button with content as a playing video.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Button Height="100" Width="200">
<Button.Content>
<MediaElement Source="C:\Users\Public\Videos\Sample Videos\Butterfly.wmv" />
</Button.Content>
</Button>
</Page>

Tuesday, January 15, 2008
Playing with XAML
Years back, when I saw HTML in action for the first time I was completely amazed. With just a Notepad and Browser I could do wonders! It was the same feeling I had when I saw XAML in action during the TechEd 2005 at Bangalore. One of the speakers opened up something called XAML Pad and then typed in few tags and voila… it immediately rendered the windows controls! I wanted to experiment XAML then but the heavy SDK downloads and Beta version issues kept me from it. Now my new job at IdentityMine gives me plenty chances to play with XAML.
XAML or eXtensible Application Markup Language is a new declarative programming language that can be used to define the UI elements for latest .NET technologies like WPF (Windows Presentation Foundation) and Silverlight. It helps to separate the design from code, in an ASP.NET passion where the UI can be defined in XAML and the business logic can be implemented through the attached code behind files. Designers can now use the new tool called Expression Blend to design user interfaces without writing any code and the generated XAML can be used in Visual Studio by a developer to implement its business logic.
XAML is so easy to use. It’s just some tags and their attributes. Below is a screen shot from Visual Studio 2008 where XAML code is shown at the bottom and the rendering is shown at the top.

As shown in the image, a button can be defined by Button tag as below:
And in the code behind, we can write as below:
On running this code, it produces a nice Vista style button as shown below:

Easy way to learn XAML is by playing with it. You can use Notepad to create a file with .xaml extension and make sure you include your XAML controls within the Page tags as shown below:
Open this *.xaml file in Internet Explorer 7.0 or Fire Fox 2.0 or higher to see it rendered.If you don’t have Visual Studio 2008 installed, try tools like XAML Pad that comes with the SDK. It works as an independent tool even if you don’t have the SDK installed. Download it from here (it’s just 316 KB) and make sure you have .NET Framework 3.0 or higher installed.If you like to have color coding and intellisense plus few more cool features, download Kaxaml from http://www.kaxaml.com/
Of course you won’t be able to wire up code using these tools, but you can experiment a lot with XAML creating all kinds of fancy UI elements.
XAML or eXtensible Application Markup Language is a new declarative programming language that can be used to define the UI elements for latest .NET technologies like WPF (Windows Presentation Foundation) and Silverlight. It helps to separate the design from code, in an ASP.NET passion where the UI can be defined in XAML and the business logic can be implemented through the attached code behind files. Designers can now use the new tool called Expression Blend to design user interfaces without writing any code and the generated XAML can be used in Visual Studio by a developer to implement its business logic.
XAML is so easy to use. It’s just some tags and their attributes. Below is a screen shot from Visual Studio 2008 where XAML code is shown at the bottom and the rendering is shown at the top.

As shown in the image, a button can be defined by Button tag as below:
<Button Content="Click Me" Height="50" Width="100" Click="Button_Click"/>
And in the code behind, we can write as below:
private void Button_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Clicked!");
}
On running this code, it produces a nice Vista style button as shown below:

Easy way to learn XAML is by playing with it. You can use Notepad to create a file with .xaml extension and make sure you include your XAML controls within the Page tags as shown below:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Button Content="Click Me" Height="50" Width="100"/>
</Grid>
</Page>
Open this *.xaml file in Internet Explorer 7.0 or Fire Fox 2.0 or higher to see it rendered.If you don’t have Visual Studio 2008 installed, try tools like XAML Pad that comes with the SDK. It works as an independent tool even if you don’t have the SDK installed. Download it from here (it’s just 316 KB) and make sure you have .NET Framework 3.0 or higher installed.If you like to have color coding and intellisense plus few more cool features, download Kaxaml from http://www.kaxaml.com/
Of course you won’t be able to wire up code using these tools, but you can experiment a lot with XAML creating all kinds of fancy UI elements.
Subscribe to:
Posts (Atom)