Different Types of Triggers in WPF

Triggers are used to change the style of a control when control’s property value changes or event fires. Triggers create visual effects on controls. By using triggers you can also change the appearance of framework elements.

Types of Triggers in WPF

1. Property Trigger

   This trigger gets active when UIElements property value changes. The below Trigger is created on Button. It will set Opacity to 0.5 when Buttons IsPressed property change.
   

   
   <Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
    <Style.Triggers>
    <Trigger Property="IsPressed" Value="True">
    <Setter Property="Opacity" Value="0.5" />
    </Trigger>
    <Trigger Property="IsEnabled" Value="False">
    <Setter Property="Foreground" Value="Red" />
    </Trigger>
    </Style.Triggers>
   </Style>
   
   

2. Event Trigger

   This trigger gets active when RoutedEvent of FrameworkElement raise. Event Trigger is generally used to perform some animation on control like as colorAnimation, doubleAnumation using KeyFrame etc.
   The below trigger is used to animate/change the color property (SolidColorBrush, LinearGradientBrush ) of the UIElement at defined time duration.
   

   
   <Border Name="border1" Width="100" Height="30"
    BorderBrush="Black" BorderThickness="1">
    <Border.Background>
    <SolidColorBrush x:Name="MyBorder" Color="LightBlue" />
    </Border.Background>
    <Border.Triggers>
    <EventTrigger RoutedEvent="Mouse.MouseEnter">
    <BeginStoryboard>
    <Storyboard>
    <ColorAnimation Duration="0:0:1"
    Storyboard.TargetName="MyBorder"
    Storyboard.TargetProperty="Color"
    To="Gray" />
    </Storyboard>
    </BeginStoryboard>
    </EventTrigger>
    </Border.Triggers&
    gt;
   </Border>
   
   

3. Data Trigger

   This trigger gets active when Binding Data matches specified condition. Below DataTrigger is created on Picture property of binding data. Setter objects of the DataTrigger describes property values to apply when binding data match the condition. Picture is Byte[] property of the class. If Picture is null then DataTrigger applies on image to set image source to noImage.png, otherwise it will set image source from picture.
   Same as if picture is null, applies TextBlock value to "No Image Availalbe" and foreground color to red otherwise sets default value from data.
   

   
   <DataTemplate>
    <Grid Margin="0 5 0 0">
    <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Image x:Name="viewImage"
    Grid.Row="0" Width="100"
    Height="60" HorizontalAlignment="Center"
    Source="{Binding Picture}" Stretch="Fill" />
    <TextBlock x:Name="viewText"
    Grid.Row="1" Margin="0 5 0 0"
    HorizontalAlignment="Center"
    FontWeight="Black" Foreground="Green"
    Text="{Binding Title}" />
    </Grid>
    <DataTemplate.Triggers>
    <DataTrigger Binding="{Binding Path=Picture}" Value="{x:Null}">
    <Setter TargetName="viewImage" Property="Source" Value="/Images/noImage.png" />
    <Setter TargetName="viewText" Property="Text" Value="No Image Available" />
    <Setter TargetName="viewText" Property="Foreground" Value="Red" />
    </DataTrigger>
    </DataTemplate.Triggers>
   </DataTemplate>
   
   

   What do you think?

   I hope you will enjoy the tips while programming with WPF. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.
   

Different Types of Templates in WPF

WPF enables you to change the look and feel of the WPF controls and this is achieved by Templates. Templates are used to change the look and feel of a control in WPF.

Types of Templates

1. Control Template

   This template specifies the appearance of a Control; if a control does not have a Control Template, the Control will not appear in your application.
   For Example - When you will add the template defines as below to your application as a resource then all the buttons in the application will appear as ellipses but will still function as buttons.
   

   
   <Style TargetType="Button">
    <!--Set to true to not get any properties from the themes-->
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="Button">
    <Grid>
    <Ellipse Fill="{TemplateBinding Background}"/>
    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
   </Style>
   
   

2. Data Template

   This template specifies a group of characteristics for how data should be displayed. This template is particularly useful when you are binding an ItemsControl such as a ListBox to an entire collection.
   For Example – The Template defined as below, is used to display the items of a ListBox. The data template contains TextBlock controls that bind to the FirstName, LastName, and Address properties.
   

   
   >Grid>
    >Grid.Resources>
    >src:Customers x:Key="customers"/>
    >/Grid.Resources>
    >ListBox ItemsSource="{StaticResource customers}" Width="350" Margin="0,5,0,10">
    >ListBox.ItemTemplate>
    >DataTemplate>
    >StackPanel Orientation="Horizontal">
    >TextBlock Padding="5,0,5,0"
    Text="{Binding FirstName}" />
    >TextBlock Text="{Binding LastName}" />
    >TextBlock Text=", " />
    >TextBlock Text="{Binding Address}" />
    >/StackPanel>
    >/DataTemplate>
    >/ListBox.ItemTemplate>
    >/ListBox>
   >/Grid>
   
   

What do you think?

I hope you will enjoy the tips while programming with WPF. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Understanding WPF Architecture

Windows Presentation Framework is a next generation UI framework to create applications with a rich user experience. It is part of the .NET framework 3.0 and higher. WPF architecture is a layered architecture which have Managed, Unmanaged and Core API layers as shown in below fig.

