Hello!
I have a requirement to add some visual elements to the control template for conditional formatting cells. Basically, there are visual indicators that I need to be able to show if required in a custom ConditionalFormatRule.
I have modified the control template as follows. Basically, I followed the same type of template used in the HeaderCellControl control template. (Question to follow at the end).
<!--__________________________________ ConditionalFormattingCellControl _____________________________________________________-->
<Style x:Name="DataListConditionalCellStyle" TargetType="ig:ConditionalFormattingCellControl">
<Setter Property="FontSize" Value="11" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Background" Value="{StaticResource CellItemNormalBackgroundBrush}" />
<Setter Property="AltBackground" Value="{StaticResource CellItemAltNormalBackgroundBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource CellItemNormalBorderBrush}" />
<Setter Property="BorderThickness" Value="0,0,1,0" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="Padding" Value="5" />
<Setter Property="NegativeBarBrush" Value="{StaticResource DataBarBidirectionNegativeBrush}" />
<Setter Property="BarBrush" Value="{StaticResource DataBarBidirectionPositiveBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ig:ConditionalFormattingCellControl">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MouseOver1"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Alternate">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="AltElem"
</VisualStateGroup>
<VisualStateGroup x:Name="SelectedStates">
<VisualState x:Name="NotSelected" />
<VisualState x:Name="Selected">
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00"
Storyboard.TargetName="ActiveSelected" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="00:00:00"
Value="{StaticResource CellItemSelectedBackgroundBrush}" />
Storyboard.TargetName="ActiveSelected" Storyboard.TargetProperty="BorderThickness">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="0,0,1,0" />
<VisualStateGroup x:Name="ActiveStates">
<VisualState x:Name="InActive" />
<VisualState x:Name="Active">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="1" />
<VisualStateGroup x:Name="ConditionalFormatIcon">
<VisualState x:Name="ShowConditionalFormattingIcon">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormattingIcon"
<VisualState x:Name="HideConditionalFormattingIcon" />
<VisualStateGroup x:Name="ConditionalFormatDataDisplay">
<VisualState x:Name="ShowData" />
<VisualState x:Name="HideData">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CellDisplay"
<Visibility>Collapsed</Visibility>
<VisualStateGroup x:Name="ConditionalFormatDataBar">
<VisualState x:Name="HideDataBar" />
<VisualState x:Name="ShowDataBar">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DataBar"
<VisualStateGroup x:Name="NoteIndicators">
<VisualState x:Name="HideNoteIndicator" />
<VisualState x:Name="ShowNoteIndicatorNormal">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NoteIndicator"
<VisualState x:Name="ShowNoteIndicatorCompareLatest">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NoteIndicator">
<DiscreteObjectKeyFrame KeyTime="0">
<ColorAnimation Duration="0" To="Yellow" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="NoteIndicatorGlyph" d:IsOptimized="True"/>
<VisualState x:Name="ShowNoteIndicatorComparePrevious">
<ColorAnimation Duration="0" To="Orange" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="NoteIndicatorGlyph" d:IsOptimized="True"/>
<VisualStateGroup x:Name="CompareIndicators">
<VisualState x:Name="HideCompareIndicator" />
<VisualState x:Name="ShowCompareIndicatorLatest">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CompareIndicator"
<VisualStateGroup x:Name="ValidationIndicators">
<VisualState x:Name="HideValidationIndicator" />
<VisualState x:Name="ShowValidationIndicator">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationIndicator"
<VisualStateGroup x:Name="PicklistIndicators">
<VisualState x:Name="HidePicklistIndicator" />
<VisualState x:Name="ShowPicklistIndicator">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PicklistIndicator"
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="2" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" x:Name="Root" />
BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding AltBackground}" Visibility="Collapsed"
x:Name="AltElem" />
<Rectangle Grid.ColumnSpan="2" Fill="{StaticResource CellRowHoverBackgroundBrush}" x:Name="MouseOver1"
Visibility="Collapsed" Margin="{TemplateBinding BorderThickness}" />
<Border Grid.ColumnSpan="2" x:Name="ActiveSelected"
BorderBrush="{StaticResource CellItemSelectedBorderBrush}" />
<igPrim:DataBarControl Grid.ColumnSpan="2" Margin="1" DataBarDirection="{TemplateBinding BarDirection}"
PositiveValueBarBrush="{TemplateBinding BarBrush}" NegativeValueBarBrush="{TemplateBinding NegativeBarBrush}"
BarPercentage="{TemplateBinding BarPercentage}" DataBarPositiveNegative="{TemplateBinding BarPositiveOrNegative}"
Visibility="Collapsed" x:Name="DataBar" />
<ContentControl x:Name="FormattingIcon" Visibility="Collapsed" ContentTemplate="{TemplateBinding Icon}"
VerticalAlignment="Center" />
<Grid x:Name="cg" Grid.Column="1">
<Grid x:Name="NoteIndicator" Grid.Column="0" Background="Transparent" Visibility="Collapsed">
<Path x:Name="NoteIndicatorGlyph" Data="F1 M0,1 L90,1 L0,0 z" Width="8" Height="7" Fill="Red"
Stretch="Fill" RenderTransformOrigin="0.5,0.5" Margin="-1.25,1,1.25,0" UseLayoutRounding="False"
VerticalAlignment="Top" d:LayoutOverrides="Height">
<Path.RenderTransform>
<CompositeTransform Rotation="90" />
</Path.RenderTransform>
</Path>
</Grid>
<Grid x:Name="CompareIndicator" Grid.Column="0" Background="Transparent" Visibility="Collapsed">
<Path Data="F1 M0,1 L90,1 L0,0 z" Width="8" Height="7" Fill="Orange" Stretch="Fill"
x:Name="CompareIndicatorGlyph" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" VerticalAlignment="Bottom"
d:LayoutOverrides="Height" Visibility="Visible" />
<ContentPresenter Grid.Column="0" Grid.ColumnSpan="3" x:Name="CellDisplay"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" />
<Grid x:Name="ValidationIndicator" Grid.Column="2" Background="Transparent" Visibility="Collapsed">
<Path
Data="M7.0000005,0 L8.6523857,13.369139 L14.000001,13.36881 L9.6736155,21.631063 L11.326239,35 L7.0000005,26.737215 L2.6737623,35 L4.3263855,21.631063 L4.9015787E-09,13.36881 L5.3476152,13.369139 z"
Width="5" Height="5" Fill="Red" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Visibility="Visible" />
<Grid x:Name="PicklistIndicator" Grid.Column="3" Background="Transparent" Visibility="Collapsed">
<Button x:Name="PicklistButton" Content="Button" HorizontalAlignment="Left" Margin="0,0,0,0" Width="8"
d:LayoutOverrides="Height" VerticalAlignment="Stretch" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I added new visual states because I thought this would be the best way to conditionally show or hide the different indicators. I don't have a problem assigning this style in my conditional formatting code, but I can't find a way to add these states and groups to the conditional cell control (which is normally done with the TemplateVisualStates attribute - when I try transitioning to the states, the VisualStateManager.GoToState returns false). Is there a way for me to show or hide these elements with visual states? Or a better way to get this to work other than using Visual States when applying the style?
If I need to provide more clarification, please let me know.
Anyone? I can modify Xamgrid sourcecode to do this, but I would rather find a better alternative.
The problem with just trying to do this with VisualStates would be that you would need to be notified each and every time things change.
You would probably be better served following a model like the DataBar control inside of the ConditionalFormattingCellControl, where that control is it's own entity living inside of the cell control and when it's properties change it can just change itself and what it is showing.