Visual-state in SilverLight? (how we use that) - silverlight

I wrote simple template in xaml for button s.(for silver-light 4)
So when I try use "ControlTemplate.Triggers", I found that is impossible in silver-light, and we must use Visual-State in Silver-Light
so I wrote first ControlTemplate with Visual-State but it not work fine.(here is code)
<Style x:Key="NextButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="MainGrid">
<Border x:Name="MainBorder"
BorderThickness="2"
BorderBrush="#FFC0C0C0"
Background="Bisque"
CornerRadius="4 4 4 4" >
<TextBlock x:Name="lbl"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Text=">"
Foreground="#FFC0C0C0"
FontWeight="Bold"
FontFamily="TimesNewRoman"
FontSize="15"/>
</Border>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames AutoReverse="False" Duration="00:00:00.2"
Storyboard.TargetName="MainBorder"
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color}">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FF606060"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames AutoReverse="False" Duration="00:00:00.2"
Storyboard.TargetName="lbl"
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color}">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FF606060"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
When i use this style and move on this border this border, both of border and textbloc became invisible. so
1) What do i do?
2) and is there any good examples for Visual-State

Because of two simple mistakes u r style was not working , else all is right.
1)Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color}
It will be :
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)
2) The same goes for the textblock :
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color}
It will be :
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)

Related

Changing states for a custom styled ToggleButton with two distinct Path Markup Syntaxes

