VisualStates and DataTriggerBehaviors - xaml

I have defined a custom VisualState for an AppBarButton in a Style.
I'm trying to use GoToStateAction to change the state with a DataTriggerBehavior, but it doesn't work and I have no idea how to debug it :(
I'm guessing that it is an issue with Interaction in a style, as I also tried changing the DataTriggerBehavior to an EventTriggerBehavior and that didn't fire either.
The Style:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
xmlns:eim="using:Microsoft.Xaml.Interactions.Media"
xmlns:vm="using:Test.ViewModel">
<Style x:Key="AppBarBtnStyle" TargetType="AppBarButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="AppBarButton">
<Border x:Name="bord" CornerRadius="12" Background="Gray" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="4">
<Grid x:Name="Root" MinWidth="{TemplateBinding MinWidth}" MaxWidth="{TemplateBinding MaxWidth}" Background="{TemplateBinding Background}">
<i:Interaction.Behaviors>
<core:DataTriggerBehavior Binding="{Binding FlashControl}" ComparisonCondition="Equal" Value="{TemplateBinding Name}" >
<core:GoToStateAction StateName="Flash"/>
</core:DataTriggerBehavior>
</i:Interaction.Behaviors>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Flash">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="(Root.BorderBrush).(SolidColorBrush.Color)" EnableDependentAnimation="True" Duration="0:0:1" RepeatBehavior="Forever" AutoReverse="False">
<DiscreteColorKeyFrame Value="Red" KeyTime="0:0:0"/>
<DiscreteColorKeyFrame Value="Blue" KeyTime="0:0:0.75"/>
<DiscreteColorKeyFrame Value="Red" KeyTime="0:0:1"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The Binding Property:
Private mFlashControl As String
Public Property FlashControl() As String
' The Name of the Control to Flash
Get
Return mFlashControl
End Get
Set(value As String)
SetProperty(mFlashControl, value)
End Set
End Property
The Button:
<AppBarButton x:Name="myButton" Style="{StaticResource AppBarBtnStyle}" Icon="Clock"/>
So if I set the FlashControl Property to "myButton", all the Buttons with that Style will run the DataTriggerBehavior to check if their Name Property matches that of FlashControl.
If a match is found then the VisualState of the Button will be changed and run the flash Storyboard.

Related

How to add custom tooltip for a listbox items

I have an Hamburger menu with ListBox ,(Image and Title of the menu item), i bind the list of these data(image and title) to the ListBox, Upto its fine, I want to show a tooltip with the item Title text(on mouse hover on image) with a Teal Background
If you want to show Tooltip on your ListViewItem, Add ToolTipService Like Below.
<ListViewItem Content="Hello" ToolTipService.Placement="Bottom" >
<ToolTipService.ToolTip>
<Grid>
<Rectangle Fill="Teal" />
<TextBlock Text="Hello" Foreground="White" Margin="10"/>
</Grid>
</ToolTipService.ToolTip>
</ListViewItem>
If you want to do it in DataTemplate
<DataTemplate >
<ToolTipService.ToolTip>
<Grid>
<Rectangle Fill="Teal" />
<TextBlock Text="Hello" Foreground="White" Margin="10"/>
</Grid>
</ToolTipService.ToolTip>
</DataTemplate>
Now you can notice that Tool Tip will show you the text with Teal Background. Problem is you still have a faded white border around your Teal Background.
To Correct this, Add below to your Application.Resources in App.xaml
<Application.Resources>
<!-- Default style for Windows.UI.Xaml.Controls.ToolTip -->
<Style TargetType="ToolTip">
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeHighBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource ToolTipBorderThemeThickness}" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ToolTipContentThemeFontSize}" />
<Setter Property="Padding" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<ContentPresenter x:Name="LayoutRoot"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
MaxWidth="320"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Padding="{TemplateBinding Padding}"
TextWrapping="Wrap" >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="OpenStates">
<VisualState x:Name="Closed">
<Storyboard>
<FadeOutThemeAnimation TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="Opened">
<Storyboard>
<FadeInThemeAnimation TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
If you notice i changed Padding to 0.

Windows Phone 8.1 - Pivot Header

