TRANSFORMATIONS

Render Transformation with the help of a slider.

1. Open visual studio (above ver. 2.0 )->File->New->Project
2. Select appropiate application type (Window/Page).
3. Create a root tag <stackPanel> under Window/Page tag , remove already given <grid> tag
4. Create a grid with 3 rows and 3 columns under Border Tag like this.
<StackPanel>
<Border BorderThickness="8"  BorderBrush="SkyBlue" CornerRadius="20">
            <Grid Width="275" Margin="2.5" Height="77">
                <Grid.RowDefinitions>
                    <RowDefinition Height="28*" />
                    <RowDefinition Height="23*" />
                    <RowDefinition Height="26*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="66*" />
                    <ColumnDefinition Width="128*" />
                    <ColumnDefinition Width="81*" />
                </Grid.ColumnDefinitions>
</Grid>
 </Border>  
4. Now, place three labels,three sliders and three textBoxes in between the closing tag  </grid.ColumnDefinitions> and </grid>
where,
label1 with text "For Rotate Transform" under first row and first column i.e grid.Row=0,grid.Column=0.
label2 with text "set x axis" under fsecond row and first column i.e grid.Row=1,grid.Column=0.
label2 with text "set y axis" under third row and first column i.e grid.Row=2,grid.Column=0.
               
e.g.
 <Label Content="For rotate transform" Grid.ColumnSpan="2" Margin="0,0,74,0" />
                <Slider  TickFrequency="2" Name="slider" Maximum="360" Minimum="-360" Grid.Column="1" />
                <TextBox Text="{Binding ElementName=slider,Path=Value}"  Grid.Column="2" Grid.ColumnSpan="2" Margin="20,0,0,0" />
                <Label Content="Set X Axis" Grid.Row="1" Margin="0,0,28,0" />
                <Slider IsSnapToTickEnabled="True" TickFrequency="2" Name="xslider" Maximum="360" Minimum="-360" Grid.Row="1" Grid.Column="1" />
                <TextBox Grid.Row="1" Text="{Binding ElementName=xslider,Path=Value}"  Grid.Column="2" Grid.ColumnSpan="2" Margin="20,0,0,0" />
                <Label Content="Set Y Axis" Grid.Row="2" Margin="0,0,28,0" />
                <Slider IsSnapToTickEnabled="True" TickFrequency="2" Name="yslider" Maximum="360" Minimum="-360" Grid.Row="2" Grid.Column="1" />
                <TextBox Grid.Row="2" Text="{Binding ElementName=yslider,Path=Value}"  Grid.Column="2" Grid.ColumnSpan="2" Margin="20,0,0,0" />
            </Grid>
Grid.Row="2" Text="{Binding ElementName=yslider,Path=Value}"  Grid.Column="3" />
            </Grid>
note:
Slider's attribute :
IsSnapToTickEnabled="True" , if u make this property false then you will get decimal values for cordinate in textbox
TickFrequency="2" ,  specifies the step value(increment value ) .


5. Place the following component under closing </border> Tag and   </StackPanel>tag. Two Labels , one for showing demo of RotateTransform ( rotate acc to the value specified by sliders) and other shows TranslateTransform ( to move label acc to x cordinate and y cordinate provided by slider) and the last one is ellipse to demostrate the example of skew Transformation.

 RotateTransform:

<Label Content="RotateTransform " FontFamily="Bell MT" FontSize="20" Height="33" Width="178">
            <Label.RenderTransform>
                <RotateTransform CenterY="{Binding ElementName=xslider,Path=Value}" CenterX="{Binding ElementName=xslider,Path=Value}" Angle="{Binding ElementName=slider,Path=Value}"/>
            </Label.RenderTransform>
        </Label>

TransLateTransform:

<Label Content="TranslateTransform " FontFamily="Bell MT" FontSize="20" Height="33" Width="178">
            <Label.RenderTransform>
                <TranslateTransform X="{Binding Path=Value, ElementName=xslider}" Y="{Binding Path=Value, ElementName=yslider}"/>
                </Label.RenderTransform>
        </Label>

