среда, 25 августа 2010 г.

Кастомизация DataForm в Silverlight 4

При создании DataForm можно указать какие командные кнопки будет иметь форма. Существует несколько различных кнопок: четыре кнопки навигации, кнопка редактирования, вставка и удаление, а также кнопки Commit (сохранение) и Cancel (отмена изменений).

Видимость этих кнопок указывается через свойство CommandButtonsVisibility элемента DataForm. Так, наример, значение “All” делает все возможные кнопки видимыми.

<my:CustomDataForm HorizontalAlignment="Center"  VerticalAlignment="Top" Width="450" AutoEdit="False" AutoCommit="True" AutoGenerateFields="True"

CommandButtonsVisibility="All">

</my:CustomDataForm>


Пожалуй, чаще нужно использовать все кнопки кроме навигации. В таком случае следуют использовать следущее значение.



<my:CustomDataForm HorizontalAlignment="Center"  VerticalAlignment="Top" Width="450" AutoEdit="False" AutoCommit="True" AutoGenerateFields="True"

CommandButtonsVisibility="Edit, Add, Delete, Commit, Cancel">

</my:CustomDataForm>


Также часто возникает необходимость изменить внешний вид управляющих кнопок . Для этого можно создать собственные кнопки и разместить их отдельно от DataForm. Проблема в том, что в таком случае будет крайне сложно создать правильное поведение для этих кнопок. Стандартные управляющие кнопки DataForm, по всей видимости, выполняют большое количество операций, без которых добавление и удаление не будут работать.



Так что лучше всего переопределить внешний вид стандартных кнопок.



Для это нужно открыть проект в Expression Blend, перейти к элементу DataForm и нажать Edit Template -> Edit Copy. Созданный шаблон можно разместить в отдельном новом файле с ресурсами.



Далее, нужно дойти в дереве элементов до интересующей кнопки и заменить его элемент Path на обычную кнопку.



Весь код получается достаточно объемным:



<ResourceDictionary

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"


xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:AppName_Controls="clr-namespace:AppName.Controls" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">


<!-- Resource dictionary entries should be defined here. -->


<Style x:Key="AddRemoveDataFromStyle" TargetType="AppName_Controls:CustomDataForm">


<Setter Property="AutoCommit" Value="True"/>


<Setter Property="AutoGenerateFields" Value="True"/>


<Setter Property="Background">


<Setter.Value>


<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">


<GradientStop Color="#FFF3F7FA" Offset="0"/>


<GradientStop Color="#FFFFFFFF" Offset="0.1"/>


</LinearGradientBrush>


</Setter.Value>


</Setter>


<Setter Property="BorderThickness" Value="1"/>


<Setter Property="BorderBrush">


<Setter.Value>


<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">


<GradientStop Color="#FFA3AEB9" Offset="0"/>


<GradientStop Color="#FF8399A9" Offset="0.375"/>


<GradientStop Color="#FF718597" Offset="0.375"/>


<GradientStop Color="#FF617584" Offset="1"/>


</LinearGradientBrush>


</Setter.Value>


</Setter>


<Setter Property="DescriptionViewerPosition" Value="Auto"/>


<Setter Property="LabelPosition" Value="Auto"/>


<Setter Property="HeaderVisibility" Value="Visible"/>


<Setter Property="Template">


<Setter.Value>


<ControlTemplate TargetType="AppName_Controls:CustomDataForm">


<Grid toolkit:DataField.IsFieldGroup="True">


<Grid.Resources>


<Style x:Key="ButtonGeneric" TargetType="Button">


<Setter Property="Background" Value="#00000000"/>


<Setter Property="Foreground" Value="#FF000000"/>


<Setter Property="BorderBrush" Value="#FFFFFFFF"/>


<Setter Property="BorderThickness" Value="1"/>


<Setter Property="Padding" Value="1"/>


<Setter Property="Template">


<Setter.Value>


<ControlTemplate TargetType="Button">


<Grid>


<VisualStateManager.VisualStateGroups>


<VisualStateGroup x:Name="CommonStates">