I am a beginner in WPF and have been trying to come up with a custom style template for a ToggleButton. I've so far managed to define the paths with bezier curves, but got stuck into the following issue:
How can I combine the two Paths, such that when I hover the ToggleButton, the color in BOTH PATHS is changed according to the attached image. There need to be two distinct color values, one for the main part and the other for the blue bar on the top. Here is a part of my canvas in XAML:
<Canvas Width="180" Height="180" Canvas.Left="0" Canvas.Top="0" HorizontalAlignment="Center" VerticalAlignment="Top">
<Path Stretch="Fill" StrokeLineJoin="Miter" Stroke="#FFB5BECB" Fill="#FFEDF2F7" Data="F1 M 90,18C 109.882,18 127.882,26.0589 140.912,39.0883L 152.225,27.7746C 136.301,11.8497 114.301,2.00002 90,2.00002L 90,18 Z"/>
<Path Stretch="Fill" StrokeLineJoin="Miter" Stroke="#FFB5BECB" Fill="#FFCDD5DE" Data="F1 M 90,18C 109.882,18 127.882,26.0589 140.912,39.0883L 152.225,27.7746C 136.301,11.8497 114.301,2.00002 90,2.00002L 90,18 Z "/>
<Path Stretch="Fill" StrokeThickness="1" StrokeLineJoin="Miter" Stroke="#FF6F9FFF" Fill="#FF6F9FFF" Data="F1 M 89.9999,5.00005C 113.472,5.00005 134.722,14.514 150.104,29.896L 152.225,27.7746C 136.301,11.8497 114.301,2.00002 90,2.00002L 89.9999,5.00005 Z "/>
<Path Stretch="Fill" StrokeThickness="1" StrokeLineJoin="Miter" Stroke="#FF13487E" Fill="#FF13487E" Data="F1 M 89.9999,5.00005C 113.472,5.00005 134.722,14.514 150.104,29.896L 152.225,27.7746C 136.301,11.8497 114.301,2.00002 90,2.00002L 89.9999,5.00005 Z"/>
</Canvas>
The following image shows the expected primary and the hover states.
You can name your elements by assigning an x:Name. Then you can refer to them in a Trigger that checks the IsMouseOver property on a parent container, e.g. the Canvas.
Since you do not provide your full control template, this one is the part that you posted, adapted to change the Strokes and Fills of the Paths on mouse over.
<ToggleButton Content="Templated Toggle Button">
<ToggleButton.Template>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<!-- ...here might be a container that you did not provide in your question. -->
<Canvas x:Name="MyCanvas" Width="180" Height="180" Canvas.Left="0" Canvas.Top="0" HorizontalAlignment="Center" VerticalAlignment="Top">
<Path x:Name="TopPart" Stretch="Fill" StrokeLineJoin="Miter" Stroke="#FFB5BECB" Fill="#FFCDD5DE" Data="F1 M 90,18C 109.882,18 127.882,26.0589 140.912,39.0883L 152.225,27.7746C 136.301,11.8497 114.301,2.00002 90,2.00002L 90,18 Z "/>
<Path x:Name="BottomPart" Stretch="Fill" StrokeThickness="1" StrokeLineJoin="Miter" Stroke="#FF13487E" Fill="#FF13487E" Data="F1 M 89.9999,5.00005C 113.472,5.00005 134.722,14.514 150.104,29.896L 152.225,27.7746C 136.301,11.8497 114.301,2.00002 90,2.00002L 89.9999,5.00005 Z"/>
</Canvas>
<ControlTemplate.Triggers>
<Trigger SourceName="MyCanvas" Property="IsMouseOver" Value="True">
<Setter TargetName="TopPart" Property="Stroke" Value="#FFB5BECB"/>
<Setter TargetName="TopPart" Property="Fill" Value="#FFEDF2F7"/>
<Setter TargetName="BottomPart" Property="Stroke" Value="#FF6F9FFF"/>
<Setter TargetName="BottomPart" Property="Fill" Value="#FF6F9FFF"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
Update for your comment. A control template can consist of several named part and visual states that define the visual appearance and behavior of the control. Some parts may even be required for the control to work correctly. You can find them in the documentation for styles and templates with examples, but beware that those may be incomplete.
In case of the ToggleButton, there are many visual states e.g. MouseOver, Pressed, Checked, and so on. You can simply define storyboards for each to define the appearance and transitions between states. This approach uses the VisualStateManager, which is an alternative to styles and triggers. There are many tutorials out there. Your template could look like below. Add storyboards to states as necessary. An easier way to define visual states than editing XAML code is to use Blend, where you can edit them conveniently using a GUI Editor. See Blend 2015: Create Visual States or similar tutorials for an overview.
<ToggleButton Content="Templated Toggle Button">
<ToggleButton.Template>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<!-- ...here might be a container that you did not provide in your question. -->
<Canvas x:Name="MyCanvas"
Width="180"
Height="180"
Canvas.Left="0"
Canvas.Top="0"
HorizontalAlignment="Center"
VerticalAlignment="Top">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke.(SolidColorBrush.Color)"
Storyboard.TargetName="TopPart">
<EasingColorKeyFrame KeyTime="0"
Value="#FFB5BECB" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"
Storyboard.TargetName="TopPart">
<EasingColorKeyFrame KeyTime="0"
Value="#FFEDF2F7" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke.(SolidColorBrush.Color)"
Storyboard.TargetName="BottomPart">
<EasingColorKeyFrame KeyTime="0"
Value="#FF6F9FFF" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"
Storyboard.TargetName="BottomPart">
<EasingColorKeyFrame KeyTime="0"
Value="#FF6F9FFF" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke.(SolidColorBrush.Color)"
Storyboard.TargetName="TopPart">
<EasingColorKeyFrame KeyTime="0"
Value="DarkRed" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"
Storyboard.TargetName="TopPart">
<EasingColorKeyFrame KeyTime="0"
Value="Red" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke.(SolidColorBrush.Color)"
Storyboard.TargetName="BottomPart">
<EasingColorKeyFrame KeyTime="0"
Value="Blue" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"
Storyboard.TargetName="BottomPart">
<EasingColorKeyFrame KeyTime="0"
Value="Blue" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked" />
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path x:Name="TopPart"
Stretch="Fill"
StrokeLineJoin="Miter"
Stroke="#FFB5BECB"
Fill="#FFCDD5DE"
Data="F1 M 90,18C 109.882,18 127.882,26.0589 140.912,39.0883L 152.225,27.7746C 136.301,11.8497 114.301,2.00002 90,2.00002L 90,18 Z " />
<Path x:Name="BottomPart"
Stretch="Fill"
StrokeThickness="1"
StrokeLineJoin="Miter"
Stroke="#FF13487E"
Fill="#FF13487E"
Data="F1 M 89.9999,5.00005C 113.472,5.00005 134.722,14.514 150.104,29.896L 152.225,27.7746C 136.301,11.8497 114.301,2.00002 90,2.00002L 89.9999,5.00005 Z" />
</Canvas>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>

Change Path.Data in a wpf storyboard