SkewTransform:

<Ellipse Fill="pink" Height="85" Width="241">
            <Ellipse.Effect>
                <DropShadowEffect BlurRadius="10" ShadowDepth="11" Color="CadetBlue">       </DropShadowEffect>
            </Ellipse.Effect>
            <Ellipse.RenderTransform>
                <SkewTransform
CenterX="{Binding Path=Value, ElementName=xslider}"
CenterY="{Binding Path=Value, ElementName=yslider}"
AngleX="{Binding Path=Value, ElementName=xslider}"
AngleY="{Binding Path=Value, ElementName=yslider}"
/>
            </Ellipse.RenderTransform>
        </Ellipse>
</Window>

6.Now run (F5) to see  the effects by moving the sliders.

Note :

The TranslateTransform is one of the simplest transformations you can perform.The TranslateTransform simply moves (translates)
an element along a two-dimensional X and Y axis. A positive X value moves the element to the right; a negative value moves it to the left. Similarly, a positive Y value moves the element down, and a negative value moves it up. This is really an offset from the element’s original position. TranslateTransform is really just a convenience wrapper for setting the OffsetX and OffsetY properties
of the transform Matrix structure.

Host WPF Control in Window Form

1. Add reference of the PresentationCore , PresentationFramework,WindowsFormsIntegration,IO your window Application's references folder.

2 Add following reference sto your code behind file.
using WPFControls = System.Windows.Controls;
using System.Windows.Forms.Integration;
using System.Windows.Markup;
WHERE,
System.Windows.Markup contains XamlReader file which is used to read the XAML file you have create for adding component.
System.Windows.Forms.Integration is used to host a WPF control .

3. addionally, you have to create a .xaml file in which you have place the code to create a control using WPF,and also you have to add this file to your project.
e.g here is the sample code for button.xaml file
<Button
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
VerticalAlignment="Bottom"
Grid.Column="0"
Grid.ColumnSpan="1"
Grid.Row="0"
Grid.RowSpan="1"
Margin="19,0,139,18.5" Name="button1"
Foreground="black" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="34" d:DesignWidth="127">
    <Button.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFF0F0F0" Offset="0" />
            <GradientStop Color="#FFF8F2F2" Offset="0.553" />
            <GradientStop Color="#FF9E9A9A" Offset="1" />
            <GradientStop Color="White" Offset="0.65" />
            <GradientStop Color="#FE97AFE7" Offset="0.106" />
        </LinearGradientBrush>
    </Button.Background>
    <Button.Effect>
            <DropShadowEffect ShadowDepth="1" Color="green" BlurRadius="8"/>
        </Button.Effect>
    Hello from WPF Button
 
</Button>

4. Copy the following mention code under under a button 's Click event on your Win form .
  FileStream xamlFile = null;
                        using (xamlFile = new FileStream(FileName, FileMode.Open, FileAccess.Read))
            {
                //parsing the xaml file into object
                object xamlObject = XamlReader.Load(xamlFile);
                if (xamlObject.GetType() == typeof(WPFControls.Button))
                {
                    wpfButton = (WPFControls.Button)xamlObject;
//allocate memory to th Element Host
                    ctrlHost = new ElementHost();
                    ctrlHost.Dock = DockStyle.Fill;
//add host to the parent
                    panel1.Controls.Add(ctrlHost);
                    (Assign the document viewer to the host)
                    ctrlHost.Child = wpfButton;
                }
            }

where,
 FileName is the reference of button.xaml File

5. here you have done!!.
6. press f5 and run your application.

Why WPF ?

Separation of Appearance and Behavior 

WPF separates the appearance of an user interface from its behavior. The appearance is generally specified in the Extensible Application Markup Language (XAML), the behavior is implemented in a managed programming language like C# or Visual Basic. The two parts are tied together by databinding, events and commands. The separation of appearance and behavior brings the following benefits: 

Appearance and behaviour are loosely coupled 

