DOTNET WPF XAML C# LISTBOX CONTROL MANOHAR GOUD TRAINER FACULTY GURU DEVELOPER

K MANOHAR GOUD

9866550012

DOTNET WPF XAML C# LISTBOX CONTROL

WPF has a wide range of controls in its toolbox, but Listbox is one of the important controls in WPF so far. They are easy to handle in both cases, whether you are assigning a value or binding the value. 

In Windows Forms, there are few gestures of the ListBox Control, but in WPF you have your own customs and rules. You can mold it in any way. That's what WPF is!



Here, we will see a basic example first.

Step 1 : Drag a ListBox Control onto your working window and resize it as needed.



Step 2 : In the XAML Window, the IDE has generated the code for you, as in the following:



Now, remove the "Closing Tag" (the forward slash) from the generated code and add </ListBox> to the next line. We will be adding our Values/ListBoxItems within that block.



Now, we have the similar window:



Step 3 : We will now add a few items to ListBox1.

In this format we have the ListBox structure.
<ListBox Height="218"…..><ListBoxItem>[ITEM 1]</ListBoxItem><ListBoxItem>[Item 2] Phone</ListBoxItem>.
.
.
.<ListBoxItem>[Item N]</ListBoxItem></ListBox>

From the code above we have, "ListBoxItem Tags are enclosed within the ListBox tag", always.

Note: That's the reason why we have removed that SELF CLOSED tag from the ListBox.

And, by default, every control has that Self-Closed Tag.

Step 4 : Add the following Yellow Code to your XAML window.



In your Design Window you are supposed to get this:



Step 5 : We have already populated the listBox.

Next, we will code the "ListBoxItem Selection" and this can be done by programming the "Selection Event".

So, double-click on any ListBoxItem (it would be Android, Window Phone 8… anything).

Note: By doing this, the IDE will generate the Selection Event for that List Box.



Now, put whatever you want in it. I prefer the Message Box.

In that code, I have passed a single argument as a String (in other words ListBox1.SelectedItem.ToString()) that will return the Selected value.

Here, ListBox1 is the name of the ListBox that you can see in the XAML/Properties/Status Bar.



From here, we will go for a Dynamic ListBox, where we will bind the value, in other words Data Binding, in the List Box and customize the List Box with images and fonts.

DOTNET WPF XAML C# USING DATACONTEXT MANOHAR GOUD TRAINER FACULTY GURU DEVELOPER

K. MANOHAR GOUD

9866550012

DOTNET WPF XAML C# USING DATACONTEXT

The DataContext property sets the basis of all binding down through the hierarchy of controls .This saves you from the problem of manually defining the source of each binding, hence it saves time. Rather than defining the source multiple times for binding. It also improves object oriented code readability.

Let's try illustrating it with a simple example.

Step 1 

First we create a WPF application using the following procedure:

• Open Visual Studio.
• Select the C# language and "WPF Application".
• Name the project "DataContext".
• Click on the "OK" button.

Step 2

• Now go to the MainWindow.xaml.
• Delete the Grid tag.
• Write the following code in MainWindow.xaml:

<Window x:Class="WpfApplication14.MainWindow"

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

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

        Title="MainWindow" Height="350" Width="525">

    <StackPanel Margin="15" Width="452" Background="#FFDED022">

        <WrapPanel>

            <Label Content ="Window Title:  " />

            <TextBox Text="{Binding Title, UpdateSourceTrigger=PropertyChanged}" Width="200" />

        </WrapPanel>

        <WrapPanel Margin="0,10,0,0">

            <Label Content="Window Dimensions: " />

            <TextBox Text="{Binding Width}" Width="100" />

            <Label Content =" x " />

            <TextBox Text="{Binding Height}" Width="100" />

        </WrapPanel>

    </StackPanel>

</Window>

• Corresponding to the code above the window looks as:

Step 3

• Now go to the MainWindow.xaml.cs.
• Write the following code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

namespace WpfApplication14

{

    /// <summary>

    /// Interaction logic for MainWindow.xaml

    /// </summary>

    public partial class MainWindow : Window

    {

      

  

     public MainWindow()

                {

                        InitializeComponent();

                        this.DataContext = this;

                }

        }

}

Output 

Press F5.

  
 

DOTNET WPF XAML C# KEYSSPLINE ANIMATION of IMAGES MANOHAR GOUD

K. MANOHAR GOUD

9866550012

WPF Using the XAML - Keyspline Animation of Images:

Step 1 

First we create a WPF application using the following procedure:

