March 2009



Hi guys,
I want to introduce you to two .NET classes used to identify the screen resolution and also to handling the change of screen resolution:

  • SystemParameters: allow you to retrive a lot of useful system information, including the screen size. In the specific case the screen size is SystemParameters.PrimaryScreenWidth and SystemParameters.PrimaryScreenHeight
  • SystemEvents: this class contains a lot of useful events that allow you to be notifyed about useful system changes.  In the specific case the event SystemEvents.DisplaySettingsChanged is raised every time the screen resolution chage.

The following example code illustrates how to use them:

public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();

ShowScreenResolution();

SystemEvents.DisplaySettingsChanged +=
new EventHandler(SystemEvents_DisplaySettingsChanged);
}

void SystemEvents_DisplaySettingsChanged(object sender, EventArgs e)
{
this.ShowScreenResolution();
}

private void ShowScreenResolution()
{
MessageBox.Show(String.Format("Screen Resolution: {0}x{1}",
SystemParameters.PrimaryScreenWidth,
SystemParameters.PrimaryScreenHeight));

}
}

Hi,
today I’m writing about “paper crafts”, a very interesting hobby at no cost. Paper Crafts consists in doing realistic model-making made in paper,  glue and a small amount of ink in case you want your models be more realistic. All paper crafts models are provided as one or more pdf documents. Some pdf explain in greater details how to realize your model, while the others pdf contain all parts that should be printed on paper to make your model.

The best web-site I found containing paper crafts is the following: http://www.yamaha-motor.co.jp/global/entertainment/papercraft/

Here we are some youtube video illustrating paper crafts:


What you have to do for specifying a background color for highlighting an item of a ListView is simply add to your <ListView.Resources> the following SolidColorBrush:

        <ListView ScrollViewer.VerticalScrollBarVisibility="Visible"
                  x:Name="myListView"
                  ItemsSource="{Binding Path=myFileCollection}">

            <ListView.Resources>
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
                                 Color="OrangeRed"/>
                <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}"
                                 Color="Orange"/>
            </ListView.Resources>

        </ListView>

The first SolidColorBrush overrides the Windoes Highlight Brush for indicating a selected item having the focus. The second SolidColorBrush is used for overriding the default Windows Brush used for indicating a selected item that doesn’t have a focus.


Hi,
I have the pleasure to let you know two interesting Microsoft Visual Studio 2010 ScreenCasts taken from channel9 msdn. These videos are focused on the two of the mains VS2010 improvements: the Historical Debugger and the Test Planning using Camano. Take a look to my previous post if you want more information and screenshots of VS2010.

The Historical Debugger is a new VS2010 facility for allowing the developers to go back in the stack after an exception has been accurred in the application. Of course, this functionality was also present in VS2008 but the improvement provided by Historical Debugger is that it is able to record everything the application done, including all the events handled and a simple double click, on every recorded thing, results in open the source code allowing the developers to see the values of all variabiles back in the time!

The Camano is a Test Suite Application included in Visual Studio 2010 Team Edition that help developers more easily reproducing bugs by delivering snapshots of those virtualized environments after bugs are discovered! This is a very powerful functionality for increasing the collaboration between developers and testers. The devolper can go back in the environment before the bug was descoverd and then he can easily reproduce the bug.


Hi guys!
Today I am going to explain how completely customizing a WPF ListView in your applications using an XML configuration File.

The Source File in VS2008 is available HERE .

The Sample Application

The Application I developed simply displays a list of Files describing the name, the extension and the size. The amazing feature is that the displayed columns and the individual styles of columns are configurable from an xml file!
The Application looks like the following:

application
And here you can take a look at the configuration file:

xml-file
As you can see all the displayed columns are configured into the XML file and for each columns the Style to be used is configured as well. The xml file describes the following configuration:  the FileName displayed in an editable TextBox, the FileExtension displayed as text, the KBSize displayed as text as well, the FileExtension again but displayed with icons, the KBSize again but displayed with a green circle for smaller files and displayed with a red circle for largest files.

How To

In the next sections are described the steps for building the Sample Application.

1. Deserializing the XML File (using XSD.EXE tool)