Designers and developers can work on separate models. 

Graphical design tools can work on simple XML documents instead of parsing code. 

Rich composition 

Controls in WPF are extremely composable. You can define almost any type of controls as content of another. Although these flexibility sounds horrible to designers, its a very powerful feature if you use it appropriate. Put an image into a button to create an image button, or put a list of videos into a combobox to choose a video file. <Button> 

<StackPanel Orientation="Horizontal">

 <Image Source="speaker.png" Stretch="Uniform"/> 

<TextBlock Text="Play Sound" /> 

</StackPanel>

</Button> 

Highly customizable 

Because of the strict separation of appearance and behavior you can easily change the look of a control. The concept of styles let you skin controls almost like CSS in HTML. Templates let you replace the entire appearance of a control. The following example shows an default WPF button and a customized button. 

Resolution independence 

All measures in WPF are logical units - not pixels. A logical unit is a 1/96 of an inch. If you increase the resolution of your screen, the user interface stays the same size - if just gets crispier. Since WPF builds on a vector based rendering engine its incredibly easy to build scaleable user interfaces.  

About Wpf

What is  Windows Presentation Foundation ?
Developed by Microsoft, the Windows Presentation Foundation (or WPF) is a computer-software graphical subsystem for rendering user interfaces in Windows-based applications. WPF, previously known as "Avalon", was initially released as part of .NET Framework 3.0. Rather than relying on the older GDI subsystem, WPF utilizes DirectX. WPF attempts to provide a consistent programming model for building applications and provides a separation between the user interface and the business logic.
WPF employs XAML, an XML-based language, to define and link various UI elements. WPF applications can also be deployed as standalone desktop programs, or hosted as an embedded object in a website. WPF aims to unify a number of common user interface elements, such as 2D/3D rendering, fixed and adaptive documents, typography, vector graphics, runtime animation, and pre-rendered media. These elements can then be linked and manipulated based on various events, user interactions, and data bindings.


What is BAML  ?
BAML, which stands for Binary Application Markup Language, BAML is not like Microsoft intermediate language (MSIL); it is a compressed declarative format that is faster to load and parse (and smaller in size) than plain XAML.
BAML is just an implementation detail of the XAML compilation process without any direct public exposure, so it could be replaced with something different in the future

Extract Date with Customized ListView

Lets us see an example in which day, Month,Year are extracted from the specifid date u have have provided to the listview,for implementing the same you have to customized the litviewBox.

1. You have to add reference of system's mscorlib assembly on your xaml page.
e.g.   xmlns:sys="clr-namespace:System;assembly=mscorlib"
    where sys is just the prefix name

2.  Add the ListView tag
e.g.    <ListView x:Name="lst"  Height="110" Width="291">
            </ListView>
where lst is simple the name which reference the ListView.

3. Now Change the View listView similar to a gridView by adding the following code under
   above mentioned ListView tag
       e.g   <ListView x:Name="lst"  Height="110" Width="291">
          <ListView.View>
          <GridView>
                  <GridViewColumn Header="date"/>
                  <GridViewColumn Header="day" DisplayMemberBinding="{Binding DayOfWeek}"/>
                  <GridViewColumn Header="year" DisplayMemberBinding="{Binding Year}"/>
                  <GridViewColumn Header="dayno" DisplayMemberBinding="{Binding Day}"/>
                    <GridViewColumn Header="month no" DisplayMemberBinding="{Binding Month}"/>
                      </GridView>
            </ListView.View>
           </ListView>

  where header attribute of GridViewColumn specifies the column nameand   DisplayMemberBinding attribute of  GridViewColumn is
  used to bind the value of the column

