Kezmo, new enterprise chat & task management tool for teams

Ok, not a WPX, or XAML sample in this case, but I feel the need to share a piece of news with you. After more than a year of work we've released Kezmo, an enterprise chat and team collaboration tool.


It's an alternative to products such as Slack, or HipChat, Moxtra, Quip, etc, with the caveat that it integrates task management capabilities such as those you'd find in products like Trello & Wunderlist. Providing a two in one deal which avoids context switching between apps.

On top of it it's localized to several languages, such as Spanish, Portuguese making it easier to adopt by international teams. Soon to follow are more languages.

It can be setup on premises, which is critical for organizations looking to have more control over their data, and to implement custom security policies.

It'd be really awesome if you could give it a try (it's free) and let me know what you think.

Programmatic Fade In & Out sample

Animating the Opacity property is possible to achieve the fade in&out effect.

The source & bits can be downloaded from here.

The following is the C# code used,

#region Fade in
// Create a storyboard to contain the animations.
Storyboard storyboard = new Storyboard();
TimeSpan duration = new TimeSpan(0, 0, 1);

// Create a DoubleAnimation to fade the not selected option control
DoubleAnimation animation = new DoubleAnimation();

animation.From = 0.0;
animation.To = 1.0;
animation.Duration = new Duration(duration);
// Configure the animation to target de property Opacity
Storyboard.SetTargetName(animation, Img1.Name);
Storyboard.SetTargetProperty(animation, new PropertyPath(Control.OpacityProperty));
// Add the animation to the storyboard
storyboard.Children.Add(animation);

// Begin the storyboard
storyboard.Begin(this);

#endregion


The image used comes from here. The executed sample looks like this:

Pimp up your RadioButton Sample

In Windows Presentation Foundation, RadioButton controls don't have to be boring small circles, you can get them to be pretty much whatever you want, cool, isn't it?



The following is a basic sample about how to customize a RadioButton control appearance, you can get the source & bits from here.

XAML code:

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xml:lang="en-US"
x:Class="RadioButtonSample.Window1"
x:Name="Window"
Title="Window"
Width="320" Height="200"
Background="White">

<Window.Resources>
<Style TargetType="{x:Type RadioButton}" >
<Setter Property="Background" Value="Blue"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<Grid Width="48" Height="48">
<Rectangle Fill="#3FCCCCCC" RadiusX="10" RadiusY="10" Margin="0.5,0.5,0.5,0.5"/>
<Ellipse
Margin="10,10,10,10"
Fill="#C0C0C0" Width="Auto" Height="Auto" />
<Ellipse x:Name="CheckMark"
Margin="20,10,20,10"
Fill="Green" Width="Auto" Height="Auto" />
<Ellipse x:Name="CheckMark2"
Margin="10,20,10,20"
Fill="Green" Width="Auto" Height="Auto" />
<ContentPresenter/>
</Grid>
</BulletDecorator.Bullet>
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="false">
<Setter TargetName="CheckMark" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="CheckMark2" Property="Visibility" Value="Collapsed"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>


</Window.Resources>

<Grid x:Name="MainGrid" Background="white" HorizontalAlignment="Center"
VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Content="Select one country" Grid.ColumnSpan="3" />
<RadioButton Content="USA" Grid.Row="1" Grid.Column="0"
HorizontalAlignment="Left"
VerticalAlignment="Center" GroupName="CountriesGroup"/>
<RadioButton Content="France" Grid.Row="1" Grid.Column="1"
HorizontalAlignment="Left"
VerticalAlignment="Center" GroupName="CountriesGroup"/>
<RadioButton Content="Brazil" Grid.Row="1" Grid.Column="2"
HorizontalAlignment="Left"
VerticalAlignment="Center" GroupName="CountriesGroup"/>
</Grid>
</Window>


Executed should look like this:

HeaderedItemsControl with a GridView look sample

This is a basic sample of HeaderedItemsControl, that shows a set of values in a table, or GridView like look view.

The Visual Studio project can be downloaded here.

Here's the code, if you know any better way to accomplish this tell me.


<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xml:lang="en-US"
x:Class="HeaderedItemsGridView.Window1"
x:Name="Window"
Title="Window"
Width="400" Height="300">
<Window.Resources>
<XmlDataProvider Source="Data.xml" x:Key="dataDS"/>
<DataTemplate x:Key="personTemplate">
<Grid Width="Auto" Background="#e1e1e1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="{Binding Mode=OneWay, XPath=@name}" />
<Label Grid.Column="1" Content="{Binding Mode=OneWay, XPath=@surname}" />
<Label Grid.Column="2" Content="{Binding Mode=OneWay, XPath=@age}" />
<Label Grid.Column="3" Content="{Binding Mode=OneWay, XPath=@phone}"/>
</Grid>
</DataTemplate>

<Style TargetType="{x:Type HeaderedItemsControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type HeaderedItemsControl}">
<Grid Background="Red" Margin="50,50,50,50">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20pt"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" Content="Name"/>
<Label Grid.Column="1" Grid.Row="0" Content="Surname"/>
<Label Grid.Column="2" Grid.Row="0" Content="Age"/>
<Label Grid.Column="3" Grid.Row="0" Content="Phone"/>
<Grid Grid.Row="1" Grid.ColumnSpan="4" Width="Auto" Height="Auto" Background="White">
<ItemsPresenter/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>

<Grid x:Name="MainWindow">
<HeaderedItemsControl
x:Name="MyGridList"
ItemTemplate="{DynamicResource personTemplate}"
ItemsSource="{Binding Mode=Default, Source={StaticResource dataDS}, XPath=/data/persons/person}"/>
</Grid>
</Window>

The result looks like this:

Windows Presentation Foundation Samples

I'm learning Windows Presentation Foundation, I've been using it for about two weeks, not much right?, For developers is not trivial, WPF involves thinking some things different.

The samples out there are either too complex, or too simple, or just outdated, since they were developed for a CTP version of the WPF libraries.

So I decided that all the small things I do, on my way to learn WPF, I'll post here, source code and all, so, it may help and make things a little easier for someone else.

First of all, to start playing this game you should,

1. Download & Install Microsoft .NET 3.0
2. Download & Install Visual Studio 2005
3. Download & Install Visual Studio Extensions for WPF & WCF
   
4. Download & Install Microsoft Expression Blend (not required, but handy)
5. Download & Install Windows Vista SDK, I haven't found much use for the tools it comes with, but the help documentation is pretty good, is the best reference documentation out there, and it has a lot of samples

ok, enough talking, let's go to the samples...