i am using pivot control, and i want to change the forground color of headers!
but somehow i am not able to do it with pretty easy guess !
<Pivot x:Name="pivot1">
<PivotItem x:Name="pivot1item1" Header="Profile" Style="{StaticResource PuzzlePivotItemHeader}">
<Controls:Profile />
</PivotItem>
<PivotItem x:Name="pivot1item2" Header="Filters" Style="{StaticResource PuzzlePivotItemHeader}">
<Controls:Filters />
</PivotItem>
</Pivot>
and style is :
<Style x:Key="PuzzlePivotItemHeader" TargetType="PivotItem">
<Setter Property="Foreground" Value="White"/>
</Style>
i just want the header fontsize change and color as white !!
how could it possible?
Here's how you'd change the foreground color and font size of the pivot item headers for all pivot controls in your app (I'm not sure how to do it per pivot control It turns out it is a bug; see this thread):
In App.xaml override these resources:
<Application.Resources>
<SolidColorBrush x:Key="PivotHeaderForegroundSelectedBrush" Color="Red" />
<SolidColorBrush x:Key="PivotHeaderForegroundUnselectedBrush" Color="Cyan" />
<x:Double x:Key="PivotHeaderItemFontSize">40</x:Double>
</Application.Resources>
If you don't care about having different colors for the selected and unselected pivot items, you can style the headers on a per-pivot basis like this instead:
<Pivot>
<Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Foreground="Cyan" FontSize="40" />
</DataTemplate>
</Pivot.HeaderTemplate>
<PivotItem Header="one" />
<PivotItem Header="two" />
<PivotItem Header="three" />
<PivotItem Header="four" />
<PivotItem Header="five" />
<PivotItem Header="six" />
</Pivot>
If you just want to change the background color of all the headers, this is how you can do it in Window Phone 8.1.
First, use Expression Blend to generate the default style of the Pivot control.
<Thickness x:Key="PivotPortraitThemePadding">19,38,0,0</Thickness>
<Thickness x:Key="PivotLandscapeThemePadding">19,25,0,0</Thickness>
<Style x:Key="CustomPivotStyle" TargetType="Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Pivot">
<Grid x:Name="RootElement" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Orientation">
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Landscape">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Style="{StaticResource PivotTitleContentControlStyle}"/>
<ScrollViewer x:Name="ScrollViewer" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="{TemplateBinding Padding}" Grid.Row="1" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" VerticalSnapPointsType="None" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalContentAlignment="Stretch" ZoomMode="Disabled">
<PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
<PivotHeaderPanel x:Name="Header" Background="{TemplateBinding BorderBrush}">
<PivotHeaderPanel.RenderTransform>
<CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0"/>
</PivotHeaderPanel.RenderTransform>
</PivotHeaderPanel>
<ItemsPresenter x:Name="PivotItemPresenter">
<ItemsPresenter.RenderTransform>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0"/>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</PivotPanel>
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Find this line below, the only change I have made to the default style is adding Background="{TemplateBinding BorderBrush}" to the PivotHeaderPanel which is the panel that hosts all the headers.
<PivotHeaderPanel x:Name="Header" Background="{TemplateBinding BorderBrush}">
The reason that I use TemplateBinding here is because doing this gives me the flexibility to change the headers background by specifying the BorderBush of the Pivot. As the BorderBrush is not used anywhere in the control, there won't be any side effect if we change it.
So, all you need to do in your Pivot is this.
<Pivot x:Uid="Pivot" Title="MY APPLICATION" x:Name="pivot" CommonNavigationTransitionInfo.IsStaggerElement="True" Style="{StaticResource CustomPivotStyle}" BorderBrush="{StaticResource PhoneAccentBrush}">

How to Change the SelectedItem Foreground Text of ListBox Item

I have the following ListBox below. I am not sure how to change the Foreground of a selected item's textblock text when an item is selected, and then back to the original foreground color when an item is unselected (most likely occurring when another item in the ListBox is selected afterwards)?
<ListBox Name="ListBox" SelectionMode="Single" ItemsSource="{Binding}" Margin="{Binding}"
toolkit:TiltEffect.IsTiltEnabled="True" SelectionChanged="ListBox_SelectionChanged" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel ItemWidth="159" ItemHeight="Auto" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" >
<Image Source="{Binding Thumbnail}" Width="155" Height="155" />
<TextBlock Text="{Binding Name}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeNormal}" VerticalAlignment="Center" HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You have to edit ItemContainerStyle (Edit additional templates > Edit generated Item Container (ItemContainerStyle)).
Within ItemContainerStyle is Selected visual state and you can change it.
<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="YOUR_NEW_COLOR"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am considering that the ItemsSource of your ListBox is bound to an ObservableCollection of an examle class test.cs as below
ObservableCollection<test> coll = new ObservableCollection<test>();
and the DataContext is ListBox.DataContext = coll;
Bind the Foreground property of your TextBlock in the ListBoxItemTemplate
<TextBlock Text="{Binding Name}" Foreground="{Binding foreground}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeNormal}" VerticalAlignment="Center" HorizontalAlignment="Center" />
Now define your SelectionChanged event
private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
test tItem = (sender as ListBox).SelectedItem as test;
test.foreground = "#FFCB202D"; //this will change the color of the TextBlock
}
Make sure you extend your class test.cs with INotifyPropertyChanged and define the property foreground with the same or else dynamic changes will not be reflected.
private string tmpforeground;
public string foreground
{
get
{
return tmpforeground;
}
set
{
if (tmpforeground== value)
return;
tmpforeground= value;
NotifyPropertyChanged("foreground");
}
}
Also note that if you want the textblock to change color to green on one tap and then change its color again by tapping again, SelectionChanged event won't work, because it works only when a different item is selected. So if you want change of color on consecutive taps then use Tap event instead
<ListBox Name="ListBox" SelectionMode="Single" ItemsSource="{Binding}" Margin="{Binding}"
toolkit:TiltEffect.IsTiltEnabled="True" Tap="ListBox_Tap" >
private void ListBox_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
test tItem = (sender as ListBox).SelectedItem as test;
test.foreground = "#FFCB202D";
}