How does one animate path data in wpf? We have a series of templated silverlight-5 controls which change this property; these controls need to be adapted to work in wpf. In wpf, when the VSM tries to change the state, it crashes with the following exception:
Cannot animate the 'Data' property on a 'System.Windows.Shapes.Path' using a 'System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames'
Inner exception:
The animation(s) applied to the 'Data' property calculate a current value of [XXX-The path data-] , which is not a valid value for the property.
There is an example below for a button-control: a path which goes from a circle to a star- how can this be implimented in wpf?
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Path.Data)" Storyboard.TargetName="path">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>M 291.42858 512.36218 216.73569 387.62221 74.321018 416.8994 169.87441 307.31546 98.0216 180.91821 l 133.74814 57.01338 98.00719 -107.39498 -12.89251 144.82014 132.42459 60.0235 -141.71614 32.49039 z</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Viewbox>
<Path x:Name="path" Stroke="Black" Fill="Black" UseLayoutRounding="False" Data="m 357.14285 425.21933 c 0 71.79702 -58.20298 130 -130 130 -71.79701 0 -129.999997 -58.20298 -129.999997 -130 0 -71.79702 58.202987 -130 129.999997 -130 71.79702 0 130 58.20298 130 130 z"/>
</Viewbox>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
No point in using element syntax if you do not create an object instance, it's still a string and the Data is Geometry, just wrap it in said tag and it should work.
<DiscreteObjectKeyFrame.Value>
<Geometry>
M 291.42858 512.36218 216.73569 387.62221 74.321018 416.8994 169.87441 307.31546 98.0216 180.91821 l 133.74814 57.01338 98.00719 -107.39498 -12.89251 144.82014 132.42459 60.0235 -141.71614 32.49039 z
</Geometry>
</DiscreteObjectKeyFrame.Value>

Fade effect for Silverlight 4 "list"

I'd like a way to display a list of text strings that fades like the following:
If you're using Office 2010, the effect is used in the new splash screens.
What I'd like is to have the last item selected and all items above faded so we achieve a similar affect. As items are added, the new item is selected and the previous item moves up and fades away.
Any ideas?
You can use a ListBox to achieve what you want.
In Silverlight 4, there is a new group of states LayoutStates available within ListBoxItem style.
It has three visual states, AfterLoaded, BeforeUnloaded and BeforeLoaded.
As the names imply, the BeforeLoaded state occurs right before the
ListBoxItem is added to the ListBox and the AfterLoaded state happens
after the ListBoxItem is added. BeforeUnloaded happens right before the ListBoxItem is removed.
In your case, you need to animate the fade in (Opacity and TranslateY) in the BeforeLoaded state when you try to add a new line of text, and animate the fade out in the BeforeUnloaded state when you try to remove the top line. Below is just one simple example.
<Style x:Key="AnimatedListBoxItemStyle" TargetType="ListBoxItem">
...
<VisualStateGroup x:Name="LayoutStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.4" To="BeforeUnloaded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-37" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition GeneratedDuration="0:0:1" />
</VisualStateGroup.Transitions>
<VisualState x:Name="BeforeUnloaded" />
<VisualState x:Name="BeforeLoaded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0" Value="37" />
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="AfterLoaded" />
</VisualStateGroup>
Because after you removed the first line, the rest ListBoxItems will jump up at once to fill the empty space. To make this transition fluidly, you can overwrite the ListBox's ItemsPanel with a normal StackPanel, and attach a FluidMoveBehavior to it. Remeber to set the AppliesTo to Children. This means the animation will happen to the ListBox's children which are the ListBoxItems.
<ItemsPanelTemplate x:Key="ItemsPanelTemplate">
<StackPanel>
<i:Interaction.Behaviors>
<ei:FluidMoveBehavior AppliesTo="Children"/>
</i:Interaction.Behaviors>
</StackPanel>
</ItemsPanelTemplate>
Hope this helps. :)
UPDATE
You use OpacityMask to create the fade.
<ScrollViewer Padding="0" HorizontalAlignment="Center" Width="180" Height="300" VerticalAlignment="Center" VerticalScrollBarVisibility="Disabled" BorderThickness="0">
<ScrollViewer.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="Transparent" Offset="0" />
<GradientStop Color="Black" Offset="0.1" />
</LinearGradientBrush>
</ScrollViewer.OpacityMask>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="First Line" FontSize="14.667"/>
<TextBlock Text="Second Line" Grid.Row="1" FontSize="14.667"/>
</Grid>
</ScrollViewer>

How to create template for Silverlight 3 custom DataGrid RowHeaderGroup?

