Customizing datafield in SL3

I was trying to answer a forum post regarding customizing  datafield and thought It might be better to post the sample here.

below is all the xaml

<UserControl xmlns:dataFormToolkit=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm.Toolkit” 
             x:Class=”SilverlightApplication3.MainPage”
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml
             xmlns:ctl=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input”
 xmlns:sys=”clr-namespace:System;assembly=mscorlib”
 xmlns:vsm=”clr-namespace:System.Windows;assembly=System.Windows”
    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008” xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006
    mc:Ignorable=”d” d:DesignWidth=”640″ d:DesignHeight=”480″>
    <UserControl.Resources>
        <Style x:Key=”requiredStyle” TargetType=”ctl:Label”>
            <Setter Property=”IsTabStop” Value=”False”/>
            <Setter Property=”Template”>
                <Setter.Value>
                    <ControlTemplate TargetType=”ctl:Label”>
                        <StackPanel Orientation=”Horizontal”>
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name=”CommonStates”>
                                    <vsm:VisualState x:Name=”Normal”/>
                                    <vsm:VisualState x:Name=”Disabled”/>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name=”ValidationStates”>
                                    <vsm:VisualState x:Name=”Valid”/>
                                    <vsm:VisualState x:Name=”Invalid”>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName=”ContentControl” Storyboard.TargetProperty=”Foreground” Duration=”0:0:1.5″>
                                                <DiscreteObjectKeyFrame KeyTime=”0″>
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <SolidColorBrush Color=”Red” />
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name=”RequiredStates”>
                                    <vsm:VisualState x:Name=”NotRequired”>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName=”requiredControl” Storyboard.TargetProperty=”Opacity” Duration=”0:0:1.5″>
                                                <DiscreteObjectKeyFrame KeyTime=”0″ Value=”0″>                                               
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name=”Required”>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName=”requiredControl” Storyboard.TargetProperty=”Opacity” Duration=”0:0:1.5″>
                                                <DiscreteObjectKeyFrame KeyTime=”0″ Value=”1″>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>                                                                      
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>
                            <Border Background=”{TemplateBinding Background}” BorderBrush=”{TemplateBinding BorderBrush}” BorderThickness=”{TemplateBinding BorderThickness}” Padding=”{TemplateBinding Padding}” CornerRadius=”2″>
                                <StackPanel Orientation=”Horizontal”  HorizontalAlignment=”Left”>
                                    <TextBlock x:Name=”requiredControl” Text=”*” FontSize=”10″/>
                                    <ContentControl x:Name=”ContentControl” Foreground=”{TemplateBinding Foreground}” Content=”{TemplateBinding Content}” ContentTemplate=”{TemplateBinding ContentTemplate}” FontWeight=”{TemplateBinding FontWeight}” Cursor=”{TemplateBinding Cursor}” HorizontalAlignment=”{TemplateBinding HorizontalAlignment}” HorizontalContentAlignment=”{TemplateBinding HorizontalContentAlignment}” FontFamily=”{TemplateBinding FontFamily}” FontSize=”{TemplateBinding FontSize}” FontStretch=”{TemplateBinding FontStretch}” VerticalAlignment=”{TemplateBinding VerticalAlignment}” VerticalContentAlignment=”{TemplateBinding VerticalContentAlignment}” IsTabStop=”False” />
                                </StackPanel>
                            </Border>
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key=”datafieldStyle” TargetType=”dataFormToolkit:DataField”>
            <Setter Property=”LabelStyle”  Value=”{StaticResource requiredStyle}”/>
        </Style>
    </UserControl.Resources>
  <Grid x:Name=”LayoutRoot”>
       <dataFormToolkit:DataForm Width=”400″ Margin=”30″ Height=”200″  DataFieldStyle=”{StaticResource datafieldStyle}”   x:Name=”dataform1″></dataFormToolkit:DataForm>
    </Grid>
</UserControl>

you can download the code sample here

Advertisements

One thought on “Customizing datafield in SL3

  1. Thanks! This post saved me a ton of time today as I was fighting with this very issue today. I was able to learn where my code was broken because of our example. Thank you, thank you!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s