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