4. Now at last put some static value after ListView.view's Closing tag under ListView tag
e.g. <ListView x:Name="lst"  Height="110" Width="291">

            <ListView.View>
                <GridView>

                    <GridViewColumn Header="date"/>
                    <GridViewColumn Header="day" DisplayMemberBinding="{Binding DayOfWeek}"/>
                    <GridViewColumn Header="year" DisplayMemberBinding="{Binding Year}"/>
                    <GridViewColumn Header="dayno" DisplayMemberBinding="{Binding Day}"/>
                    <GridViewColumn Header="month no" DisplayMemberBinding="{Binding Month}"/>

                </GridView>
            </ListView.View>
            <sys:DateTime>02/05/2024</sys:DateTime>
            <sys:DateTime>03/06/2014</sys:DateTime>
            <sys:DateTime>04/07/2034</sys:DateTime>
            <sys:DateTime>05/08/2002</sys:DateTime>

        </ListView>


5. And here you have done, press f5 to run  your appplication,

___________________________________
note :  Here is complete code .
<Window Name="a" x:Class="WpfApplication1.animation"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="animation" Height="329" Width="457" Loaded="Window_Loaded">
    <Grid>
       <ListView x:Name="lst"  Height="110" Width="291">
           <ListView.View>
               <GridView>
                   <GridViewColumn Header="date"/>
                   <GridViewColumn Header="day" DisplayMemberBinding="{Binding DayOfWeek}"/>
                   <GridViewColumn Header="year" DisplayMemberBinding="{Binding Year}"/>
                   <GridViewColumn Header="dayno" DisplayMemberBinding="{Binding Day}"/>
                   <GridViewColumn Header="month no" DisplayMemberBinding="{Binding Month}"/>
               </GridView>
           </ListView.View>
            <sys:DateTime>02/05/2024</sys:DateTime>
            <sys:DateTime>03/06/2014</sys:DateTime>
            <sys:DateTime>04/07/2034</sys:DateTime>
            <sys:DateTime>05/08/2002</sys:DateTime>
        </ListView>
    </Grid>
</Window>

Binding canvas with ComboBox

# Here is an Sample Application in which canvas's backgroundColor  is binded with ComboBox. when you select a color from comboBox, canvas changes its backColor accordingly,and textBox shows  name of the color.



<Page x:Class="WpfApplication1.databinding"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="databinding">
    <StackPanel Height="221" Width="423">
        <StackPanel.Background>
            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                <GradientStop Color="#FFEBEBEB" Offset="0.94" />
                <GradientStop Color="#31FFFFFF" Offset="0" />
                <GradientStop Color="Black" Offset="1" />
                <GradientStop Color="#FFBBBBBB" Offset="0.892" />
            </LinearGradientBrush>
        </StackPanel.Background>
        <TextBlock FontFamily="AvantGarde Bk BT" FontSize="15"><TextBlock.BitmapEffect><DropShadowBitmapEffect /></TextBlock.BitmapEffect>Color in combobox</TextBlock>
        <ComboBox FontFamily="AvantGarde Bk BT" x:Name="color" Height="25" Width="152" SelectedIndex="0">
            <ComboBox.BitmapEffect>
                <DropShadowBitmapEffect />
                </ComboBox.BitmapEffect>
                <ComboBoxItem>Green</ComboBoxItem>
                <ComboBoxItem>LightBlue</ComboBoxItem>
                <ComboBoxItem>Red</ComboBoxItem>
       </ComboBox>
        <Canvas Background="{Binding ElementName=color,Path=SelectedItem.Content}" Height="60" Width="252">
            <!--    <Canvas.LayoutTransform>
            <RotateTransform Angle="-20" CenterX="10" CenterY="0" ></RotateTransform>
            </Canvas.LayoutTransform>-->
            <Canvas.BitmapEffect>
                <DropShadowBitmapEffect />
            </Canvas.BitmapEffect>
            </Canvas>
        <TextBlock Foreground="{Binding ElementName=color,Path=SelectItem.Content}" VerticalAlignment="Center" HorizontalAlignment="Center" x:Name="hi" Text="{Binding ElementName=color,Path=SelectedItem.Content}" FontSize="13"><TextBlock.BitmapEffect><DropShadowBitmapEffect /></TextBlock.BitmapEffect> </TextBlock>
    </StackPanel>
</Page>