WPF XAML Samples

Programmatic Fade In & Out sample

2007-01-28T10:12:00.000-08:00

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

2007-01-28T09:19:00.000-08:00

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

2007-01-24T16:59:00.000-08:00

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

2007-01-24T15:23:00.000-08:00

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,

Download & Install Microsoft .NET 3.0
Download & Install Visual Studio 2005
Download & Install Visual Studio Extensions for WPF & WCF
Download & Install Microsoft Expression Blend (not required, but handy)
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...