Wednesday, May 30, 2007

Map 2D mouse co-ordinate to 3D surface of Viewport3D

http://viewport3d.com/trackball.htm

Tuesday, May 22, 2007

Commenting XAML elements

Normally if you want to comment a particular element (Button.Content)in the tag like the below one,usually select the element and select the comment option from VS toolbar or menu.
This works with c# code .But wont with xaml.It produces a compilation error.

<Button Name="btn" Content="Hai" Click="clicked"/>

TO get rid of this use as follows

<Window x:Class="BlendControl.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="BlendControl"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:c="Comments"
mc:Ignorable="c"
>
<StackPanel >
<Button Name="btn" c:Content="Hai" Click="clicked"/>
</StackPanel>
</Window>

This nicely comment the Content element.

Vista V/S Linux

Just see a comparison


Accociate schema to custom namespaces

If we analyze a xaml file we could see 2 lines at the beggining.

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

These lines map the namespaces to xaml file.Whenever we need to refer our own custom dll we often use the following format .

xmlns:mycontrols="clr-namespace:MyControls;assembly=MyControls"

We could also use the URL type mapping for our own controls.For this we need to include the following 3 lines in the Assemblyinfo.cs file of our custom dll.

  • Add a reference to using System.Windows.Markup;
  • Add 2 attributes

[assembly: XmlnsPrefix("http://schemas.joymon.com/mycontrols", "mycontrols")]
[assembly: XmlnsDefinition("http://schemas.joymon.com/mycontrols", "MyControls")]

Now you could use like the following in your xaml file to refer custom dll

xmlns:mycontrols="http://schemas.joymon.com/mycontrols"

A sample here

Thursday, May 17, 2007

Creating Custom property editors for Blend & Orcas

Explaining how to create custom property editors for Blend & Orcas using WPF features.

Requirements
  • A latest version of Blend.Preferably May 2007 CTP
  • Microsoft's new design dll .This is in .net3.5.You may also use this with 3.0.

I am taking famous Clock control from codeproject and implementing the custom property editor

Steps

  1. Get the sample from code project.
  2. Open the sample and make a reference to new design dll.If you already have orcas 1(3.5) it would be in your machine.Else download from here.
  3. Prepare the DataTemplate of the property editor.Better save in the generic.xaml file itself.An eg given below


    <DataTemplate x:Key="TimeEditorDataTemplate">
    <Grid>
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>>
    <TextBox Text="{Binding Path=Value, Mode=TwoWay}"/>
    <PropertyEditing:EditModeSwitchButton Grid.Column="1" Content="Change"/>
    </Grid>
    </DataTemplate>

  4. Create our own editor by inheriting from Microsoft.Windows.Design.PropertyEditing.DialogPropertyValueEditor
  5. Set the DataTemplates..See the below code

    public class TimeEditor : Microsoft.Windows.Design.PropertyEditing.DialogPropertyValueEditor {

    public TimeEditor(): base() {
    //This is to get the DataTemplate of editor from generic.xaml file Uri

    resourceLocator = new Uri("MyControls" + @";component/themes/generic.xaml", UriKind.RelativeOrAbsolute);
    ResourceDictionary rd = (ResourceDictionary)Application.LoadComponent(resourceLocator);
    DataTemplate dt = rd["TimeEditorDataTemplate"] as DataTemplate;
    this.InlineEditorTemplate = dt;
    this.DialogEditorTemplate = dt; } }

  6. Now set the editor into desired property


    [Editor(typeof(TimeEditor), typeof(DialogPropertyValueEditor))]
    public DateTime MyTime {
    get{ return (DateTime) GetValue(MyTimeProperty); }
    set{ SetValue(MyTimeProperty, value); }
    }

  7. Yes.Thats it.Instantiate your control in Blend and see the PROPERTYEDITOR

Download full sample here

Its a great design time experience with designers (Visusl studio ExpressionBlend). Right?

More details

http://blogs.msdn.com/jnak/archive/2007/08/10/adding-design-time-metadata-to-cider-and-blend.aspx

Monday, May 14, 2007

Videos showing Power of WPF

INK Features






WPF 3D





Yahoo messenger for Vista



http://video.google.com/videoplay?docid=8775170776607857561&q=wpf

http://video.google.com/videoplay?docid=1536259699335459617&q=wpf

Writing C# inside XAML

<Grid >