Thanks for reading my question!
I have a problem with customizing a DataGrid RowGroupHeader, the situation is:
I need a way of taking control over a DataGrid RowGroupHeader as I want to display some databound values in it. The values will be generated at runtime so the RowGroupHeaderStyle needs to be generated and added to DataGrid's RowGroupHeaderStyles property at runtime too (possibly using XamlReader.Load).
Additionally the position of the databound value within the RowGroupHeader should be aligned with a corresponding column from the DataGrid.
I've managed to create a working template using this post MS Forum but I had no luck with positioning the databound element, in my case TextBlock, to correctly align with a given DataGrid column.
Any suggestions?
Many thanks
This hasn't been an easy one but after some extensive googling and piecing up other people's experiences I've come up with this that work fine for me
string loadString = #"<Style xmlns=""http://schemas.microsoft.com/client/2007"" xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml""
xmlns:localprimitives=""clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data""
xmlns:vsm=""clr-namespace:System.Windows;assembly=System.Windows""
xmlns:data=""clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"" TargetType=""data:DataGridRowGroupHeader"">
<Setter Property=""Cursor"" Value=""Arrow"" />
<Setter Property=""IsTabStop"" Value=""False"" />
<Setter Property=""Background"" Value=""#FFE4E8EA"" />
<Setter Property=""Height"" Value=""20""/>
<Setter Property=""Template"">
<Setter.Value>
<ControlTemplate TargetType=""data:DataGridRowGroupHeader"">
<localprimitives:DataGridFrozenGrid Name=""Root"" Background=""{TemplateBinding Background}"">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name=""CurrentStates"">
<vsm:VisualState x:Name=""Regular""/>
<vsm:VisualState x:Name=""Current"">
<Storyboard>
<DoubleAnimation Storyboard.TargetName=""FocusVisual"" Storyboard.TargetProperty=""Opacity"" To=""1"" Duration=""0"" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<localprimitives:DataGridFrozenGrid.Resources>
</localprimitives:DataGridFrozenGrid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=""Auto"" />
<ColumnDefinition Width=""Auto"" />
<ColumnDefinition Width=""Auto"" />
<ColumnDefinition Width=""Auto"" />
<ColumnDefinition Width=""Auto"" />
<ColumnDefinition Width=""Auto"" />"
At this point I have some dynamic columns in the grid so I'm adding them just as the Grid.ColumnDefinitions so far but if your datagrid is static then you put the right number of columns.
+ colStr1 +
#"</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=""Auto""/>
<RowDefinition/>
<RowDefinition Height=""Auto""/>
</Grid.RowDefinitions>
<StackPanel x:Name=""CustomRGHStackPanel"" Orientation=""Horizontal"" Tag=" + _tagNo + #" Grid.Column=""3"" Grid.Row=""1"" VerticalAlignment=""Center"" Margin=""0,1,0,1"">
<StackPanel.Resources>
<Style TargetType=""data:DataGridCell"">
<Setter Property=""Background"" Value=""Transparent"" />
<Setter Property=""HorizontalContentAlignment"" Value=""Stretch"" />
<Setter Property=""VerticalContentAlignment"" Value=""Stretch"" />
<Setter Property=""IsTabStop"" Value=""False"" />
<Setter Property=""FontWeight"" Value=""Black""/>
<Setter Property=""Template"">
<Setter.Value>
<ControlTemplate TargetType=""data:DataGridCell"">
<Grid Margin=""1,-1,-1,0"" >
<Grid Name=""Root"" Background=""{TemplateBinding Background}"" Margin=""5,0,0,0"">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name=""CurrentStates"">
<vsm:VisualState x:Name=""Regular"" />
<vsm:VisualState x:Name=""Current"">
<Storyboard>
<DoubleAnimation Storyboard.TargetName=""FocusVisual"" Storyboard.TargetProperty=""Opacity"" To=""1"" Duration=""0"" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name=""ValidationStates"">
<vsm:VisualState x:Name=""Valid""/>
<vsm:VisualState x:Name=""Invalid"">
<Storyboard>
<DoubleAnimation Storyboard.TargetName=""InvalidVisualElement"" Storyboard.TargetProperty=""Opacity"" Duration=""0"" To=""1""/>
<ColorAnimation Storyboard.TargetName=""FocusVisual"" Storyboard.TargetProperty=""(Fill).Color"" Duration=""0"" To=""#FFFFFFFF""/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width=""Auto"" />
</Grid.ColumnDefinitions>
<Rectangle Name=""FocusVisual"" Stroke=""#FF6DBDD1"" StrokeThickness=""1"" Fill=""#66FFFFFF"" HorizontalAlignment=""Stretch""
VerticalAlignment=""Stretch"" IsHitTestVisible=""false"" Opacity=""0"" />
<ContentPresenter
Content=""{TemplateBinding Content}""
ContentTemplate=""{TemplateBinding ContentTemplate}""
HorizontalAlignment=""{TemplateBinding HorizontalContentAlignment}""
VerticalAlignment=""{TemplateBinding VerticalContentAlignment}""
Margin=""{TemplateBinding Padding}"" />
<Rectangle x:Name=""InvalidVisualElement"" IsHitTestVisible=""False"" StrokeThickness=""1"" Stroke=""#FFDC000C"" HorizontalAlignment=""Stretch"" VerticalAlignment=""Stretch"" Opacity=""0""/>
<Rectangle Name=""q1q"" Fill=""#c9caca"" Grid.Column=""1"" Margin=""1,0,1,0"" HorizontalAlignment=""Right"" VerticalAlignment=""Stretch"" Width=""0"" />
</Grid>
<Rectangle Name=""qq"" Fill=""#c9caca"" Margin=""1,0,1,0"" HorizontalAlignment=""Left"" VerticalAlignment=""Stretch"" Width=""1"" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<data:DataGridCell Content=""{Binding Name}""/>
<data:DataGridCell Content=""""/>
<data:DataGridCell Content=""""/>
<data:DataGridCell Content=""""/>
<data:DataGridCell Content=""""/>
<data:DataGridCell HorizontalContentAlignment=""Left"" Margin=""7,0,0,0"" Content=""{Binding Converter={StaticResource myConverter}, ConverterParameter=TotalScore}""/>" + colStr2 +
#"</StackPanel>
<Rectangle Grid.Column=""1"" Grid.ColumnSpan=""5"" Fill=""#FFFFFFFF"" Height=""1""/>
<Rectangle Grid.Column=""1"" Grid.Row=""1"" Name=""IndentSpacer"" />
<ToggleButton Grid.Column=""2"" Grid.Row=""1"" Name=""ExpanderButton"" Height=""15"" Width=""15"" Margin=""2,0,0,0"">
<ToggleButton.Template>
<ControlTemplate TargetType=""ToggleButton"">
<Grid Background=""Transparent"">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name=""CommonStates"">
<vsm:VisualState x:Name=""Normal""/>
<vsm:VisualState x:Name=""MouseOver"">
<Storyboard>
<ColorAnimation Storyboard.TargetName=""CollapsedArrow"" Storyboard.TargetProperty=""(Stroke).Color"" Duration=""0"" To=""#FF6DBDD1""/>
<ColorAnimation Storyboard.TargetName=""ExpandedArrow"" Storyboard.TargetProperty=""(Fill).Color"" Duration=""0"" To=""#FF6DBDD1""/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name=""Pressed"">
<Storyboard>
<ColorAnimation Storyboard.TargetName=""CollapsedArrow"" Storyboard.TargetProperty=""(Stroke).Color"" Duration=""0"" To=""#FF6DBDD1""/>
<ColorAnimation Storyboard.TargetName=""ExpandedArrow"" Storyboard.TargetProperty=""(Fill).Color"" Duration=""0"" To=""#FF6DBDD1""/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name=""Disabled"">
<Storyboard>
<DoubleAnimation Duration=""0"" Storyboard.TargetName=""CollapsedArrow"" Storyboard.TargetProperty=""Opacity"" To="".5""/>
<DoubleAnimation Duration=""0"" Storyboard.TargetName=""ExpandedArrow"" Storyboard.TargetProperty=""Opacity"" To="".5""/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name=""CheckStates"">
<vsm:VisualState x:Name=""Checked"" />
<vsm:VisualState x:Name=""Unchecked"">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration=""0"" Storyboard.TargetName=""CollapsedArrow"" Storyboard.TargetProperty=""Visibility"">
<DiscreteObjectKeyFrame KeyTime=""0"" Value=""Visible""/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration=""0"" Storyboard.TargetName=""ExpandedArrow"" Storyboard.TargetProperty=""Visibility"">
<DiscreteObjectKeyFrame KeyTime=""0"" Value=""Collapsed""/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Path Stretch=""Uniform"" Data=""F1 M 0,0 L 0,1 L .6,.5 L 0,0 Z"" Width=""5"" HorizontalAlignment=""Center"" VerticalAlignment=""Center"" x:Name=""CollapsedArrow"" Visibility=""Collapsed"" Stroke=""#FF414345""/>
<Path Stretch=""Uniform"" Data=""F1 M 0,1 L 1,1 L 1,0 L 0,1 Z"" Width=""6"" HorizontalAlignment=""Center"" VerticalAlignment=""Center"" x:Name=""ExpandedArrow"" Fill=""#FF414345""/>
</Grid>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<Rectangle Grid.Column=""1"" Grid.ColumnSpan=""5"" Fill=""#FFD3D3D3"" Height=""1"" Grid.Row=""2""/>
<Rectangle Name=""FocusVisual"" Grid.Column=""1"" Grid.ColumnSpan=""4"" Grid.RowSpan=""3"" Stroke=""#FF6DBDD1"" StrokeThickness=""1"" HorizontalAlignment=""Stretch""
VerticalAlignment=""Stretch"" IsHitTestVisible=""false"" Opacity=""0"" />
<localprimitives:DataGridRowHeader Name=""RowHeader"" Grid.RowSpan=""3"" localprimitives:DataGridFrozenGrid.IsFrozen=""True""/>
</localprimitives:DataGridFrozenGrid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>";
This is where your cell content comes in, and again I have some dynamic columns so I need to add cells dynamically (no need to do this if your grid is static)
<data:DataGridCell Content=""{Binding Name}""/>
<data:DataGridCell Content=""""/>
<data:DataGridCell Content=""""/>
<data:DataGridCell Content=""""/>
<data:DataGridCell Content=""""/>
<data:DataGridCell HorizontalContentAlignment=""Left"" Margin=""7,0,0,0"" Content=""{Binding Converter={StaticResource myConverter}, ConverterParameter=TotalScore}""/>" + colStr2 +
That is it pretty much, yes I agree it's not a trivial job but it gives you custom style when you need it! Feel free to comment!

How to set Viewbox content based on DataTrigger

I've video player with two button: Play and Pause.
I want to use only one button. when user clicks on Play, the button appearance will changed to Pause and vice versa.
What is the better approach to achieve that task without using cs code behind?
I've tried to use DataTrigger to my IsPlaying property, but with no much success....
Here is my code:
<Window.Resources>
<Viewbox x:Key="viewboxSource" >
<Viewbox.Triggers>
<DataTrigger Binding="{Binding IsPlaying}" Value="True">
<Setter Property="Path">
<Setter.Value>
<Path Stroke="Black" StrokeThickness="1" Fill="AliceBlue">
<Path.Data>
<GeometryGroup>
<EllipseGeometry Center="100,100" RadiusX="100" RadiusY="100"/>
</GeometryGroup>
</Path.Data>
</Path>
</Setter.Value>
</Setter>
</DataTrigger>
</Viewbox.Triggers>
</Viewbox>
</Window.Resources>
<StackPanel>
<Button Content="{StaticResource viewboxSource}"></Button>
</StackPanel>
But I gut an error that says " 'Path' member is not valid because it does not have a qualifying type name " .
Can anyone can help or give me a better solution?
These kind of behaviour fits toggle button patern.
Make a style in your resources
<Style x:Key="PlayToggleButtonStyle" TargetType="ToggleButton" >
and then define a templeate in it
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
What is the most important here is to use VisualStateManager.
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Disabled"/>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0" To="2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="border" />
<ColorAnimation Duration="0:0:0.2" To="#FF392929" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
I use 2 animation. One moves button for 2 pixels and second change the gradient which gives a nice experience.
The only drawback is you need to use storyboards to handle these states. You need to add a Path object which I called Geometry nad mainupulate it.
<Storyboard Storyboard.TargetName="Geometry"
Storyboard.TargetProperty="Data">
<ObjectAnimationUsingKeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value=""/> <!-- place the data here (how your button looks like) -->
</ObjectAnimationUsingKeyFrames>
</Storyboard>
But IMHO the better solution is to place 2 Path object in the template that on is over another and change the opacity of the top-most one.
<Storyboard>
<DoubleAnimation Storyboard.TargetName="TopGeometry" Storyboard.TargetProperty="Opacity" Duration="0:0:0.5" To="0.0">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseIn"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
You would have a nice transition between these two states. What is more, no data is needed f.e IsPLaying property.

Resources