In order to develop the application as fast as possible I used the xsd.exe tool which is capable to automatically generate a C# source file from an xsd schema. The source file generated is able to represent an xml file content conform to the described schema file.
The xsd schema describing the configuration file we want is the following:

<xs:schema xmlns:mstns="http://tempuri.org/MyCustomizedColumns.xsd"
           elementFormDefault="qualified"
           targetNamespace="http://tempuri.org/MyCustomizedColumns.xsd"
           id="MyCustomizedColumns"
           xmlns:xs="http://www.w3.org/2001/XMLSchema">

  <xs:simpleType name="CellStyles">
    <xs:restriction base="xs:string">
      <xs:enumeration value="SimplePlainText" />
      <xs:enumeration value="HyperLinkText" />
      <xs:enumeration value="EditableTextBox" />
      <xs:enumeration value="KBSizeIcon" />
      <xs:enumeration value="IconFileType" />
    </xs:restriction>
  </xs:simpleType>

  <xs:simpleType name="Columns">
    <xs:restriction base="xs:string">
      <xs:enumeration value="Summary" />
      <xs:enumeration value="FileName" />
      <xs:enumeration value="KBSize" />
      <xs:enumeration value="FileExtension" />
    </xs:restriction>
  </xs:simpleType>

  <xs:complexType name="ColumnDefinition">
    <xs:attribute name="Column" type="mstns:Columns" use="required" />
    <xs:attribute name="CellStyle" type="mstns:CellStyles" use="required" />
  </xs:complexType>

  <xs:element name="ColumnsDefinitions">
    <xs:complexType>
      <xs:sequence>
        <xs:element minOccurs="0"
                    maxOccurs="unbounded"
                    name="ColumnDefinition"
                    type="mstns:ColumnDefinition" />
      </xs:sequence>
    </xs:complexType>
  </xs:element>

</xs:schema>

The above xsd schema describes two simple types: the CellStyles and the Columns which are enumerations describing the possibles columns and the possibles styles. Then the schema definins the ColumnDefinition complexType which describes a column type and its relevant style. At the end of the schema the element ColumnsDefinitions defines a sequence of ColumnDefinition types representing the entire ListView customization.

The following few lines of code are able to reading any xml files that are conformed to the xml schema. Here an XmlReaderSettings object is created and is configured for validating any xml file conformed to the above schema. After that the XmlSerializer object is created and used for deserializing the xml file. The xml content is put into the ColumnsDefinitions object which is defined into the automatically generated file.

        private ColumnsDefinitions ReadConfiguredColumns()
        {
            try
            {
                bool o = File.Exists("ColumnsConfiguration.xml");
                using (FileStream xmlConfigStream = File.OpenRead("ColumnsConfiguration.xml"),
                                  xmlSchemaStream = File.OpenRead("MyCustomizedColumns.xsd"))
                {
                    XmlSchemaSet schemaSet = new XmlSchemaSet();
                    XmlReader schemaReader = XmlReader.Create(xmlSchemaStream);
                    schemaSet.Add(@"http://tempuri.org/MyCustomizedColumns.xsd", schemaReader);

                    XmlReaderSettings settings = new XmlReaderSettings();
                    settings.ValidationType = ValidationType.Schema;
                    settings.IgnoreWhitespace = true;
                    settings.IgnoreComments = true;
                    settings.Schemas = schemaSet;

                    XmlReader reader = XmlReader.Create(xmlConfigStream, settings);

                    XmlSerializer xs = new XmlSerializer(typeof(ColumnsDefinitions));
                    ColumnsDefinitions configuredColumns = xs.Deserialize(reader) as ColumnsDefinitions;
                    return configuredColumns;
                }
            }
            catch (Exception) { return null; }
        }

2. The FileItem Class

Just for simplifying the reading of the subsequent sections, here is the code of the FileItem class. I choose the FileItem to inherit from the DependencyObject in order to enables animation, styling, binding, and so on in the easier way.

C# File Item

3. The Xaml Sample Application Code (ResourceDictionary, Styles and Binding Rock!)