How fadeout element in dataTemplate when mouse clicked its containter? My idea throw always exception

This code throw always exception. Is a way to get TextBox (x:Name = "MyBox") to hide (fadeout) when we click in its container (here ListViewItem)? What's wrong with my code?
<ListView x:Name="ListViewMy" IsItemClickEnabled="True" ItemsSource="{Binding list, Mode=TwoWay}" HorizontalAlignment="Left" Height="223" Margin="240,350,0,0" VerticalAlignment="Top" Width="582" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid x:Name="GridMy">
<ContentPresenter x:Name="MyContentPresenter">
<ContentPresenter.ContentTemplate>
<DataTemplate x:Key="DataTemplate">
<Grid Background="#FF25C1D1" Margin="-30,0,0,0" x:Name="GridBlue">
<TextBox x:Name="MyBox" HorizontalAlignment="Left" Margin="135,0,0,0" TextWrapping="Wrap" Text="{Binding}" VerticalAlignment="Top" Width="352" Height="81" Background="{x:Null}" BorderBrush="#FF25C1D1" FontFamily="Segoe WP Semibold" FontSize="32" FontWeight="Bold" Foreground="White"/>
</Grid>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed" >
<Storyboard>
<FadeOutThemeAnimation TargetName="MyBox" Duration="0:0:5"></FadeOutThemeAnimation>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
The problem with your code is that your animation, in the ControlTemplate for ListViewItem, should only target other elements within the ControlTemplate for ListViewItem. The DataTemplate won't work here because x:Name="MyBox" won't resolve. DataTemplates are reusable pieces of UI so Name expansion is skipped on them.
A good way to achieve your scenario is to target the animation to the ContentPresenter that is in fact part of your ControlTemplate, i.e.:
<FadeOutThemeAnimation TargetName="MyContentPresenter" Duration="0:0:5" />

Silverlight 4 - How can I change button background color when focused with an Implicit button style?

I'm having a great deal of difficulty trying to achieve something that should be trivial. I'm using an Implicit Button Style defined in a global XAML resource file. I just want to change the background color of the focused button to red with a ColorAnimation. I've tried a number of different combinations in Storyboard.TargetProperty and Storyboard.TargetName and nothing has worked. How can I achieve this?
Thanks in advance.
<Style TargetType="Button" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="grid" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused" >
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Button" From="Green" To="Red" Duration="00:00:01" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
...
Since I don't have the rest of your Style I made this with two Borders and a ContentPresenter. This animates the Background of the Button from Green to Red once focused.
<Style TargetType="Button" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="grid" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ColorAnimation Storyboard.TargetName="border"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
From="Green"
To="Red"
Duration="0:0:1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border BorderBrush="Transparent" BorderThickness="1" CornerRadius="4">
<Border x:Name="border" Background="White" BorderBrush="Black" BorderThickness="1" CornerRadius="4">
</Border>
</Border>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Some good answers here:
Style the MouseOver on a Silverlight/WPF button
http://forums.silverlight.net/forums/p/186402/427878.aspx