<VisualState x:Name="Normal"/>


<VisualState x:Name="MouseOver">


<Storyboard>


<ColorAnimation Duration="0" To="#FFFFFFFF" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="OuterBtnBorder"/>


<ColorAnimation Duration="0" To="#7FA9A9A9" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="InnerBtnBorder"/>


</Storyboard>


</VisualState>


<VisualState x:Name="Pressed">


<Storyboard>


<ColorAnimation Duration="0" To="#7FA9A9A9" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="InnerBtnBorder"/>


<ColorAnimation Duration="0" To="#7FA9A9A9" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="InnerBtnBorder"/>


</Storyboard>


</VisualState>


<VisualState x:Name="Disabled">


<Storyboard>


<DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>


</Storyboard>


</VisualState>


</VisualStateGroup>


<VisualStateGroup x:Name="FocusStates">


<VisualState x:Name="Focused">


<Storyboard>


<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>


</Storyboard>


</VisualState>


<VisualState x:Name="Unfocused"/>


</VisualStateGroup>


</VisualStateManager.VisualStateGroups>


<Border x:Name="OuterBtnBorder" BorderBrush="#00FFFFFF" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="3">


<Border x:Name="InnerBtnBorder" BorderBrush="#00A9A9A9" BorderThickness="{TemplateBinding BorderThickness}" Background="#00A9A9A9" CornerRadius="2">


<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="Center" Height="Auto" VerticalAlignment="Center" Width="Auto"/>


</Border>


</Border>


<Border x:Name="FocusVisualElement" BorderBrush="#FF6DBDD1" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="2" Margin="1" Opacity="0"/>


</Grid>


</ControlTemplate>


</Setter.Value>


</Setter>


</Style>


<Style x:Key="CustomScrollViewerStyle" TargetType="ScrollViewer">


<Setter Property="HorizontalContentAlignment" Value="Left"/>


<Setter Property="VerticalContentAlignment" Value="Top"/>


<Setter Property="BorderThickness" Value="0,1"/>


<Setter Property="BorderBrush">


<Setter.Value>


<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">


<GradientStop Color="#FFA3AEB9" Offset="0"/>


<GradientStop Color="#FF8399A9" Offset="0.375"/>


<GradientStop Color="#FF718597" Offset="0.375"/>


<GradientStop Color="#FF617584" Offset="1"/>


</LinearGradientBrush>


</Setter.Value>


</Setter>


<Setter Property="Template">


<Setter.Value>


<ControlTemplate TargetType="ScrollViewer">


<Grid>


<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Margin="0,-1" Opacity="0.2" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}">


<Border.OpacityMask>


<LinearGradientBrush EndPoint="1.07,0.5" StartPoint="-0.07,0.5">


<GradientStop Color="#FF000000"/>


<GradientStop Color="#7FFFFFFF" Offset="0.5"/>


<GradientStop Color="#FF000000" Offset="1"/>


</LinearGradientBrush>


</Border.OpacityMask>


</Border>


<Grid Background="{TemplateBinding Background}">


<Grid.ColumnDefinitions>


<ColumnDefinition Width="*"/>


<ColumnDefinition Width="Auto"/>


</Grid.ColumnDefinitions>


<Grid.RowDefinitions>


<RowDefinition Height="*"/>


<RowDefinition Height="Auto"/>


</Grid.RowDefinitions>


<ScrollContentPresenter x:Name="ScrollContentPresenter" Cursor="{TemplateBinding Cursor}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}"/>


<Rectangle Grid.Column="1" Fill="#FFE9EEF4" Grid.Row="1"/>


<ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Margin="0,-1" Minimum="0" Orientation="Vertical" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" Width="18"/>


<ScrollBar x:Name="HorizontalScrollBar" Grid.Column="0" Height="18" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Margin="-1,0,-1,-1" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}"/>


</Grid>


</Grid>


</ControlTemplate>


</Setter.Value>


</Setter>


</Style>


</Grid.Resources>


<VisualStateManager.VisualStateGroups>


<VisualStateGroup x:Name="CommonStates">


<VisualState x:Name="Normal"/>


