Alex's Blog

Selection behavior on XamTilesControl with Attached properties

2010-09-07T08:19:00Z

XamTilesControl is a derived ItemsControl and does not support selection. If you want to have the notion of selected item(s) you can achieve this by using attached properties. Creating attached properties can extend the functionality of the XamTilesControl and the Tiles to create a simple selection behavior for the XamTilesControl.

Behavior class: (actual code is omitted because of length)

SelectionAdvisor : DependencyObject

Attached Properties:

bool IsSelected

bool AllowMultipleSelection

Tile SelectedTile

How it works:

AllowMultipleSelection property is set on the XamTilesControl to allow or forbid selecting multiple tiles.

SelectedTile property is also set on the XamTilesControl and returns the last selected tile.

IsSelected is being set on the Tile to indicate whether a Tile is selected or not.

Create a style to visually represent the state of the Tile:

 <Style TargetType="{x:Type igTiles:Tile}">

      <Style.Triggers>

            <DataTrigger Binding="{Binding Path=(selection:SelectionAdvisor.IsSelected), RelativeSource={RelativeSource Self}}" Value="True">

                    <Setter Property="Background" Value="{DynamicResource {x:Static igTiles:TileBrushKeys.TileCaptionBtnHottrackBackgroundFillKey}}" />

            </DataTrigger>

      </Style.Triggers>

 </Style>

Full sample :(Please visit the site to view this media)

Setting the FieldSettings and FieldLayoutSettings of XamDataGrid

2010-08-27T05:31:00Z

Global settings VS Local Settings

A complete sample project you may find here : (Please visit the site to view this media)

How To: Export images from the XamDataGrid to Excel Worksheet

2010-07-28T14:32:00Z

The DataPresenterExcelExporter component is used to export the values of the cells into an Excel document. If you have an Image column in your XamDataGrid, the path of the Image will be exported rather than the image itself.

One way to export the actual image rather than its path is to handle the cell exporting events of the Excel exporter and add the image in the Worksheet. The Image in the Worksheet is represented as a WorkSheetImage object inserted in the WorkSheet.Shapes collection. As Excel cells do not support image content, the actual image has to be positioned over them. This is achievable by setting the TopLeftCornerCell and BottomRightCornerCell properties of the WorkSheetImage.

Sample Setup

1. Create a bind a XamDataGrid with an Image column (sample data source from Blend 4 - included in the sample):

      <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}">

 		<Grid.RowDefinitions>

 			<RowDefinition Height="0.8*"/>

 			<RowDefinition Height="0.1*"/>

 		</Grid.RowDefinitions>

         <igDP:XamDataGrid Name="xamDataGrid1" DataContext="{Binding}" DataSource="{Binding Collection}">

             <igDP:XamDataGrid.FieldSettings>

                 <igDP:FieldSettings CellHeight="60" CellWidth="60"/>

             </igDP:XamDataGrid.FieldSettings>

         </igDP:XamDataGrid>

         <Button Content="Export" Grid.Row="1" Click="Button_Click" />

     </Grid>

2. Export the XamDataGrid

         private  void  Button_Click(object  sender, RoutedEventArgs  e)

             DataPresenterExcelExporter  exporter = new  DataPresenterExcelExporter ();

             exporter.CellExported += new  EventHandler <CellExportedEventArgs >(exporter_CellExported);

             exporter.Export(this .xamDataGrid1, file.FullName, WorkbookFormat .Excel2007);

3. Export the Images from the Image Column :

         private  void  exporter_CellExported(object  sender, CellExportedEventArgs  e)

             if  (e.Field.DataType == typeof (ImageSource ))

                 // currently exported cell

                 WorksheetCell  cell = e.CurrentWorksheet.Rows[e.CurrentRowIndex].Cells[e.CurrentColumnIndex];

                 WorksheetCell  diagonalCell = e.CurrentWorksheet.Rows[e.CurrentRowIndex + 1].Cells[e.CurrentColumnIndex + 1];

                 // current worksheet

                 Worksheet  sheet = e.CurrentWorksheet;

                 // 1. Create Image

                 // resolve your path image

                 string  imagePath = ResolveImagePathFromCellValue(e.Value);

                 System.Drawing.Image  image = new  System.Drawing.Bitmap (imagePath);

                 WorksheetImage  workImage = new  WorksheetImage ((image));

                 // 2. Position the Image

                 workImage.TopLeftCornerCell = cell;

                 workImage.BottomRightCornerCell = diagonalCell;

                 // 3. Insert Image

                 sheet.Shapes.Add(workImage);

                 cell.Value = null ;