1. Managed Layer

   Managed layer has two main components – Presentation Framework and Presentation Core.
   
   1. Presentation Framework provides the required functionalities that we need to build the WPF applications such as controls, data bindings, styling, shapes, media, documents, annotations, animation and more. PresentationFamework.dll is responsible for this purpose.
   2. Presentation Core acts as a managed wrapper around MILCore and provides public interface for MIL. Presentation Core is the home for WPF Visual System and provides classes for creating application visual tree. The Visual System creates visual tree which contains applications Visual Elements and rendering instructions. PresentationCore.dll is responsible for this purpose.

2. Unmanaged Layer

   This layer is also called milcore or Media Integration Library Core. MilCore is written in unmanaged code in order to enable tight integration with DirectX. DirectX engine is underlying technology used in WPF to display all graphics, allowing for efficient hardware and software rendering. MIL has Composition System that receives rendering instructions from Visual System and translates into data that can be understood by DirectX to render user interface.

3. Core API Layer

   This layer has OS core components like Kernel, User32, GDI, Device Drivers, Graphic cards etc. These components are used by the application to access low level APIs. User32 manages memory and process separation.

What do you think?

I hope you will enjoy the tips while programming with WPF. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Debugging Create React App Applications in Visual Studio Code

Creating a Starter Project

To be able to test an Create React App application, you need an Create React App application :) I'll provide the basic steps, but for more reference on how to get started look at the Create React App page.

First, you'll need to install the Create React App.

npm install -g create-react-app

After that finishes, you'll need to actually generate your new application. This will take a bit as it needs to install LOTS of NPM packages.

create-react-app my-app

Open the project in VS Code and you should see the following.

Create React App Project in VS Code

Now, that you've got your new fancy React app, go ahead and run it to make sure everything looks right.

npm start

Should look like this.

Create React App Project Running
Creating Debug Configuration

Assuming you've made it this far, we are ready to start debugging! Before we do, however, it's worth understanding how configuring debugging in VS Code works. Basically debug configurations are saved in a launch.json file which is stored inside of a .vscode folder. This .vscode folder is used to store different configurations for Code including our required debugging stuff.

Before you create your debug configuration, you need to install the Debugger for Chrome extension. Find and install this extension from the extension tab in VS Code. After installing, reload VS Code.

Debugger for Chrome

Now, to create a debug configuration, you can open the debug panel (the bug looking button on the left panel). At the top of the debug panel, you should see a dropdown that says "No Configurations".

Create Debug Configurations

To the right of that dropdown, there is a gear icon. Click this button to have VS Code automatically generate that .vscode folder and launch.json file mentioned above.

Then choose Chrome.

Choose Chrome Debug Configuration


You should get the following configuration created for you.

Create React App Debug Configuration

The only thing we need to do is update the port from 8080 to 3000.

Updated Create React App Debug Configuration
Let's Debug

Now we're ready! Go ahead and click the play button at the top of the Debug panel which will launch an instance of Chrome in debug mode. Keep in mind your app should already be running from using ng serve earlier. In VS Code, you should see the Debug toolbar pop up.

With this up and running, you can set a breakpoint in your App.js. Open up your App.js and add a breakpoint inside of the render function by clicking in the gutter (to the left of the line numbers). Should look like this.

Now, refresh debugging by clicking the refresh button on the debugging toolbar. This should open your application again and trigger this breakpoin. You should be directed back to VS Code directly to the place where you set your breakpoint.

From here, you can set more breakpoints, inspect variables, etc. If you are interested in learning more about debugging JavaScript in general in either Chrome or VS Code you can check out Debugging JavaScript in Chrome and Visual Studio Code.

Again, if you're interested in learning more about VS Code, you'll definitely want to check out the upcoming Learn VS Code course.

Introduction to WPF

Windows Presentation Framework is a next generation UI framework to create applications with a rich user experience. It is part of the .NET framework 3.0 and higher. It includes application UI, 2D graphics, 3D graphics and multimedia. It takes advantage of hardware acceleration of modern graphic cards. WPF makes the UI faster, scalable and resolution independent.

Features of WPF

The list of WPF features is given below –

1. Resolution Independence

   WPF is resolution independence since all measures in WPF are logical units not pixels. A logical unit is a 1/96 of an inch. So, with changing the screen resolution setting in WPF each control will look same for each resolution. It is not based on Dots per inch (DPI) setting of the device.

2. Separation of appearance and behaviours

   WPF separates the appearance of an UI from its behaviour. The appearance is specified by XAML and behaviour is specified by a managed programming language like C# or VB.

3. Built-In support for graphics and animation

   WPF applications run within DirectX environment, hence it has major support of graphics and animation capabilities. WPF has a separate set of classes that are specifically deal with animation effects and graphics.

4. Supports for Audio and Video

   WPF has support for playing any audio or video file supported by Windows Media Player. It also gives you the tools to integrate video content into your rich UI such as placing a video window on a spinning 3-D cube.

5. Highly customizable

   WPF supports separation of appearance and behaviours; hence you can easily change the look of a control or a set of controls. This concept of styling controls in WPF, is almost like CSS in HTML.
   In WPF, you can store styles, controls, animations, and even any object as a resource and you may associate that resource to the controls. Each resource is declared once when the form loads itself.

What do you think?

I hope you will enjoy the tips while programming with WPF. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.