When error message is a long string, how to make the message be displayed as mutiple line in ValidationSummary ?
One example for toolTips :
<ControlTemplate x:Key="ValidationToolTipTemplate">
<Grid x:Name="Root"
Margin="5,0"
Opacity="0"
RenderTransformOrigin="0,0">
<Grid.RenderTransform>
<TranslateTransform x:Name="xform" X="-25" />
</Grid.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="OpenStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0" />
<VisualTransition GeneratedDuration="0:0:0.2" To="Open">
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetName="xform"
Storyboard.TargetProperty="X"
To="0">
<DoubleAnimation.EasingFunction>
<BackEase Amplitude=".3" EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetName="Root"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Closed">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="Root"
Storyboard.TargetProperty="Opacity"
To="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Open">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="xform"
Storyboard.TargetProperty="X"
To="0" />
<DoubleAnimation Duration="0"
Storyboard.TargetName="Root"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Margin="4,4,-4,-4"
Background="#052A2E31"
CornerRadius="5" />
<Border Margin="3,3,-3,-3"
Background="#152A2E31"
CornerRadius="4" />
<Border Margin="2,2,-2,-2"
Background="#252A2E31"
CornerRadius="3" />
<Border Margin="1,1,-1,-1"
Background="#352A2E31"
CornerRadius="2" />
<Border Background="{StaticResource MetroRedLight}" CornerRadius="2" />
<Border CornerRadius="2">
<TextBlock MaxWidth="250"
Margin="8,4,8,4"
Style="{StaticResource TextBlockStyle_Light}"
Text="{Binding (Validation.Errors)[0].ErrorContent}"
TextWrapping="Wrap" // here you control the wrapping, so you could do the same on ValidationSummary
UseLayoutRounding="false" />
</Border>
</Grid>
</ControlTemplate>
Hope it helps.
Related
I haven't found anything that works.
This is my code:
<data:DataGrid x:Name="dgSample"
Grid.Row="2"
CanUserSortColumns="True"
CanUserResizeColumns="False"
HorizontalScrollBarVisibility="Hidden"
IsReadOnly="True"
AutoGenerateColumns="False"
HorizontalAlignment="{Binding Path=App.TextAlignment,
Source={StaticResource LocalizedStrings}}"
Foreground="Black"
FontWeight="Normal"
FlowDirection="{Binding Path=App.FlowDirection,
Source={StaticResource LocalizedStrings}}"
AreRowDetailsFrozen="True"
LoadingRow="dgSample_LoadingRow">
You need to edit the Template, here's an example of a RowStyle you can use on a DataGrid. Tweak the colours and mouseovers to your requirements.
Use it like this ...
<sdk:DataGrid RowStyle="{StaticResource BetterHighlightedDataGridRowStyle}" />
Define it like this ...
<Style x:Key="BetterHighlightedDataGridRowStyle" TargetType="sdk:DataGridRow">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="sdk:DataGridRow">
<sdk:DataGridFrozenGrid x:Name="Root">
<sdk:DataGridFrozenGrid.Resources>
<Storyboard x:Key="DetailsVisibleTransition">
<DoubleAnimation Duration="00:00:0.1" Storyboard.TargetProperty="ContentHeight" Storyboard.TargetName="DetailsPresenter"/>
</Storyboard>
</sdk:DataGridFrozenGrid.Resources>
<sdk:DataGridFrozenGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</sdk:DataGridFrozenGrid.ColumnDefinitions>
<sdk:DataGridFrozenGrid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</sdk:DataGridFrozenGrid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="NormalAlternatingRow">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundRectangle"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundRectangle"/>
</Storyboard>
</VisualState>
<VisualState x:Name="NormalSelected">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundRectangle"/>
<ColorAnimation Duration="0" To="#DDE9EE33" Storyboard.TargetProperty="(Fill).Color" Storyboard.TargetName="BackgroundRectangle"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOverSelected">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundRectangle"/>
<ColorAnimation Duration="0" To="#E1C8C864" Storyboard.TargetProperty="(Fill).Color" Storyboard.TargetName="BackgroundRectangle"/>
</Storyboard>
</VisualState>
<VisualState x:Name="UnfocusedSelected">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundRectangle"/>
<ColorAnimation Duration="0" To="#DDE9EE33" Storyboard.TargetProperty="(Fill).Color" Storyboard.TargetName="BackgroundRectangle"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="Invalid">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="BackgroundRectangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="InvalidVisualElement"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="BackgroundRectangle" Grid.ColumnSpan="2" Fill="#FFBADDE9" Opacity="0" Grid.RowSpan="2"/>
<Rectangle x:Name="InvalidVisualElement" Grid.ColumnSpan="2" Fill="#FFF7D8DB" Opacity="0" Grid.RowSpan="2"/>
<sdk:DataGridRowHeader x:Name="RowHeader" sdk:DataGridFrozenGrid.IsFrozen="True" Grid.RowSpan="3"/>
<sdk:DataGridCellsPresenter x:Name="CellsPresenter" Grid.Column="1" sdk:DataGridFrozenGrid.IsFrozen="True"/>
<sdk:DataGridDetailsPresenter x:Name="DetailsPresenter" Grid.Column="1" Grid.Row="1"/>
<Rectangle x:Name="BottomGridLine" Grid.ColumnSpan="2" Fill="Black" HorizontalAlignment="Stretch" Height="2" Grid.Row="2"/>
</sdk:DataGridFrozenGrid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So, what I set out to do is template my radio buttons and tab items to look the same so that they look the same but can act differently. SoIi created a Control template and targeted it to the Content Control type and used it as a static resource to template the two types.
Everything works except i cant figure out how to set the header to display as the label. The 'Content' Property picks up the radio button label text, but when I try binding to the 'Header' property I fail at getting the label text.
Here is the content control Control Template Xaml:
<!-- Tab Selector Style -->
<ControlTemplate x:Key="TabSelectorStyle" TargetType="ContentControl">
<Grid x:Name="Root" HorizontalAlignment="Stretch">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates" >
<VisualState x:Name="Normal" >
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Box" Storyboard.TargetProperty="Fill">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0:0:0.1">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FF323232"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="Box" Storyboard.TargetProperty="StrokeThickness" To="1" Duration="0:0:0.1" />
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Box" Storyboard.TargetProperty="Fill">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0:0:0.3">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FF326699"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="Box" Storyboard.TargetProperty="StrokeThickness" To="1.5" Duration="0:0:0.3" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates" >
<VisualState x:Name="Selected" >
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Check" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.3" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unselected" >
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Check" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.3" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Margin="{Binding Path=Margin}">
<Grid Margin="5,2,5,2" HorizontalAlignment="Center">
<Rectangle x:Name="Box"
Width="10" Height="10"
Fill="#FF323232" Stroke="#FFFFFFFF" StrokeThickness="1"
VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Rectangle x:Name="Check"
Width="8" Height="8"
Fill="#FFFFFFFF" Opacity="0"
VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<TextBlock x:Name="RadioButtionTitle" Foreground="#FFFFFFFF" Text="{TemplateBinding Content}" HorizontalAlignment="Stretch" Width="Auto" Margin="5,2,5,2"/>
<!-- F I X E D H E R E -->
<TextBlock x:Name="TabitemTitle" Foreground="#FFFFFFFF" Text="{Binding Header, RelativeSource={RelativeSource FindAncestor, AncestorType=presentcontrols:TabItem}}" HorizontalAlignment="Stretch" Width="Auto" Margin="5,2,5,2"/>
<!-- =================== -->
</StackPanel>
</Grid>
</ControlTemplate>
I can't create an animation, or customize a color in ContentPresenter (NormalTextDay), this error appears in my XAML:
'System.Windows.Media.Animation.ColorAnimation' animation object can not be used to animate property 'Foreground' it is because of incompatible type 'System.Windows.Media.Brush
<Style x:Key="CalendarDayButtonStyle" TargetType="{x:Type CalendarDayButton}">
<Setter Property="MinWidth" Value="5"/>
<Setter Property="MinHeight" Value="5"/>
<Setter Property="FontSize" Value="10"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CalendarDayButton}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HighlightBackground"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HighlightBackground"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<!--<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HighlightBackground"/>
<DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="NormalText"/>
</Storyboard>-->
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBackground"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CalendarButtonFocusStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="CalendarButtonFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DayButtonFocusVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="CalendarButtonUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DayButtonFocusVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ActiveStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Active"/>
<VisualState x:Name="Inactive">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="NormalTextDay"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridValues"/>
<!--<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="NormalTextDay">
<EasingColorKeyFrame KeyTime="0" Value="#FFA71616"/>
</ColorAnimationUsingKeyFrames>-->
<!--<ColorAnimation Duration="0" To="#FF777777" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="NormalTextDay"/>-->
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DayStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="RegularDay"/>
<VisualState x:Name="Today">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="TodayBackground"/>
<ColorAnimation Duration="0" To="#FFFFFFFF" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="NormalTextDay"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="BlackoutDayStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="NormalDay"/>
<VisualState x:Name="BlackoutDay">
<Storyboard>
<DoubleAnimation Duration="0" To=".2" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Blackout"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle x:Name="TodayBackground" Fill="#FFAAAAAA" Opacity="0" RadiusY="1" RadiusX="1" Grid.RowSpan="2"/>
<Rectangle x:Name="SelectedBackground" Fill="#FFBADDE9" Opacity="0" RadiusY="1" RadiusX="1" Grid.RowSpan="2"/>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.RowSpan="2" Background="{TemplateBinding Background}"/>
<Rectangle x:Name="HighlightBackground" Fill="#FFBADDE9" Opacity="0" RadiusY="1" RadiusX="1" Grid.RowSpan="2"/>
<ContentPresenter x:Name="NormalTextDay" TextBlock.Foreground="#FF333333" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Grid.Row="0">
</ContentPresenter>
<Path x:Name="Blackout" Data="M8.1772461,11.029181 L10.433105,11.029181 L11.700684,12.801641 L12.973633,11.029181 L15.191895,11.029181 L12.844727,13.999395 L15.21875,17.060919 L12.962891,17.060919 L11.673828,15.256231 L10.352539,17.060919 L8.1396484,17.060919 L10.519043,14.042364 z" Fill="#FF000000" HorizontalAlignment="Stretch" Margin="3" Opacity="0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" VerticalAlignment="Stretch" Grid.RowSpan="2"/>
<Rectangle x:Name="DayButtonFocusVisual" IsHitTestVisible="false" RadiusY="1" RadiusX="1" Stroke="#FF45D6FA" Visibility="Collapsed" Grid.RowSpan="2"/>
<DataGrid Margin="0,0,0,0" x:Name="GridValues" Grid.Row="1">
<DataGrid.Columns>
<DataGridTemplateColumn Header="Período" Width="*" MaxWidth="200"/>
<DataGridTemplateColumn Header="Nº Max." Width="Auto" />
</DataGrid.Columns>
</DataGrid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Not quite sure... but you might need to change this:
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
to this:
Storyboard.TargetProperty="(TextBlock.Foreground).Color"
as in this syntax "Foreground" and "SolidColorBrush" are the same object you seem to be duplicating it.
I want to change the background color of checkbox when its checked instead of show an icon but i have no idea of how to do this. I've tried to create a new "Rectangle" with a different background color and call him on VisualState "Checked" but it didnt work.
My code :
<Style TargetType="CheckBox">
<Setter Property="Background" Value="{StaticResource CheckBoxBackgroundBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource CheckBoxBorderBrush}" />
<Setter Property="Foreground" Value="{StaticResource NormalFontBrush}" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="Padding" Value="6,1,0,0" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="13" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="MouseOverBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PressedBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter" />
<DoubleAnimation Duration="0" To="0.55" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DisabledVisualElement" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="CheckIcon" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="IndeterminateIcon" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(FrameworkElement.Opacity)" To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid" />
<VisualState x:Name="InvalidUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="InvalidFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" Storyboard.TargetName="validationTooltip">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Height="12" HorizontalAlignment="Left" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Width="12">
<Rectangle x:Name="Background" Fill="{TemplateBinding Background}" Height="12" Stroke="{TemplateBinding BorderBrush}" Width="12" />
<Border x:Name="OuterHighlight" BorderBrush="{StaticResource ControlOuterHighlightBrush}" BorderThickness="0,0,1,1" CornerRadius="1,0,1,0" Margin="1,1,-1,-1" />
<Border x:Name="InnerShadow" BorderBrush="{StaticResource CheckBoxInnerShadowBrush}" BorderThickness="1,1,0,0" CornerRadius="0.5" Margin="1,1,0,0" />
<Border x:Name="MouseOverBorder" BorderBrush="{StaticResource ColorAccentBrush}" BorderThickness="1" Margin="1" Visibility="Collapsed" />
<Border x:Name="PressedBorder" BorderBrush="{StaticResource ColorAccentSubduedBrush}" BorderThickness="1" Margin="1" Visibility="Collapsed" />
<Path x:Name="CheckIcon" Data="M0.5625,5.0625 L1.5,3.9375 L2.9575791,4.9549685 C2.9575791,4.9549685 5.75,1.125 5.75,1.125 C5.75,1.125 6.9375,2 6.9375,2 C6.9375,2 3.186887,7.0000076 3.186887,7.0000076 z" Fill="{StaticResource CheckBoxColorAccentHighlightBrush}" FlowDirection="LeftToRight" Margin="2,2,0,1" Opacity="0"/>
<Rectangle x:Name="IndeterminateIcon" Fill="{StaticResource ColorAccentHighlightBrush}" Height="2" Opacity="0" Width="6" />
<Rectangle x:Name="DisabledVisualElement" Fill="{StaticResource DisabledBrush}" Height="12" Opacity="0" Width="12" />
<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="False" Margin="2" Opacity="0" Stroke="{StaticResource FocusVisualBrush}" StrokeThickness="{StaticResource FocusVisualStrokeThickness}" />
<Border x:Name="ValidationErrorElement" BorderBrush="{StaticResource ErrorBrush}" BorderThickness="1" Margin="1" ToolTipService.PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Visibility="Collapsed">
<ToolTipService.ToolTip>
<ToolTip x:Name="validationTooltip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource ValidationToolTipTemplate}">
<ToolTip.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="validationTooltip">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>true</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToolTip.Triggers>
</ToolTip>
</ToolTipService.ToolTip>
<Grid Background="Transparent" HorizontalAlignment="Right" Height="10" Margin="0,-4,-4,0" VerticalAlignment="Top" Width="10">
<Path Data="M 1,0 L5,0 A 2,2 90 0 1 7,2 L7,6 z" Fill="{StaticResource ErrorBrush}" Margin="0,3,0,0" />
</Grid>
</Border>
</Grid>
<ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Thanks!
You are on the right track. Create a rectangle (or border) with the desired background color and Opacity 0. In the Checked state, animate the Opacity to 1. Alternatively, set the Visibility to Collapsed and animate visibility similar to how the PressedBorder element is animated in the Pressed state.
Under PressedBorder
<Border x:Name="CheckedBorder" BorderThickness="1" Margin="1" Background="Green" Visibility="Collapsed" />
In VSM:
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PressedBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
My individual ListBox has two different ItemTemplates - which gone be chosen by a TemplateSelector.
This works fine and i have two different ItemTmplates shown up on the screen.
But what i dont have instead is a Selection. So i can't select an Item in the ListBox. With the Keyboard it works and you can select one.
Here is what my ContainserStyle looks like:
<Style x:Key="ListBoxItemStyleMain" TargetType="ListBoxItem">
<Setter Property="Padding" Value="5" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid x:Name="grid" Background="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<CompositeTransform />
</Grid.RenderTransform>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity" Duration="0" To=".35" />
<DoubleAnimation Duration="0:0:0.3" To="1.1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:0.3" To="1.1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To=".55" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
</VisualStateGroup>
<VisualStateGroup x:Name="LayoutStates">
<VisualState x:Name="AfterLoaded"/>
<VisualState x:Name="BeforeLoaded"/>
<VisualState x:Name="BeforeUnloaded"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="fillColor" Fill="{StaticResource SolidBrushSmarxGreen20}" IsHitTestVisible="False" Opacity="0" RadiusX="1" RadiusY="1" d:LayoutOverrides="GridBox" />
<Rectangle x:Name="fillColor2" Fill="{StaticResource SolidBrushSmarxGreen60}" IsHitTestVisible="False" Opacity="0" RadiusX="1" RadiusY="1" d:LayoutOverrides="GridBox" />
<ContentPresenter x:Name="contentPresenter" RenderTransformOrigin="0.5,0.5" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}">
<ContentPresenter.RenderTransform>
<CompositeTransform />
</ContentPresenter.RenderTransform>
</ContentPresenter>
<Rectangle x:Name="FocusVisualElement" RadiusX="1" RadiusY="1" Stroke="{StaticResource SolidBrushSmarxGreen60}" StrokeThickness="1" Visibility="Collapsed" d:LayoutOverrides="GridBox"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So - as you can see, i have a Selected-State defined.
It's all default styling and Templating - except for the colors.
Thanks in any advice :)
regards
Mike
Found it out - it's really unclear why i don't get a selection. Because when i insert some Items with Content (which i haven't got at the moment), then the selection works fine.
The Selection State works anyway - but you have to click precisely on the Focus Border :)