<VisualState x:Name="Disabled">


<Storyboard>


<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisual"/>


</Storyboard>


</VisualState>


</VisualStateGroup>


<VisualStateGroup x:Name="ModeStates">


<VisualState x:Name="ReadOnly"/>


<VisualState x:Name="Empty">


<Storyboard>


<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="ContentPresenter">


<DiscreteObjectKeyFrame KeyTime="0" Value="False"/>


</ObjectAnimationUsingKeyFrames>


<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentPresenter"/>


</Storyboard>


</VisualState>


<VisualState x:Name="Edit">


<Storyboard>


<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IsEnabled" Storyboard.TargetName="EditButton">


<DiscreteObjectKeyFrame KeyTime="0" Value="false"/>


</ObjectAnimationUsingKeyFrames>


<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CommitButton">


<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>


</ObjectAnimationUsingKeyFrames>


<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CancelButton">


<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>


</ObjectAnimationUsingKeyFrames>


</Storyboard>


</VisualState>


</VisualStateGroup>


<VisualStateGroup x:Name="ValidationStates">


<VisualState x:Name="Valid"/>


<VisualState x:Name="Invalid"/>


</VisualStateGroup>


<VisualStateGroup x:Name="CommittedStates">


<VisualState x:Name="Committed"/>


<VisualState x:Name="Uncommitted">


<Storyboard>


<DoubleAnimation Duration="0" To="0.9" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ChangeIndicator"/>


</Storyboard>


</VisualState>


</VisualStateGroup>


<VisualStateGroup x:Name="ScopeStates">


<VisualState x:Name="Entity"/>


<VisualState x:Name="Collection"/>


</VisualStateGroup>


</VisualStateManager.VisualStateGroups>


<Border x:Name="DataFormBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="2">


<Grid>


<Grid.RowDefinitions>


<RowDefinition Height="Auto"/>


<RowDefinition/>


<RowDefinition Height="Auto"/>


<RowDefinition Height="Auto"/>


</Grid.RowDefinitions>


<Grid MinHeight="27" Visibility="{TemplateBinding HeaderVisibility}">


<Grid.ColumnDefinitions>


<ColumnDefinition Width="Auto"/>


<ColumnDefinition/>


<ColumnDefinition Width="Auto"/>


<ColumnDefinition Width="8"/>


</Grid.ColumnDefinitions>


<StackPanel Orientation="Horizontal">


<ContentControl x:Name="HeaderElement" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{TemplateBinding Foreground}" FontWeight="Bold" Margin="10,0,0,0" VerticalAlignment="Center"/>


<TextBlock x:Name="ChangeIndicator" Foreground="{TemplateBinding Foreground}" FontWeight="Bold" Margin="3,-2,8,2" Opacity="0" Text="*" VerticalAlignment="Center"/>


</StackPanel>


<StackPanel Grid.Column="2" Margin="0,3,0,2" Orientation="Horizontal">


<Button x:Name="FirstItemButton" Style="{StaticResource ButtonGeneric}">


<Grid Height="9" Margin="6,5,5,5" Opacity="1" Width="8">


<Grid.Effect>


<DropShadowEffect BlurRadius="8" Color="#FFFFFFFF" Direction="100" Opacity="1" ShadowDepth="0"/>


</Grid.Effect>


<Grid.OpacityMask>


<LinearGradientBrush EndPoint="0.6,1" StartPoint="0.4,0">


<GradientStop Color="#7FFFFFFF" Offset="0"/>


<GradientStop Color="#BF000000" Offset="0.25"/>


<GradientStop Color="#FF000000" Offset="1"/>


</LinearGradientBrush>


</Grid.OpacityMask>


<Path Data="M1,0 L1,2 L0,1 Z" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Right" Height="9" Margin="0" Opacity="0.85" Stretch="Fill" Width="5"/>


<Rectangle Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Opacity="0.85" Width="2"/>


</Grid>


</Button>


<Button x:Name="PreviousItemButton" Style="{StaticResource ButtonGeneric}">