The ResolveImagePathFromCellValue() method depends on the way you have setup the image field in the XamDataGrid - via local path, embedded resource, stream, etc.

Result

Full sample you can find here : (Please visit the site to view this media)

HowTo : Common headers in the XamDataGrid

2010-06-02T13:03:00Z

1. Set the AutoGenerateFields and AutoArrangeCells properties of the FieldLayoutSettings to respectively False and Never:

            <igDP:XamDataGrid.FieldLayoutSettings>
                <igDP:FieldLayoutSettings AutoGenerateFields="False" AutoArrangeCells="Never" />
            </igDP:XamDataGrid.FieldLayoutSettings>

2. Define the FieldLayout and explicitly position each field, by setting the Row, RowSpan, Column, ColumnSpan properties :

            <igDP:XamDataGrid.FieldLayouts>
                <igDP:FieldLayout>
                    <igDP:UnboundField Name="Header" Label="Person" Row="0" Column="0" ColumnSpan="6">
                        <igDP:UnboundField.Settings>
                            <igDP:FieldSettings LabelTextAlignment="Center" CellContentAlignment="LabelOnly"/>
                        </igDP:UnboundField.Settings>
                    </igDP:UnboundField>
                    <igDP:Field Name="FirstName" Label="First Name" Row="1" Column="0"/>
                    <igDP:Field Name="LastName" Label="Last Name" Row="1" Column="1" />
                    <igDP:Field Name="Email" Row="1" Column="2" />
                    <igDP:Field Name="Age" Row="1" Column="3" />
                    <igDP:Field Name="BirthDay" Row="1" Column="4" />
                    <igDP:Field Name="Gender" Row="1" Column="5" />
                    <igDP:Field Name="Interests" />
                </igDP:FieldLayout>
            </igDP:XamDataGrid.FieldLayouts>

3. Set the CellContentAlignment to LabelOnly as this Field has only header representation purposes.

The goal:

The result:

The working sample : (Please visit the site to view this media)

Visual Studio code snippets for creating fast and easy data sources

2010-05-31T12:35:00Z

If you have to reuse the same code over and over again in different projects, the Visual Studio provides a nice feature for this - "IntelliSense Code Snippets".
For example, as you all know, you can create a constructor for a class by typing "ctor" inside that class

This is a pretty simple code snippet, but you can expand it and create more complex ones and reuse this code within few key strokes.

How to make them :

1. Add a new File in the Visual Studio :

2. Choose an XML File and save it as a .snippet file

4. Fill the minimum required fields for a code snippet

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <CodeSnippet Format="1.0.0">
    <Header>
 
    </Header>
    <Snippet>
 
    </Snippet>
  </CodeSnippet>
</CodeSnippets>

5. Build on and create your own code snippet

Creating and Using IntelliSense Code Snippets

How to install them :