The xaml code consists into two parts: the first one is contained into Windows.Resources and defines the same styles defined into the above xsd schema, the other one is the ListView itself simply containing a GridView that is used in codebehind for building columns and applying relevant styles (as described in the last section).

Xaml Resources ListView GridView
In the above code is displayed the SimplePlainTextStyle, which can be applied to a ContentControl and simply displays the ContentControl Content. In other words the <ContentPresenter/> means: “here is displayed the Content of the ContentControl, regardless the Content type is”. The ContentControl Content can be whatever you want, even if in our case the simply a string, as I’m going to explain.
Instead the HyperLinkText style displays an hyperlink text but it is  very closed to the SimplePlainTextStyle.
The EditableTextBox style works like the above styles but it is defined in the following way:

            <Style x:Key="EditableTextBox"
                     TargetType="{x:Type ContentControl}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ContentControl}">
                            <Grid Margin="5"
                                  VerticalAlignment="Top" >
                                <TextBox Text="{TemplateBinding Property=Content}"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

Because there are any way to write something like <TextBox…> <ContentPresenter/> </TextBox>, the only way to display the content into the TextBox is to write <TextBox Text=”{TemplateBinding Property=Content}”/>.  This means: “the Text to be displayed is the same displayed into the Content Property of the above Template. The above template is aContentControl Template, because the TargetType of our Style is the ContentControl”.
The KBSizeIcon and the IconFileType Styles are different from the above styles because these are specific styles that can be applied only to specific columns. What I mean is: a SimplePlainTextStyle can be applied to the FileSize or to the FileName or the FileExtensio as well, while the KBSizeIcon style can be applied only to the KBSize column, as well as it makes any sense to apply the IconFileType style to columns different from the FileExtension column!  Because these styles are specifics, they are directly binded to specifics properties of the FileItem object.  The following image displays the xaml code describing the KBSizeIcon:

            <Style x:Key="KBSizeIcon"
                     TargetType="{x:Type ContentControl}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ContentControl}">
                            <Grid Margin="5"
                                  VerticalAlignment="Top" >
                                <Border x:Name="myborder" Width="12" Height="12" Background="{x:Null}"
                                        CornerRadius="12" BorderThickness="0">
                                </Border>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <DataTrigger Binding="{Binding Path=IsBiggerFile}"
                                                             Value="True">
                                    <Setter TargetName="myborder" Property="Background" Value="Red"/>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding Path=IsBiggerFile}"
                                                             Value="False">
                                    <Setter TargetName="myborder" Property="Background" Value="Green"/>
                                </DataTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>

                    </Setter.Value>
                </Setter>
            </Style>

As you can see the displayed icon (green or red) is choosen using ControlTemplate.Triggers that are binded to IsBiggerFile FileItem Dependency Property.

4. The C# Code for building Customized Columns (Factory pattern Rock!)

Finally the engine code that is able to building the columns and applying the styles:

        private void CreateCostumizedColumns(ColumnsDefinitions configuredColumns)
        {
            foreach (ColumnDefinition col in configuredColumns.ColumnDefinition)
            {
                GridViewColumn gridColumn = new GridViewColumn();

                FrameworkElementFactory contentControlFactory =
                                            new FrameworkElementFactory(typeof(ContentControl));
                Style confStyle = this.FindResource(col.CellStyle.ToString()) as Style;
                contentControlFactory.SetValue(ContentControl.StyleProperty, confStyle);

                if (col.CellStyle != CellStyles.KBSizeIcon &&
                    col.CellStyle != CellStyles.IconFileType)
                {
                    Binding binding = new Binding(col.Column.ToString());
                    contentControlFactory.SetBinding(ContentControl.ContentProperty, binding);
                }

                gridColumn.Header = col.Column.ToString();
                gridColumn.CellTemplate = new DataTemplate();
                gridColumn.CellTemplate.VisualTree = contentControlFactory;

                myGridView.Columns.Add(gridColumn);
            }
        }