<Path Data="M1,0 L1,2 L0,1 Z" Fill="{TemplateBinding Foreground}" Height="9" Margin="6,5,8,5" Opacity="0.85" Stretch="Fill" Width="5">


<Path.Effect>


<DropShadowEffect BlurRadius="8" Color="#FFFFFFFF" Direction="100" ShadowDepth="0"/>


</Path.Effect>


<Path.OpacityMask>


<LinearGradientBrush EndPoint="0.6,1" StartPoint="0.4,0">


<GradientStop Color="#7F000000" Offset="0"/>


<GradientStop Color="#BF000000" Offset="0.25"/>


<GradientStop Color="#FF000000" Offset="1"/>


</LinearGradientBrush>


</Path.OpacityMask>


</Path>


</Button>


<Button x:Name="NextItemButton" Style="{StaticResource ButtonGeneric}">


<Path Data="M0,0 L1,1 L0,2 Z" Fill="{TemplateBinding Foreground}" Height="9" Margin="8,5,6,5" Opacity="0.85" Stretch="Fill" Width="5">


<Path.Effect>


<DropShadowEffect BlurRadius="8" Color="#FFFFFFFF" Direction="100" ShadowDepth="0"/>


</Path.Effect>


<Path.OpacityMask>


<LinearGradientBrush EndPoint="0.6,1" StartPoint="0.4,0">


<GradientStop Color="#7F000000" Offset="0"/>


<GradientStop Color="#BF000000" Offset="0.25"/>


<GradientStop Color="#FF000000" Offset="1"/>


</LinearGradientBrush>


</Path.OpacityMask>


</Path>


</Button>


<Button x:Name="LastItemButton" Style="{StaticResource ButtonGeneric}">


<Grid Height="9" Margin="6,5,5,5" Opacity="1" Width="8">


<Grid.Effect>


<DropShadowEffect BlurRadius="8" Color="#FFFFFFFF" Direction="100" ShadowDepth="0"/>


</Grid.Effect>


<Grid.OpacityMask>


<LinearGradientBrush EndPoint="0.6,1" StartPoint="0.4,0">


<GradientStop Color="#7F000000" Offset="0"/>


<GradientStop Color="#BF000000" Offset="0.25"/>


<GradientStop Color="#FF000000" Offset="1"/>


</LinearGradientBrush>


</Grid.OpacityMask>


<Path Data="M0,0 L1,1 L0,2 Z" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Height="9" Opacity="0.85" Stretch="Fill" Width="5"/>


<Rectangle Fill="{TemplateBinding Foreground}" HorizontalAlignment="Right" Opacity="0.85" Width="2"/>


</Grid>


</Button>


<Border x:Name="ButtonSeparator" BorderBrush="#59FFFFFF" BorderThickness="1,0,1,0" Background="{TemplateBinding BorderBrush}" Margin="2,4,2,4" Opacity="0.2" Width="3"/>


<Button x:Name="EditButton" Style="{StaticResource ButtonGeneric}" ToolTipService.ToolTip="Edit">


<Button.OpacityMask>


<LinearGradientBrush EndPoint="0.57,0.76" StartPoint="0.42,0.01">


<GradientStop Color="#7F000000" Offset="0"/>


<GradientStop Color="#BF000000" Offset="0.442"/>


<GradientStop Color="#FF000000" Offset="1"/>


</LinearGradientBrush>


</Button.OpacityMask>


<Grid HorizontalAlignment="Center" Height="19" VerticalAlignment="Center" Width="19">


<Canvas HorizontalAlignment="Stretch" Margin="2,2,0,0" VerticalAlignment="Stretch">


<Path Data="F1 M 2.53,9.96L 4.96,11.1L 6.08,13.50L 13.09,6.50L 9.6,3L 2.53,9.96 Z " Fill="{TemplateBinding Foreground}" Height="10.5" Canvas.Left="2.53" Stretch="Fill" Canvas.Top="3.01" Width="10.56">


<Path.OpacityMask>


<LinearGradientBrush EndPoint="0.76,0.77" StartPoint="0.21,0.18">