All you need to do is copy then to your Visual Studio Code Snippets folder.It should look like this :
<drive>:\<user>\Documents\Visual Studio 2010\Code Snippets\Visual C#\My Code Snippets
or :
<drive>:\Program Files (x86)\Microsoft Visual Studio X.0\VC#\Snippets\1033\Visual C#
A small pack with some frequently used code snippets (C#) you can find here : (Please visit the site to view this media).

Edit (9/3/2010) Updated Person class with a boolean property and System.Text namespace (Please visit the site to view this media)

1. Dependency Property

2. Attached Dependency Property

3. INotifyPropertyChanged implementation

4. Property with INotifyPropertyChanged

5. Test class with hierarchical data

6. Test class with different data types

Displaying Selection Count by Implementing Custom Summary Calculators

2010-04-29T08:34:00Z

The XamDataGrid has five built-in summary calculators – Sum, Average, Maximum, Minimum and Count. You can implement additional custom summary calculators by inheriting the abstract SummaryCalculator class. You can see a full walkthrough here in o ur help. You can take advantage of this feature and implement functionality that is not related to the XamDataGrid’s data in an efficient way. For example, you can display the selected records or cells as a summary. The sample project for this blog post you can find here (Please visit the site to view this media) .

Implementing this is fairly straightforward following the walkthrough

class SelectedRecordsCalculator : SummaryCalculator
{

int _count = 0;

public override void Aggregate(object dataValue, SummaryResult summaryResult, Record record)

{

if (record.IsSelected)

{

_count++;

}

}
…

        public override void BeginCalculation(SummaryResult summaryResult)
        {
            _count = 0;
        }

…
public override object EndCalculation(SummaryResult summaryResult)

{

return _count;

}
}

Question : So, why not just get the count from the SelectedItems collection?

Answer : Because, you will not be able to get this:

Tetris Mode

2010-04-12T13:14:00Z

The XamDataGrid is a great control that has all the most daily used functionalities like Sorting, Grouping, Filtering, Data Value History, etc.

It gives you full control over conditional formatting and data management, great performance and responsiveness in updating data so why not have some fun with it and put it into (Please visit the site to view this media) and break some lines of squares.

Josh Smith's ListViewDragDropManager for XamDataGrid

2010-03-23T09:41:00Z

I am not going to invent the wheel. Josh Smith already did. I am just going to make it fit another car - the XamDataGrid.

As Josh says, the code is fairly complex to be explained (It just works) so please refer to his article for more information on the code.

I added one little new feature - a thin Line indicating between which records you are about to drop the dragged item. Also, I made some code changes here and there to make it work smoother with the XamDataGrid.

The sample you can find in the attachments.

Enjoy.

Edit : The project for VS2008 you can find here : (Please visit the site to view this media).

Commit changes when the value of editor changes

2010-03-12T14:29:00Z

All of the ValueEditors that are used inside or outside the XamDataGrid by default have two modes - in EditMode and out of EditMode. The values are not committed until the value editor has ended its edit mode. When the value editors are embedded in the XamDataGrid they end edit mode when they lose focus or when the enter key is pressed.

If you want this value to be committed when the value is changed, then you have to handle the ValueChanged event of the value editor and for the editor to end edit mode. You can do this by calling the EndEditMode(...) method.

Subscribing to the ValueChanged event you can do with the EventManager class, like this:

                EventManager.RegisterClassHandler(typeof(ValueEditor),
                    ValueEditor.ValueChangedEvent,
                    new RoutedPropertyChangedEventHandler<object>(OnValueChanged));

This will be only applicable for editors like XamComboEditor, XamCheckEditor or XamDateTimeEditor.

You would not have to apply this to the rest of the editors as this will exit the EditMode each time you press a key:

        void OnValueChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
        {
            if (sender is XamComboEditor || sender is XamCheckEditor || sender is XamDateTimeEditor)
            {
                (sender as ValueEditor).EndEditMode(true, true);
            }
        }

In the attachments you can find the full source code.

Setting GroupByRecordPresenter's Background

2010-02-09T12:28:00Z

Why is not the background of the GroupByRecordPresenter now changing when I set its Background property?

This is because the Background of the Record Content Site (where the description is) of the GroupByRecordPresenter is bound to the current theme's LabelBackground brush with the following binding : Background="{DynamicResource {ComponentResourceKey {x:Type igDP:XamDataGrid}, LabelBackground}}". Only the area underneath the record selector is bound to the Background property of the GroupByRecordPresenter.

Default

If the theme changes, the Background of the Record content site will change accordingly:

Theme

However, if you do not want to use a theme, but you want to be able to change the Background of the GroupByRecordPresenter the same way the Theme changes it, you have to retemplate it and change the binding expression that the GroupByRecordPresenter is using for the background color:

Custom

The full style for the GroupByRecordPresenter you can find in the project attached to this blog post.

Please note that this samples uses volume 9.2 The GroupByRecordPresenter style for older versions, for example volume 9.1, is different and will have to be taken from the DefaultStyles directory (~\Program Files (x86)\Infragistics\NetAdvantage for .NET 2009.1\WPF\DefaultStyles).

HOWTO: Using WPF Converters to style the XamDataGrid

2010-01-12T08:15:00Z

There have been a lot of forums posts and questions about how to use Converters and how to bind them to the a cell, multiple cells, or something else.

I have tried to summarize all of these requirements in one place and would be happy to update the sample project on your feedback.

How WPF Value Converters work : they are classes (that implement IValueConverter or IMultiValueConverter interfaces) that provide the ability (custom logic) to convert value(s) of one type to another and vice versa. They can also be used to convert values of the same type, but that is not really what they are meant to do. One really common case is to convert an integer value (for example the Age of a Person) to a Brush or a Color.

The screenshot below covers couple of scenarios:

1. Record Background formatting based on a cell's value ( blue for male, red for female)

2. Cell Background formatting based on the cell's value (Probation field)

3. Advanced Cell formatting based on the cell's value (Age field)

4. Formatting based on multiple cells' values (Salary field)

For example :

public class AgeToBrushConverter : IValueConverter

{

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

{

if (value == null)

return Binding.DoNothing;

if (value is int)

{

int temp = (int)value;

if (temp < 0)

return Brushes.Red;

if (temp > 0 && temp <= 10)

return Brushes.Black;

if (temp > 10 && temp <= 15)

return Brushes.Blue;

if (temp > 15)

return Brushes.DarkGreen;

}

return Binding.DoNothing;

}

public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

{ throw new NotImplementedException(); }

}

You can find the full sample and source code with comments in the attachments of this blog post.

Add-New-Record for any type of collection bound to the XamDataGrid

2009-11-23T21:09:00Z

Currently, the XamDataGrid supports the AddNewRecord functionality for only collections which implement the IBindingList interface( like BindingList<T> and DataView). With couple of easy tricks and few lines of code, you can achieve a similar functionality for any collection:

1. Distinguish between a normal record and the add record - use the Tag property.

2. Fix the Add New Record so that it looks like the real one - use IsFixed property.

3. Commit the Add New Record - DataPresenterCommands.CommitChangesToActiveRecord.

4. Restyle the Add New Record - Styles for the DataRecordCellArea & RecordSelector.

You can find a full sample in the attachments of this blog post.

Known possible drawbacks :

1. One extra blank record is present in the data source at all times ( as the built-in functionality creates this record once you have started data input in the add record).

2. The implementation for hierarchical data structure is left out for your exercise.

Customizing XamDockManager's Floating Panes

2009-11-10T18:46:00Z

Many have asked the question - "What do I need to customize the Floating pane and specifically how to remove the border?". There are two main things you need to do to achieve that:

1. Set the UseOSNonClientArea property of the ToolWindow to false.

You can do that in the ToolWindowLoaded event of the XamDockManager like this:

void OnToolWindowLoaded(object sender, Infragistics.Windows.DockManager.Events.PaneToolWindowEventArgs e)

{

PaneToolWindow window = e.Window;

window.UseOSNonClientArea = false;

}

2. Create a new Template for the ToolWindow and set it.

Custom borderless control template for the ToolWindow:

<Border Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</DockPanel>

</Grid>

</Border>

</ControlTemplate>

3. Drag-Move & Docking functionalities:

As we have completely retemplated the ToolWindow, these functionalities will be lost. You can write your own implementations for them. In the attachment section of this blog post you can find a sample project with very simple ways of doing so.

How to Rename the TabItems of the XamTabControl runtime like Excel

2009-10-01T14:14:00Z

Excel-like renaming of the Sheets is a cool feature on a TabControl.

You can implement this with the XamTabControl really fast and easy. Here are the steps how to do this:

1. Retemplate the TabItemEx element and replace the ContentPresenter with a XamTextEditor. The XamTextEditor is handy in this scenario as it has cancelable events which will prevent the editor in entering edit mode if the user is single-clicking. It will only enter edit mode if the user double-clicks.

2. EditModeStarting event and cancel it if it is a Single click action.

You can find the project in the attachments of this blog post.

Drag & Drop with DataPresenter family controls

2009-07-28T07:24:00Z

This is a sample implementation how to Drag and Drop DataRecord for controls from the DataPresenter family controls - XamDataPresenter, XamDataGrid, XamDataCarousel. The sample uses the standard WPF events for drag-drop. The Drag&Drop preview is displayed in the Adorner layer.

To enable drag-drop functionality, first you need to allow it, by setting the AllowDrop property of the element that you wish to drop over. The Drag begins by calling the DragDrop.DoDragDrop(...) method and passing the drag source element, the data being dragged (an instance of DataObject class) and DragDropEffects.

When the dragging has started, you can display a preview of the element being dragged (in this case a DataRecordPresenter) in the Adorner layer. The easiest way to do this is using a VisualBrush to pait an area (for example a Rectangle) with the DataRecordPresenter.

For anyone who wants more information on how the Drag-Drop works from start to end, you can take a look at this great article on this here.

The full sample you can find in the attachments of this blog post.