The code explains itself in an easy way. For each column described into the configuration xml file, a new GridColumn is created. Using  the FrameworkElementFactory we are able create a “factory” that, in our code,  is an object able to build ContentControls object. The configured Style is associated to the contentControlFactory object and than, if the style we are applying is not a “specific style” (I mean it is not KBSizeIcon or IconFileType), we set a binding between the Content Property of the ContentControl and the relevant FileItem Dependency Property. Finally the Column Header is set, a new DataTemplate is created and assigned to the column CellTemplate property, the VisualTree CellTemplate is associated to the contentControlFactory and the new column is added to the GridView.


Hi guys,
today I want to give you some information about the Microsoft Visual Studio 20010 (code-name “Rosario”) and .NET 4.0. The first pre-release for the Community Technology Preview (CTP) was released on 31 october 2008. The mains news introduced in this version are:

  • full UML support for improving communication between Architects and Developers
  • build improvements for avoiding ‘broken builds’ and increasing the build realibilty
  • coder UI Tester for recording the right UI behaviours and automatically generates code for testing it
  • hystorical debuger for decreasing the effort spent during debug sessions
  • tester activity center for avoiding the famouse “it works on my machine”

You can also visit the VS2010 Web Site for more information.

UML Support

Microsoft Visual Studio 20010 provides fully UML support. This functionality can be used for increasing the communications between developers and architects and avoiding miss-understanding.
How many times developers say to theirs project leader:  “hey, we implemented this behaviour in this manner as we decided… so don’t tell me I make wrong implementation!” ?
So, thanks to support of: use cases, sequence diagrams, activity diagrams, logical class diagrams and component diagrams every miss-understanding can be reduced.
The UML is support both for modelling entities and then generating the relevant code and both for generating UML diagrams from the code itself!

VS2010 - Component diagram

VS2010 - Component diagram

VS20010 - Sequence Diagram

VS20010 - Sequence Diagram

Build Improvements

Microsoft Visual Studio 2010 uses the Workflow Foundation for improving the build process: all the MSBuild operations can be defined in a visual way with the ‘activities’ more understandable to human, avoiding put your hands directly on xml files.
Two more builds system are available: Gated Check-in and ShelveSet Check-in. The Gated Check-in ensures to a single developer that everythinghe done  is ok before performing the check-in. The ShelveSet Check-in is quite similar, but in a global way, a new ShelveSet containing all the developers check-ins is created and ensured to not ‘broken the build’ after performing the real check-in.

VS2010 - Build System

VS2010 - Build System

Coder UI Tester

The idea is to record what we are doing over an user interface and describing the right UI behaviours. For example you can record a push button action than you can put the behavioud: “Clicking the following button results in enabling this checkbox”. So recording an action and describing the correct result the VS2010 automatically generates a code for testing your applciation!

VS2010 - Coder UI Tester

VS2010 - Coder UI Tester

Hystorical Debugger

How many times a poor developer said: “Ouch! The value of this variable is changed right now but… what is the prevoius value? I have to debug it again!”. With VS2010 the effort spent in debug is decreasing thanks for the hystorical debug! Every time a method is executed it is registered on the stack, and double clicking on it you can view all the prevoius values of locals variables. Here you are a screenshot:

VS2010 - Hystorical Debug

VS2010 - Hystorical Debug

Tester Activity Center

For increasing the communication between testers and developers, Microsoft Visual Studio 2010 introduced a new  application for managing the test cases and logging in a developer friendly way the results. This avoid the well know phrases usually said from developers such as: “It works on my machine!” or “I do the same thing the tester said but I have different result!”. This more cooperative information provided in testing phase by this tool are:  Action Log,  Event Log, System Information, Debug Information and Video Recorder too!
This tool also provides reports.

VS2010 - Testing Tool

VS2010 - Testing Tool

VS2010 - Tester Video Record

VS2010 - Tester Video Record

VS2010 - Tester Report

VS2010 - Tester Report


Hi guys!

Here the best photos I took in my last trip on London during Christmas’s holidays.

London - The Eye

London - The Eye

London - Buckingham Palace Garden

London - Buckingham Palace Garden

London - Big Ben

London - Big Ben

London - The Gherkin

London - The Gherkin

London - Science Museum

London - Natural History Museum

London - Carnaby Street

London - Carnaby Street