<GradientStop Color="#7F000000" Offset="0"/>


<GradientStop Color="#59000000" Offset="0.106"/>


<GradientStop Color="#3F000000" Offset="0.387"/>


<GradientStop Color="#99000000" Offset="0.703"/>


<GradientStop Color="#CC000000" Offset="1"/>


</LinearGradientBrush>


</Path.OpacityMask>


</Path>


<Path Data="M1.41,1.83 L0.71,2.54 L4.20,6.03 L4.91,5.33 z M3.24,0 L6.81,3.42 L3.5,6.74 L0,3.24 z" Fill="{TemplateBinding Foreground}" Height="6.74" Canvas.Left="7.47" Stretch="Fill" Canvas.Top="1.89" Width="6.81"/>


<Path Data="F1 M 13.77,4.22L 11.73,2.18C 11.12,1.78 10.46,2.15 10,2.5L 3.04,9.45C 2.65,9.86 2.53,10.47 2.53,10.73L 2.53,13.5L 5.32,13.5C 5.57,13.5 6.33,13.36 6.64,12.93L 13.54,6.03C 13.86,5.72 14.17,4.74 13.77,4.22 Z" Height="12.5" Canvas.Left="2.03" Stretch="Fill" Stroke="{TemplateBinding Foreground}" StrokeLineJoin="Round" Canvas.Top="1.50" Width="12.43"/>


<Path Data="F1 M 2.033,11.71L 4.33,14L 2.62,14C 2.17,13.93 2.09,13.79 2,13.31L 2.03,11.71 Z" Fill="{TemplateBinding Foreground}" Height="2.29" Canvas.Left="2.58" Stretch="Fill" Canvas.Top="11.18" Width="2.33"/>


</Canvas>


</Grid>


</Button>


<Button x:Name="NewItemButton" Style="{StaticResource ButtonGeneric}" ToolTipService.ToolTip="Add">


<Button Content="Add"/>


</Button>


<Button x:Name="DeleteItemButton" Style="{StaticResource ButtonGeneric}" ToolTipService.ToolTip="Delete">


<Button Content="Remove"/>


</Button>


</StackPanel>


</Grid>


<ScrollViewer Background="{x:Null}" IsTabStop="False" Padding="{TemplateBinding Padding}" Grid.Row="1" Style="{StaticResource CustomScrollViewerStyle}" VerticalScrollBarVisibility="Auto">


<ContentPresenter x:Name="ContentPresenter" Margin="12,12,6,12"/>


</ScrollViewer>


<sdk:ValidationSummary x:Name="ValidationSummary" BorderThickness="0" MaxHeight="100" Grid.Row="2"/>


<StackPanel HorizontalAlignment="Right" Orientation="Horizontal" Grid.Row="3">


<Button x:Name="CommitButton" Content="OK" HorizontalContentAlignment="Center" Margin="0,5,8,5" MinWidth="71" MinHeight="17" Visibility="Collapsed" VerticalContentAlignment="Center"/>


<Button x:Name="CancelButton" Content="Cancel" HorizontalContentAlignment="Center" Margin="0,5,8,5" MinWidth="71" MinHeight="17" Visibility="Collapsed" VerticalContentAlignment="Center"/>


</StackPanel>


</Grid>


</Border>


<Border x:Name="DisabledVisual" Background="#8CFFFFFF" CornerRadius="2" IsHitTestVisible="False" Opacity="0"/>


</Grid>


</ControlTemplate>


</Setter.Value>


</Setter>


</Style>


</ResourceDictionary>



Данный стиль приделывается к форме при помощи свойства Style следующим образом:



<my:CustomDataForm HorizontalAlignment="Center"  VerticalAlignment="Top" Width="450" AutoEdit="False" AutoCommit="True" AutoGenerateFields="True"

CommandButtonsVisibility="Edit, Add, Delete, Commit, Cancel"  

Style="{StaticResource AddRemoveDataFromStyle}">

</my:CustomDataForm>


После всех этих операций форма выглядит следующим образом, это то, что нам было нужно:



clip_image002

Автор: на
Ярлыки:

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)