<Button Name="button1" Click="Clicked" Content="Click Me!"/>
<x:Code>
<![CDATA[
void Clicked(object sender, RoutedEventArgs e)
{
button1.Content = "Hello World";
}
]]>
</x:Code>

</Grid>

Friday, May 11, 2007

Prototype of Next gen 3D Desktop using WPF

A model of windows desktop which may arrive in the near future using the WPF technology

Thursday, May 10, 2007

Difference Vector graphics & Raster graphics

Raster graphics stores the image as pixel array and when resizing it resizes that image.Quality loss is the result like photoshop resizing.
Vector graphics stores the image as data (how to draw an image) and scales that data and draws when needed .So no quality loss.

Wednesday, May 9, 2007

How to know the current rendering mode of WPF application?

Check the value (System.Windows.Media.RenderCapability.Tier >>16 ) .Results are given as follows
  • 0-Software rendering
  • 1-Partial rendering
  • 2-Hardware rendering

According to this we could load different Resources(which contain styles & templates) in order to maintain same performance in different machines.

Some great WPF applications..

WPF 3D
  1. http://www.chriscavanagh.com/Chris/CJC.Bullet/BulletDemo1.xbap Dropping balls and cubes from the top and they get their right place according to gravity/available space.
  2. http://yousef.dardiry.com/files/WPF_Earth/XBAP/WPF%20Earth%20XBAP.xbap Virtual earth
  3. http://www.asahiyamazoo-aict.jp/asahiyamazoo.xbap Mother earth
  4. http://150.101.100.238/~john/TestApplicationWeb/Swordfish.WinFX.TestApplicationWeb.xbap Chart
  5. http://wpf.netfx3.com/direct/wpfbookcontrol/publish.htm Book control demo.
  6. http://www.ergotinfo.fr/architecture/files/FishAnimation.xbap
  7. http://envision.bhg.com/xbap/Envisioning.Browse.xbap
  8. http://files.skyscrapr.net/users/ContentMap/SocialNetWorkWPF.xbap
  9. http://sawdust.com/p1/bin/sdwba.xbap

Tuesday, May 8, 2007

Target an inner element from setter

Consider a scenario where we need to change the second color of a gradient on mouse over.The normal solution will be as follows.

<Button>
<Button.Template>
<ControlTemplate TargetType="Button">
<Rectangle Width='60' Height='40' x:Name='MyRectangle'>
<Rectangle.Fill>
<LinearGradientBrush >
<GradientStop Color='Red' />
<GradientStop Color='Blue' Offset='1' x:Name='SecondStop' />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName='MyRectangle' Property="Fill" >
<Setter.Value>
<LinearGradientBrush >
<GradientStop Color='Red' />
<GradientStop Color='Green' Offset='1' />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>

If we folllow this method we need to write the same code twice.If there is a method to change the value of second color directly,it would be more easier to code.The below code does it with the help of binding.


<Button>
<Button.Template>
<ControlTemplate TargetType="Button">
<Rectangle Width='60' Height='40' x:Name='MyRectangle'>

<Rectangle.Tag>
<Color>Blue</Color>
</Rectangle.Tag>

<Rectangle.Fill>
<LinearGradientBrush >
<GradientStop Color='Red' />
<GradientStop Color='{Binding ElementName=MyRectangle, Path=Tag}' Offset='1' x:Name='SecondStop' />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName='MyRectangle' Property="Tag" Value="Green" >
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>

Thursday, May 3, 2007

Advantages of WPF & .net3

Some advantages of WPF ,I found while working with WPF
  1. Cool applications in less time.
  2. Effective use of Graphics card.Highly suitable for high end /upcoming computers.
  3. We can create 3D scenes very easily.(Using ViewPort3D)
  4. Databinding
  5. Built in Animation
  6. Templates & Styles
  7. Resource management
  8. Content control mechanism.
  9. XAML(Designer and developer can work independently)
  10. XBAP
  11. Silverlight (WPF/e)
  12. Same programming model for windows & web
  13. Retained mode graphics (No need to draw in the OnPaint event.Everything automatic)
  14. Supports most of the media/document formats natively

Disadvantages

  1. WPF/e doesnt have support to add controls in it.Hope they implement it soon.
  2. We need to go for another software (Blend)if we want to design a good looking interface.VS should have all the facilities what Blend does now.
  3. No MDI child mode.