• Open the Visual Studio.
• Select the C# language and "WPF" application.
• Name the project as "Animation".
• Click on the "OK" button.

Step 2

• Go to the "View" -> "Toolbox".
• The toolbox opens in the left corner of the window.
• Then drag and drop a rectangle onto the design view.

• Now go to the MainWindow.xaml and write the following code between the rectangle1 tags:

       <Rectangle

  Name="SplineElement"

  Height="200"

  Width="200" Grid.Row="3"

  HorizontalAlignment="Left"

            >

            <Rectangle.Fill>

                <ImageBrush ImageSource="C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg"/>

            </Rectangle.Fill>

         

            <Rectangle.RenderTransform>

                <TranslateTransform x:Name="SplineTrans" X="0" Y="0" />

            </Rectangle.RenderTransform>

            <Rectangle.Triggers>

                <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">

                    <EventTrigger.Actions>

                        <BeginStoryboard>

                            <Storyboard>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans"

          Storyboard.TargetProperty="X"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans"

          Storyboard.TargetProperty="Y"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame

            Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                            </Storyboard>

                        </BeginStoryboard>

                    </EventTrigger.Actions>

                </EventTrigger>

            </Rectangle.Triggers>

        </Rectangle>

 Step 3

• Now again go to the View-> "Toolbox" and Drag and Drop the rectangle on the design view.
• Then again go to the MainWindow.xaml and write the following code between the rectangle2 tags:

  <Rectangle

             Name="SplineElement1"

  Height="200"

  Width="200" Grid.Row="1"

  HorizontalAlignment="Left">

            <Rectangle.Fill>

                <ImageBrush ImageSource="C:\Users\Public\Pictures\Sample Pictures\index.jpg"/>

            </Rectangle.Fill>

            <Rectangle.RenderTransform>

                <TranslateTransform x:Name="SplineTrans1" X="0" Y="0" />

            </Rectangle.RenderTransform>

            <Rectangle.Triggers>

                <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">

                    <EventTrigger.Actions>

                        <BeginStoryboard>

                            <Storyboard>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans1"

          Storyboard.TargetProperty="X"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans"

          Storyboard.TargetProperty="Y"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame

            Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                            </Storyboard>

                        </BeginStoryboard>

                    </EventTrigger.Actions>

                </EventTrigger>

            </Rectangle.Triggers>

        </Rectangle>

• Now the final source code of the MainWindow.xaml is:

<Window x:Class="Moving_elements.MainWindow"

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

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

        Title="MainWindow" Height="390" Width="525">

    <Grid Background="#FF807C50">

        <Rectangle

  Name="SplineElement"

  Height="200"

  Width="200" Grid.Row="3"

  HorizontalAlignment="Left"

            >

            <Rectangle.Fill>

                <ImageBrush ImageSource="C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg"/>

            </Rectangle.Fill>

         

            <Rectangle.RenderTransform>

                <TranslateTransform x:Name="SplineTrans" X="0" Y="0" />

            </Rectangle.RenderTransform>

            <Rectangle.Triggers>

                <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">

                    <EventTrigger.Actions>

                        <BeginStoryboard>

                            <Storyboard>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans"

          Storyboard.TargetProperty="X"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans"

          Storyboard.TargetProperty="Y"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame

            Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                            </Storyboard>

                        </BeginStoryboard>

                    </EventTrigger.Actions>

                </EventTrigger>

            </Rectangle.Triggers>

        </Rectangle>

        <Rectangle

             Name="SplineElement1"

  Height="200"

  Width="200" Grid.Row="1"

  HorizontalAlignment="Left">

            <Rectangle.Fill>

                <ImageBrush ImageSource="C:\Users\Public\Pictures\Sample Pictures\index.jpg"/>

            </Rectangle.Fill>

            <Rectangle.RenderTransform>

                <TranslateTransform x:Name="SplineTrans1" X="0" Y="0" />

            </Rectangle.RenderTransform>

            <Rectangle.Triggers>

                <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">

                    <EventTrigger.Actions>

                        <BeginStoryboard>

                            <Storyboard>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans1"

          Storyboard.TargetProperty="X"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans"

          Storyboard.TargetProperty="Y"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame

            Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                            </Storyboard>

                        </BeginStoryboard>

                    </EventTrigger.Actions>

                </EventTrigger>

            </Rectangle.Triggers>

        </Rectangle>

    </Grid>

</Window>

Output 

Now press F5.

Now click on the image:

 

 Images move slowly in a curved path at a certain distance: