Changing Style of objects inside controltemplate - c#

I made a new control which contains a rectangle in it with and some visual states.
<Style TargetType="Button" x:Key="banda">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions >
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0" To="#FF47B215" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="Border" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal">
<Storyboard>
<ColorAnimation Duration="0" To="{Binding Background, ElementName=Border}" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="Border" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="#FF86B072" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="Border" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" Background="purple" StrokeThickness="5" Stroke="{Binding Background, ElementName=Border}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This control is used many times in my application page and I'd like the rectangle to have different colour value every time it's used, for example when I press a button, the rectangle changes colour.
I don't have idea how to change the property of the rectangle inside the c# code though. Can someone help me with the formatting?


No sweat, just build that functionality into the template by binding the Background of it like so;
<Style TargetType="Button" x:Key="banda">
<Setter Property="Background" Value="Purple"/>
<Setter Property="BorderThickness" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0" To="#FF47B215" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="Border" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal">
<Storyboard>
<ColorAnimation Duration="0" To="{Binding Background, ElementName=Border}" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="Border" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="#FF86B072" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="Border" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{Binding Background, ElementName=Border}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So this way, the default color will be Purple (as seen in the Setter declaration) and you can change it on the fly like;
<Button Style="{StaticResource banda}" Content="Blah" Background="Orange"/>
However; it is normally recommended you don't attach to many state changes to a single object. For example if you load your template into Expression blend you'll and you look at your States Panel while editing your template, you'll see a triangle exclamation mark icon warning you that its not advised to base too many states around a single object in your template. Most of the time its fine though and will work as is. Also you had Stroke & StrokeThickness applied to a Border which doesn't have those Dependency Properties, so in the example I fixed that as well to BorderThickness and BorderBrush. Oh and you're probably also going to find how you have your properties so inter-relationship bound its going to cause you troubles. Ditch the things like;
<VisualState x:Name="Normal">
<Storyboard>
<ColorAnimation Duration="0" To="{Binding Background, ElementName=Border}" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="Border" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
and instead just bind it to the Background property via {TemplateBinding Background} instead. I would suggest looking at some of the default control templates for Buttons and comparing to learn more of how they're used.
Hope this helps.

Related

C# WPF change BorderBrush inside the DatePicker

I use a DatePicker for my application. I can change all the values I need. The last value that I need is the BorderBrush. I can't adjust the blue color shown here which is out of the standard. I have already created and edited a copy as CustomStyle. The theme of DatePicker seems relatively complex in WPF.
How can I set this color?
Maybe someone here can help me, thank you for your support. And yes, I have already read some topics about this theme here. But as it seems no suitable answer.

The Popup of a DatePicker is a Calendar and each day inside a Calendar is a CalendarDayButton.
For what you want to achieve you have to override the Style (more precisely the ControlTemplate) of the CalendarDayButton.
The interesting part is the Rectangle "DayButtonFocusVisual"
<DatePicker>
<DatePicker.CalendarStyle>
<Style TargetType="{x:Type Calendar}">
<Setter Property="CalendarDayButtonStyle">
<Setter.Value>
<Style TargetType="{x:Type CalendarDayButton}">
<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>
<ColorAnimation Duration="0" To="#FF777777" Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="NormalText"/>
</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="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="NormalText"/>
</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>
<Rectangle x:Name="TodayBackground" Fill="#FFAAAAAA" Opacity="0" RadiusY="1" RadiusX="1"/>
<Rectangle x:Name="SelectedBackground" Fill="#FFBADDE9" Opacity="0" RadiusY="1" RadiusX="1"/>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
<Rectangle x:Name="HighlightBackground" Fill="#FFBADDE9" Opacity="0" RadiusY="1" RadiusX="1"/>
<ContentPresenter x:Name="NormalText" TextElement.Foreground="#FF333333" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="5,1,5,1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<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"/>
<Rectangle x:Name="DayButtonFocusVisual" IsHitTestVisible="false" RadiusY="1" RadiusX="1" Stroke="Red" Visibility="Collapsed"/><!--Stroke="#FF45D6FA"-->
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
</DatePicker.CalendarStyle>
</DatePicker>

"Unselected" VisualState for UWP ComboBoxItem?

Is there an equivalent for the "Unselected" VisualState in UWP ComboBox? We are migrating from Windows 8 and would like a solution that is cross-compatible between each other.
I looked at the Default Styles for ComboBoxItem and UWP does not seem to have a VisualState for "Unselected".
Here is a screen shot of what happens:
The Blue one is the items that have been selected. Since there is no "Unselected" Visual State in UWP, it does not unselect the previously selected items.
Here is my code for the ComboBoxItem Style:
<Style x:Key="Style_ComboBox_CheckSelector_ItemContainer" TargetType="ComboBoxItem">
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="Padding" Value="8,10" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Border x:Name="LayoutRoot"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="Rectangle_Background_OverState"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="Rectangle_DisabledVisualElement"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="Rectangle_PressedVisualElement"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="ContentPresenter_Selected"
Storyboard.TargetProperty="Opacity"
To="1" />
<DoubleAnimation Duration="0"
Storyboard.TargetName="Rectangle_FocusVisualElement"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="ContentPresenter_Selected"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedDisabled">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="ContentPresenter_Selected"
Storyboard.TargetProperty="Opacity"
To="1" />
<DoubleAnimation Duration="0"
Storyboard.TargetName="Rectangle_DisabledVisualElement"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedPointerOver">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="ContentPresenter_Selected"
Storyboard.TargetProperty="Opacity"
To="1" />
<DoubleAnimation Duration="0"
Storyboard.TargetName="Rectangle_Background_OverState"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedPressed">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="ContentPresenter_Selected"
Storyboard.TargetProperty="Opacity"
To="1" />
<DoubleAnimation Duration="0"
Storyboard.TargetName="Rectangle_PressedVisualElement"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="Rectangle_FocusVisualElement"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="InnerGrid">
<Rectangle x:Name="Rectangle_Background_NormalState" Fill="#FF404040" />
<Rectangle x:Name="Rectangle_Background_OverState"
Fill="#FF666666"
Opacity="0"
Stroke="#FF999999"
StrokeThickness="1" />
<ContentPresenter x:Name="ContentPresenter"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Foreground="#FFCCCCCC" />
<ContentPresenter x:Name="ContentPresenter_Selected"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Foreground="Blue"
Opacity="0" />
<Grid x:Name="Grid_ControlOverlayParts" IsHitTestVisible="False">
<Rectangle x:Name="Rectangle_PressedVisualElement"
Fill="#33FFFFFF"
Opacity="0" />
<Rectangle x:Name="Rectangle_FocusVisualElement"
Opacity="0" />
<Rectangle x:Name="Rectangle_DisabledVisualElement"
Fill="#7F1A1A1A"
Opacity="0" />
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Thank you!

I do not recommend sharing a template for the same control across Windows 8/8.1 and UWP. The implementations of most controls have changed significantly, and they may require different template parts. A template which works for a control in Windows 8.1 might not work when compiled for UWP.
The Visual States for the ComboBoxItem control are different between Windows 8.1 and UWP. In Windows 8.1, it has a "SelectionStates" VisualStateGroup containing the "Selected" VisualState, whereas in UWP the "Selected" VisualState is part of the "CommonStates" VisualStateGroup.
Your template conforms to the Windows 8.1 implementation, not the UWP implementation. You will need to have two separate templates, one for Windows 8.1 and one for UWP.

Losing selected value when user select another item inside another ListView

I have two ListView bound to two different properties. Basically those are two selectors (one for minutes and the other one for hours).
ItemSource is bound to a static List<int> and the SelectedValue to a property inside my model.
When I select one value from the hours list, it keeps its selected status... but when I choose the second value from the minutes list, it loses it, and vice versa.
I believe this is a graphical problem because both value are kept even if one value goes unselected.
ListView call:
<ListView x:Name="listViewHoursSelect" ItemsSource="{Binding MaxHoursList}" SelectedValue="{Binding SelectedMaxHours}" FontSize="{DynamicResource FontText}" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{DynamicResource MainGray}" Style="{DynamicResource TimeSelectListView}" ItemsPanel="{DynamicResource TimeSelectItemsPanelTemplate}" Margin="0" ItemContainerStyle="{DynamicResource ListViewItemStyle1}" SelectionMode="Single">
<ListView.View>
<GridView>
<GridViewColumn Width="Auto"/>
</GridView>
</ListView.View>
</ListView>
ItemContainerStyle:
<Style x:Key="ListViewItemStyle" TargetType="{x:Type ListViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<StackPanel x:Name="stackPanel">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground)" Storyboard.TargetName="textBlock">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MainRed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground)" Storyboard.TargetName="textBlock">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource LightGray}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground)" Storyboard.TargetName="textBlock">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MainRed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground)" Storyboard.TargetName="textBlock">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MainRed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBlock x:Name="textBlock" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding DataContext, RelativeSource={RelativeSource TemplatedParent}}" Background="{x:Null}" Foreground="{DynamicResource MainGray}"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I restyled a lot of the ListViews and I even set all status (Normal, MouseOver, Selected, etc..). I struggle to find why it keeps the selected value until I select another value in another list.
Let me know if you need some code, I didn't post anything yet because it's a lot.

Solved it, i was forgot to set SelectedUnfocused state :)
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground)" Storyboard.TargetName="textBlock">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MainRed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>

Silverlight button Mouse Over like hover effect

I created button with style but after creating button style it looses default effect of the button and when I directly put attribute in button than I will get those default effects like when I click I can see blue background.I also try to put Visual Manager but it is not working. Kindly somebody can help me to know what I am doing wrong
My Button Style:
<Style TargetType="Button" x:Key="MenuButtonStyle">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="FontFamily" Value="Sitka Heading"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="ButtonTextElement"
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
To="Blue"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="normalImage">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="mouseOverImage">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="ButtonTextElement"
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
To="Blue"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="normalImage">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="mouseOverImage">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border BorderBrush="Black" BorderThickness="0,0,0,0.5" Margin="30,0,0,0"
Grid.ColumnSpan="2"/>
<TextBlock x:Name="ButtonTextElement"
Text="{TemplateBinding Content}" Margin="30,0"
Foreground="{TemplateBinding Foreground}" Grid.Column="0"
VerticalAlignment="{TemplateBinding VerticalAlignment}" />
<Image x:Name="normalImage" Source="/Assets/menu-arrow-left.png"
Grid.Column="1" Stretch="None" HorizontalAlignment="Right"
Margin="0,0,30,0" />
<Image x:Name="mouseOverImage" Source="/Assets/menu-arrow-left-hover.png"
Grid.Column="1" Stretch="None" HorizontalAlignment="Right"
Visibility="Collapsed" Margin="0,0,30,0" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I also change in VisualStateManager like this
<ColorAnimation Storyboard.TargetName="MouseOverVisualElement"
Storyboard.TargetProperty="TextBlock.Foreground" To="Red" />
My Button Tag
<Button Style="{StaticResource MenuButtonStyle}" Content="Home"/>

There are several issues with your template. First: You have to make sure that the element identified by Storyboard.TargetName and its property (you want to change) identified by Storyboard.TargetProperty actually make sense. You can change the color of a SolidColorBrush, and you can use a SolidColorBrush for a Textblock.Foreground property, but you cannot directly set the foreground property color, because foreground actually is a Brush (not a Color). Second: if you override the template of a control you have to provide all the VisualStates that are in the original template, that means you have to define the FocusStates as well.
Here is a template that does what you are trying to do:
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation
Duration="0"
Storyboard.TargetName="ButtonTextElement"
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
To="Red"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation
Duration="0"
Storyboard.TargetName="Background"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="#FF6DBDD1"/>
<ColorAnimation
Duration="0"
Storyboard.TargetName="ButtonTextElement"
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
To="Red"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="DisabledVisualElement"
Storyboard.TargetProperty="Opacity"
To=".55"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="FocusVisualElement"
Storyboard.TargetProperty="Opacity"
To="1"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border
x:Name="Background"
Background="White"/>
<TextBlock
x:Name="ButtonTextElement"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Text="{TemplateBinding Content}"
FontSize="20" FontFamily="Sitka Heading"
Foreground="Black"/>
<Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
<Rectangle x:Name="FocusVisualElement" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
</Grid>
</ControlTemplate>
The default button style can be found on msdn.

Please see this page:
https://msdn.microsoft.com/en-us/library/cc278069(VS.95).aspx
and see this page:
http://samples.msdn.microsoft.com/Silverlight/SampleBrowser/index.htm#/?sref=CustomTemplateSamples&id=4
there are a sample for mouse over with templete

Make sure VisualStateManager.VisualStateGroups is the direct child of the root element of your ControlTemplate. In your example, your root element is a Border, so put the VisualStateManager stuff directly under the Border tag.

Making a custom stretchable button template from images

I was trying to make a WPF button template from 4 images: "btnNormal, btnHover, btnPressed and btnDisabled".
The thing is I don't know how to make my button look like this exactly with WPF styles. So now I am trying to make it using these images. The thing is I want my button to be stretchable and to look same on any size. To do this I need to make 3 slices for each button state image: "Top, Bottom, Left, Right, Center"
I have this XAML for now :
<Application.Resources>
<ControlTemplate x:Key="StylishBlueButton" TargetType="{x:Type Button}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="InvalidFocused"/>
<VisualState x:Name="InvalidUnfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Application.Resources>
</Application>
Can anyone help me out, how can I make this button template?

You want to specify something inside the VisualState, e.g.
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<!--Take one half second to transition to the MouseOver state.-->
<VisualTransition To="MouseOver" GeneratedDuration="0:0:0.5" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="borderColor" Storyboard.TargetProperty="Color" To="Cyan"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="borderColor" Storyboard.TargetProperty="Color" To="Red"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse>
<Ellipse.Fill>
<SolidColorBrush x:Name="borderColor" Color="Black"/>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="ButtonShape" Margin="5" Fill="{TemplateBinding Background}"/>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>

<Border Background="DodgerBlue">
<Rectangle Fill="Transparent" Stroke="White" Margin="3" />
</Border>
Place a path as per your style that you needed instead of Rectangle.

Categories