I have a custom control MediaPlayerControl. In the its Template I define a VisualStateGroup:
<VisualStateGroup x:Name="SizeState">
<VisualState x:Name="Normal" />
<VisualState x:Name="LargeSize" >
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MediaInfo_Border" Storyboard.TargetProperty="(Grid.ColumnSpan)" >
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MediaInfo_Border" Storyboard.TargetProperty="(Grid.RowSpan)" >
<DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PrimaryMediaControl_Border" Storyboard.TargetProperty="HorizontalAlignment" >
<DiscreteObjectKeyFrame KeyTime="0" Value="Center"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MediaTransportControls_Timeline_Border" Storyboard.TargetProperty="(Grid.Column)" >
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MediaTransportControls_Timeline_Border" Storyboard.TargetProperty="(Grid.ColumnSpan)" >
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MoreButton" Storyboard.TargetProperty="Visibility" >
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SecondaryTrim_MenuFlyOut" Storyboard.TargetProperty="Visibility" >
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TrimButton" Storyboard.TargetProperty="Visibility" >
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
And in the SizeChanged event I call ChangeState() function:
private void MediaPlayerControl_SizeChanged(object sender, object e)
{
ChangeState();
}
private void ChangeState()
{
string state = "";
if (Window.Current.Bounds.Width < 600)
{
state = "Normal";
}
else
{
state = "LargeSize";
}
VisualStateManager.GoToState(this, state, false);
}
Although VisualStateManager.GoToState return true and UI change to LargeSize state but in short time it automatically changes to Normal state.
If I use LayoutUpdated event, it work properly, but performance is not good.
Can I use GotoState with SizeChanged event?
Related
How can i make such alist of checkboxes, that they are left aligned to the button, from where it opens, and provide a opening and closing Animation, like in the Alarm & Clock App in Windows 10? I tried with Popups and Flyouts, but there isnt the same effect.
It looks that this Control in the Alarm & Clock App is actually expanded from a ComboBox control.
So we can use a ComboBox to do this, for example:
<ComboBox x:Name="comboBox" VerticalAlignment="Center" HorizontalAlignment="Stretch" ItemsSource="{x:Bind comboitems}"
PlaceholderText="{x:Bind contenttext, Mode=OneWay}" DropDownClosed="comboBox_DropDownClosed" SelectionChanged="comboBox_SelectionChanged">
<ComboBox.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding dayofweek}" IsChecked="{Binding ischecked, Mode=TwoWay}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
To show the selected days on the ComboBox is a little complex, we can do this work in the code behind:
public sealed partial class MainPage : Page, INotifyPropertyChanged
{
private ObservableCollection<comboItem> comboitems = new ObservableCollection<comboItem>();
private string _contenttext;
public string contenttext
{
get
{
return _contenttext;
}
set
{
if (value != _contenttext)
{
_contenttext = value;
OnPropertyChanged();
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
if (this.PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public MainPage()
{
this.InitializeComponent();
this.Loaded += MainPage_Loaded;
}
private int daycount;
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
showdays();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
comboitems.Clear();
comboitems.Add(new comboItem { dayofweek = "Sunday", ischecked = false });
comboitems.Add(new comboItem { dayofweek = "Monday", ischecked = true });
comboitems.Add(new comboItem { dayofweek = "Tuesday", ischecked = true });
comboitems.Add(new comboItem { dayofweek = "Wednesday", ischecked = true });
comboitems.Add(new comboItem { dayofweek = "Thursday", ischecked = true });
comboitems.Add(new comboItem { dayofweek = "Friday", ischecked = true });
comboitems.Add(new comboItem { dayofweek = "Saturday", ischecked = false });
}
private void comboBox_DropDownClosed(object sender, object e)
{
showdays();
}
private void comboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
comboBox.SelectedIndex = -1;
}
private void showdays()
{
contenttext = null;
daycount = 0;
for (int i = 0; i < comboBox.Items.Count(); i++)
{
comboItem item = comboBox.Items.ElementAt(i) as comboItem;
if (item.ischecked)
{
contenttext = contenttext + item.dayofweek.Substring(0, 3) + ", ";
daycount++;
}
}
if (daycount != 0)
{
if (daycount == 2 && contenttext == "Sun, Sat, ")
{
contenttext = "Weekends";
}
else if (daycount == 5 && contenttext == "Mon, Tue, Wed, Thu, Fri, ")
{
contenttext = "Weekdays";
}
else if (daycount == 7)
{
contenttext = "Every day";
}
else
{
contenttext = contenttext.TrimEnd(' ', ',');
}
}
else
{
contenttext = "Only once";
}
}
}
And the comboItem class by my side is like this:
public class comboItem : INotifyPropertyChanged
{
public string dayofweek { get; set; }
private bool _ischecked;
public bool ischecked
{
get
{
return _ischecked;
}
set
{
if (value != _ischecked)
{
_ischecked = value;
OnPropertyChanged();
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
if (this.PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
Maybe you can find another easier way to convert days to specific string, eventually my method works here.
Update:
Here is the whole modified template style of the ComboBox, you can also edit the template by your self.
<Style TargetType="ComboBox">
<Setter Property="Padding" Value="12,5,0,7" />
<Setter Property="MinWidth" Value="{ThemeResource ComboBoxThemeMinWidth}" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltMediumLowBrush}" />
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseMediumLowBrush}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="TabNavigation" Value="Once" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True" />
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
<Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<CarouselPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="32" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlPageBackgroundAltMediumBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
</ObjectAnimationUsingKeyFrames>
<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextBlock">
<DiscreteObjectKeyFrame KeyTime="0" Value="LightBlue" />
</ObjectAnimationUsingKeyFrames>-->
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundListMediumBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="HeaderContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextBlock">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="HighlightBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HighlightBackground" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextBlock">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="FocusedPressed">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HighlightBackground" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextBlock">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
<VisualState x:Name="PointerFocused" />
<VisualState x:Name="FocusedDropDown">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PopupBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DropDownStates">
<VisualState x:Name="Opened">
<Storyboard>
<SplitOpenThemeAnimation ClosedTargetName="ContentPresenter" OffsetFromCenter="{Binding TemplateSettings.DropDownOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" OpenedTargetName="PopupBorder" OpenedLength="{Binding TemplateSettings.DropDownOpenedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</Storyboard>
</VisualState>
<VisualState x:Name="Closed">
<Storyboard>
<SplitCloseThemeAnimation ClosedTargetName="ContentPresenter" OffsetFromCenter="{Binding TemplateSettings.DropDownOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" OpenedTargetName="PopupBorder" OpenedLength="{Binding TemplateSettings.DropDownOpenedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" FontWeight="{ThemeResource ComboBoxHeaderThemeFontWeight}" FlowDirection="{TemplateBinding FlowDirection}" Margin="{ThemeResource ComboBoxHeaderThemeMargin}" Visibility="Collapsed" x:DeferLoadStrategy="Lazy" />
<Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Row="1" />
<Border x:Name="HighlightBackground" BorderBrush="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{ThemeResource SystemControlHighlightListAccentLowBrush}" Grid.ColumnSpan="2" Opacity="0" Grid.Row="1" />
<ContentPresenter x:Name="ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Grid.ColumnSpan="2">
<TextBlock x:Name="PlaceholderTextBlock" Foreground="{ThemeResource SystemControlForegroundAccentBrush}" Text="{TemplateBinding PlaceholderText}" />
</ContentPresenter>
<!--<FontIcon x:Name="DropDownGlyph" AutomationProperties.AccessibilityView="Raw" Grid.Column="1" Foreground="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" FontSize="12" FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="0,10,10,10" Grid.Row="1" VerticalAlignment="Center" />-->
<Popup x:Name="Popup">
<Border x:Name="PopupBorder" BorderBrush="{ThemeResource SystemControlForegroundChromeHighBrush}" BorderThickness="{ThemeResource ComboBoxDropdownBorderThickness}" Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" HorizontalAlignment="Stretch" Margin="0,-1,0,-1">
<ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" MinWidth="{Binding TemplateSettings.DropDownContentMinWidth, RelativeSource={RelativeSource Mode=TemplatedParent}}" VerticalSnapPointsType="OptionalSingle" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalSnapPointsAlignment="Near" ZoomMode="Disabled">
<ItemsPresenter Margin="{ThemeResource ComboBoxDropdownContentMargin}" />
</ScrollViewer>
</Border>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
It's just remove the FontIcon inside this control and make the TextBlock's ColumnSpan = 2, and change it's foreground to SystemControlForegroundAccentBrush. If you want to modify it by your self, you can open the Document OutLine, find this ComboBox, right click on it, then choose Edit Template then Edit a Copy, so you will get the default template of ComboBox:
I have a form for adding an item. The item requires an author which could be search, in which the component for the author was a search box. Also included a code in which the background of the search box will turn red when empty otherwise white. Also have a list for suggestion. When the time I select an author in the suggestions, the search box don't turn it's color. But when I hover the search box, that's the only time it goes to the costumed color. No user want's to hover the search box every time just to see if it is valid or not.
Here's a sample code:
XAML
<SearchBox x:Name="SearchBoxColor" SearchHistoryEnabled="False" SuggestionsRequested="SearchBoxColor_SuggestionsRequested" QueryChanged="SearchBoxColor_QueryChanged" QuerySubmitted="SearchBoxColor_QuerySubmitted" Background="White" />
<Button Content="Turn Color"Click="ButtonColor_Click" />
CS
private void SearchBoxColor_SuggestionsRequested(SearchBox sender, SearchBoxSuggestionsRequestedEventArgs args) {
// When this event is called the background will change instantly
ChangeSearchBoxColor();
}
private void SearchBoxColor_QueryChanged(SearchBox sender, SearchBoxQueryChangedEventArgs args) {
// When this event is called the background will change instantly
ChangeSearchBoxColor();
}
private void SearchBoxColor_QuerySubmitted(SearchBox sender, SearchBoxQuerySubmittedEventArgs args) {
// When this event is called the background will change instantly
ChangeSearchBoxColor();
}
private void ButtonColor_Click(object sender, RoutedEventArgs e) {
// When this event is called the background will change only when the search box is hovered
ChangeSearchBoxColor();
}
private void ChangeSearchBoxColor() {
SearchBoxColor.Background = new SolidColorBrush(Colors.Red);
}
You can achieve this with code-behind on your view which would set the background to the red color you're looking for however I'd recommend using the Behaviors SDK, which you can reference in your 8.1 project, to set a VisualState on the control if the text is invalid. You can do this as follows:
Action:
public class SearchBoxTextErrorVisualStateAction : DependencyObject, IAction
{
public static readonly DependencyProperty ErrorVisualStateProperty = DependencyProperty.Register(
"ErrorVisualState",
typeof(string),
typeof(SearchBoxTextErrorVisualStateAction),
new PropertyMetadata(string.Empty));
public string ErrorVisualState
{
get
{
return (string)this.GetValue(ErrorVisualStateProperty);
}
set
{
this.SetValue(ErrorVisualStateProperty, value);
}
}
public static readonly DependencyProperty ValidVisualStateProperty =
DependencyProperty.Register(
"ValidVisualState",
typeof(string),
typeof(SearchBoxTextErrorVisualStateAction),
new PropertyMetadata(string.Empty));
public string ValidVisualState
{
get
{
return (string)this.GetValue(ValidVisualStateProperty);
}
set
{
this.SetValue(ValidVisualStateProperty, value);
}
}
public object Execute(object sender, object parameter)
{
var searchBox = sender as SearchBox;
if (searchBox != null)
{
VisualStateManager.GoToState(
searchBox,
string.IsNullOrWhiteSpace(searchBox.QueryText) ? this.ErrorVisualState : this.ValidVisualState,
true);
}
return parameter;
}
}
XAML example:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
<Color x:Key="AppErrorColor">#FFD32F2F</Color>
<SolidColorBrush x:Key="ThemeErrorShade" Color="{ThemeResource AppErrorColor}" />
<Style x:Key="SearchBoxStyle" TargetType="SearchBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="SearchBox">
<Grid x:Name="SearchBoxGrid">
...
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="SearchBoxGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="{Binding Background, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="SearchBoxBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{Binding BorderBrush, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="SearchButton">
<DiscreteObjectKeyFrame KeyTime="0" Value="{Binding Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="SearchBoxGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SearchBoxDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="SearchBoxBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SearchBoxDisabledBorderThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="SearchButton">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SearchBoxDisabledTextThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="SearchTextBox">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ErrorStates">
<VisualState x:Name="TextInvalid">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="SearchBoxGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ThemeErrorShade}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="TextValid">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="SearchBoxGrid">
<DiscreteObjectKeyFrame KeyTime="0" Value="{Binding Background, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="SearchBoxBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{Binding BorderBrush, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="SearchButton">
<DiscreteObjectKeyFrame KeyTime="0" Value="{Binding Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
...
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<SearchBox Style="{StaticResource SearchBoxStyle}">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Loaded">
<core:EventTriggerBehavior.Actions>
<actions:SearchBoxTextErrorVisualStateAction ErrorVisualState="TextInvalid" ValidVisualState="TextValid" />
</core:EventTriggerBehavior.Actions>
</core:EventTriggerBehavior>
<core:EventTriggerBehavior EventName="QueryChanged">
<core:EventTriggerBehavior.Actions>
<actions:SearchBoxTextErrorVisualStateAction ErrorVisualState="TextInvalid" ValidVisualState="TextValid" />
</core:EventTriggerBehavior.Actions>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</SearchBox>
</Grid>
Due to the limits of answers, I can't paste the entirety of the XAML but you want to add the default SearchBox to your view, in the design window, right click it and go to 'Edit Template -> Edit a copy'. It will create a copy of the default style in which you can replace the root Grid's VisualStateGroups with the ones above.
Edit: The reason for firing the action on the Loaded event is so that you can enable the color change when the control is brought into view and not just when the text changes.
I'm working on a custom button for my project.
I'm not using a default Button but just a ContentControl with a ControlTemplate assigned to it.
For the beginning just a simple template:
<ControlTemplate x:Key="MySampleTemplate">
<Image x:Name="img" Source="/AppName;component/Res/Img/normalstate.png" />
</ControlTemplate>
Now I would like to animate the image by using VisualStateManager.
First I created a "Hover" and a "Normal" state:
<ControlTemplate x:Key="MySampleTemplate">
<Image x:Name="img" Source="/AppName;component/Res/Img/normalstate.png">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal" />
<VisualState Name="Hover">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="0"
Storyboard.TargetName="img" Storyboard.TargetProperty="Source">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="/AppName;component/Res/Img/hoverstate.png" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Image>
</ControlTemplate>
In Code behind:
btnSampleButton.MouseEnter += (s,e) => VisualStateManager.GoToState(btnSampleButton, "Hover", false);
btnSampleButton.MouseLeave += (s,e) => VisualStateManager.GoToState(btnSampleButton, "Normal", false);
Everything works just fine. If I hover over the button hoverstate.png is shown and if I don't hover over normalstate.png is shown.
Now I would like to animate LeftMouseButtonDown and LeftMouseButtonUp to achieve a pressing animation if the user click on the button.
I created a VisualState called "Pressed" and just set it up like "Hover" (just replaced hoverstate.png with pressedstate.png).
In the code behind I did this:
btnSampleButton.MouseLeftButtonDown += (s,e) => VisualStateManager.GoToState(btnSampleButton, "Pressed", false);
btnSampleButton.MouseLeftButtonUp += (s,e) => VisualStateManager.GoToState(btnSampleButton, btnSampleButton.IsMouseOver ? "Hover" : "Normal", false);
However it does not work. MouseEnter and MouseLeave work fine but I can't see any changes to the button if I press/release my left mouse button.
Do you have any advice to get it work?
Edit:
Control:
<ContentControl x:Name="btnSampleButton" Template="{StaticResource SamplButtonTemplate}" />
ControlTemplate:
<ControlTemplate x:Key="SamplButtonTemplate">
<Image x:Name="Image" Source="/AppName;component/Res/Img/normalstate.png">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal" />
<VisualState Name="Hover">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="0"
Storyboard.TargetName="Image" Storyboard.TargetProperty="Source">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="/AppName;component/Res/Img/hoverstate.png" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="0" FillBehavior="Stop"
Storyboard.TargetName="Image" Storyboard.TargetProperty="Source">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="/AppName;component/Res/Img/pressedstate.png" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Image>
</ControlTemplate>
Code behind:
btnSampleButton.MouseEnter += (s, e) => VisualStateManager.GoToState(btnSampleButton, "Hover", false);
btnSampleButton.MouseLeave += (s, e) => VisualStateManager.GoToState(btnSampleButton, "Normal", false);
btnSampleButton.PreviewMouseLeftButtonDown +=
(s, e) => VisualStateManager.GoToState(btnSampleButton, "Pressed", false);
btnSampleButton.PreviewMouseLeftButtonUp +=
(s, e) => VisualStateManager.GoToState(btnSampleButton, btnSampleButton.IsMouseOver ? "Hover" : "Normal", false);
MouseLeftButtonDown and MouseLeftButtonUp gets swallowed by Click event of Button that's why these events are never raised for button and no change in VisualState.
Instead hook corresponding Preview events i.e. PreviewMouseLeftButtonDown and PreviewMouseLeftButtonUp :
btnSampleButton.PreviewMouseLeftButtonDown += (s,e) =>
VisualStateManager.GoToState(btnSampleButton, "Pressed", false);
btnSampleButton.PreviewMouseLeftButtonUp += (s,e) =>
VisualStateManager.GoToState(btnSampleButton, btnSampleButton.IsMouseOver ?
"Hover" : "Normal", false);
Remove FillBehavior="Stop" from second StoryBoard and your code works fine.
<VisualState Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="0"
FillBehavior="Stop" <-- Remove this
Storyboard.TargetName="Image"
Storyboard.TargetProperty="Source">
I have an animation that animates a Canvas by turning it 360 degrees indefinitely (it basically spins). What I want is for this animation to start when the control is shown and then stop when the control is hidden. I figured I could tie this in, somehow, to the VisualStateManager. I have seen an example of fading in and out controls here which could work but I just dont know how to use VSM to start and stop the storyboard
<Canvas.Resources>
<Storyboard x:Name="spinnerBoard">
<DoubleAnimation
Storyboard.TargetName="SpinnerRotate"
Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:0:01.3"
RepeatBehavior="Forever" />
</Storyboard>
</Canvas.Resources>
<Canvas.RenderTransform>
<RotateTransform x:Name="SpinnerRotate" Angle="0" />
</Canvas.RenderTransform>
Example VSM
<VisualState x:Name="Show">
<Storyboard>
<!-- Start the story board here -->
</Storyboard>
</VisualState>
<VisualState x:Name="Hide">
<Storyboard>
<!-- Stop the story board here -->
</Storyboard>
</VisualState>
A global answer of your different questions :
ExtendedVisualStateManager.GoToElementState returns false in Silverlight
Default binding to UserControl for custom DP
You can do something like this :
Use a template control that extend ContentControl to play with
IsEnabled of content (prevent action during waiting) ;
Create a DP IsWaiting that switch your control visual state ;
Create the two states in XAML : Use DoubleAnimation with RepeatBehavior="Forever"
After you can add a overlay and a Waiting message dependency property like the busy indicator control...
I use a picture for the Waiting visual part but you can use a canvas, grid etc...
C#
[TemplateVisualState(GroupName = "WaitGroup", Name = WaitSpinner.IsWaitingStateName)]
[TemplateVisualState(GroupName = "WaitGroup", Name = WaitSpinner.NotWaitingStateName)]
public class WaitSpinner : ContentControl
{
#region States names
internal const String IsWaitingStateName = "IsWaitingState";
internal const String NotWaitingStateName = "NotWaitingState";
#endregion States names
public bool IsWaiting
{
get { return (bool)GetValue(IsWaitingProperty); }
set { SetValue(IsWaitingProperty, value); }
}
public static readonly DependencyProperty IsWaitingProperty =
DependencyProperty.Register("IsWaiting", typeof(bool), typeof(WaitSpinner), new PropertyMetadata(false, OnIsWaitingPropertyChanged));
private static void OnIsWaitingPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
WaitSpinner waitSpinner = (WaitSpinner)sender;
waitSpinner.ChangeVisualState(true);
}
public WaitSpinner()
{
DefaultStyleKey = typeof(WaitSpinner);
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
ChangeVisualState(false);
}
protected virtual void ChangeVisualState(bool useTransitions)
{
VisualStateManager.GoToState(this, IsWaiting ? IsWaitingStateName : NotWaitingStateName, useTransitions);
}
}
Xaml :
<VisualStateGroup x:Name="WaitGroup">
<VisualState x:Name="NotWaitingState" >
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.IsEnabled)" Storyboard.TargetName="content">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="IsWaitingState">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="WaitPart">
<DiscreteObjectKeyFrame KeyTime="0:0:0.200" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="WaitPart" To="360" RepeatBehavior="Forever" Duration="0:0:1" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.IsEnabled)" Storyboard.TargetName="content">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>False</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<!-- ............. -->
<ContentControl
IsTabStop="False"
x:Name="content"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Foreground="{TemplateBinding Foreground}"
ScrollViewer.HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
ScrollViewer.VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"/>
<Image Source="CirclePicture.png"
x:Name="WaitPart"
RenderTransformOrigin="0.5,0.5"
Width="16"
Height="16"
Visibility="Collapsed"
IsHitTestVisible="False">
<Image.RenderTransform>
<RotateTransform />
</Image.RenderTransform>
</Image>
I want to have a button that responds to the Touch.FrameReported Up & Down events instead of the usual MouseDown and MouseUp events that would be used so this button can be used at the same time on Windows Phone as another button.
I already have a custom Button control with a MouseDown and MouseUp state, but am unsure how to make the Up and Down events there trigger the correct look - probably something with the VisualStateManager needs set but cannot figure out how to use it - solution needs to use the standard Button control as I'm merely extending it for the two states - as a button control with a normal and "pressed" state.
This is for a game screen within a larger Silverlight project, the rest of the project is standard Silverlight with the standard buttons and their normal behaviour, however in one place this needs to be Multitouch so this cannot be an XNA project instead as this would require porting 99% of the app to XNA where other features used are not supported - I've been able to extend custom controls to support multitouch but want the button to react this way too - plus I'm sure this will be of use to others, especially as this will most likely apply to Windows 7/8 development too.
Edit: Here is the Code and Generic.xaml for my button with the normal behaviour (OnMouseUp/OnMouseDown)
Code:
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
using System.Windows.Input;
using System.Diagnostics;
namespace UXLibrary
{
[TemplatePart(Name = "Pressed", Type = typeof(BitmapSource))]
[TemplatePart(Name = "Normal", Type = typeof(BitmapSource))]
public class UXButton : Button
{
public static readonly DependencyProperty PressedProperty =
DependencyProperty.Register("Pressed", typeof(BitmapSource),
typeof(UXButton), null);
public static readonly DependencyProperty NormalProperty =
DependencyProperty.Register("Normal", typeof(BitmapSource),
typeof(UXButton), null);
public BitmapSource Pressed
{
get { return (BitmapSource)GetValue(PressedProperty); }
set { SetValue(PressedProperty, value); }
}
public BitmapSource Normal
{
get { return (BitmapSource)GetValue(NormalProperty); }
set { SetValue(NormalProperty, value); }
}
/// <summary>Constructor</summary>
public UXButton()
{
DefaultStyleKey = typeof(UXButton);
}
/// <summary>OnApplyTemplate</summary>
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
}
}
}
Generic.xaml
<Style TargetType="local:UXButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:UXButton">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="NormalImage" Storyboard.TargetProperty="(UIElement.Opacity)" To="0.5"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="NormalImage" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedImage" Storyboard.TargetProperty="(UIElement.Visibility)">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalImage" Storyboard.TargetProperty="(UIElement.Visibility)">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="MouseOver"/>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="NormalImage" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedImage" Storyboard.TargetProperty="(UIElement.Visibility)">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalImage" Storyboard.TargetProperty="(UIElement.Visibility)">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused"/>
<vsm:VisualState x:Name="Unfocused"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Image x:Name="PressedImage" Stretch="Uniform" Source="{TemplateBinding Pressed}"/>
<Image x:Name="NormalImage" Stretch="Uniform" Source="{TemplateBinding Normal}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Solution
<Style TargetType="local:UXButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:UXButton">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="MultiTouchStates">
<vsm:VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="NormalImage" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedImage" Storyboard.TargetProperty="(UIElement.Visibility)">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalImage" Storyboard.TargetProperty="(UIElement.Visibility)">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<VisualState x:Name="SpecialTouch">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PressedImage">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NormalImage">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Image x:Name="PressedImage" Stretch="Uniform" Source="{TemplateBinding Pressed}"/>
<Image x:Name="NormalImage" Stretch="Uniform" Source="{TemplateBinding Normal}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Code:
/// <summary>Button</summary>
[TemplatePart(Name = "Wrapper", Type = typeof(Grid))]
[TemplateVisualState(Name = "SpecialTouch", GroupName = "MultiTouchStates")]
public class UXButton : Button
{
public static readonly DependencyProperty PressedProperty =
DependencyProperty.Register("Pressed", typeof(BitmapSource),
typeof(UXButton), null);
public static readonly DependencyProperty NormalProperty =
DependencyProperty.Register("Normal", typeof(BitmapSource),
typeof(UXButton), null);
public BitmapSource Pressed
{
get { return (BitmapSource)GetValue(PressedProperty); }
set { SetValue(PressedProperty, value); }
}
public BitmapSource Normal
{
get { return (BitmapSource)GetValue(NormalProperty); }
set { SetValue(NormalProperty, value); }
}
/// <summary>Constructor</summary>
public UXButton()
{
DefaultStyleKey = typeof(UXButton);
}
/// <summary>OnApplyTemplate</summary>
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
Touch.FrameReported += (object sender, TouchFrameEventArgs e) =>
{
Image pressed = (Image)GetTemplateChild("PressedImage");
Image normal = (Image)GetTemplateChild("NormalImage");
TouchPointCollection points = e.GetTouchPoints(null);
foreach (TouchPoint point in points)
{
if (point.Action == TouchAction.Down && (point.TouchDevice.DirectlyOver == normal || point.TouchDevice.DirectlyOver == pressed))
{
VisualStateManager.GoToState(this, "SpecialTouch", false);
}
else if (point.Action == TouchAction.Up)
{
VisualStateManager.GoToState(this, "Normal", false);
}
}
};
}
}
If i understand your question correctly, i think you need to create one more visual state rather than two parts ("pressed" & "normal").
// UPDATE: you need to get the Grid in order to know the touch area
[TemplatePart(Name = "Wrapper", Type = typeof(Grid))]
[TemplateVisualState(Name = "SpecialTouch", GroupName = "MultiTouchStates")]
public class UXButton : Button
Then in your custom button's constructor, subscribe to the FrameReported event,
public UXButton()
{
DefaultStyleKey = typeof(UXButton);
Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);
}
void Touch_FrameReported(object sender, TouchFrameEventArgs e)
{
// UPDATE: get the Grid
var wrapper = GetTemplateChild("Wrapper") as Grid;
TouchPointCollection points = e.GetTouchPoints(null);
foreach (TouchPoint point in points)
{
// UPDATE: also do the touch area check here
// specify what touch you want
if (point.Action == TouchAction.Down && point.TouchDevice.DirectlyOver == wrapper)
{
VisualStateManager.GoToState(this, "SpecialTouch", false);
}
}
}
Then in the style, you do the hide and show images in this visual state you just created. If you want to be able to dynamically change the normal and pressed images, of course you can just add your TemplateParts back in.
UPDATE: Also you need to give your root element which is the Grid a name and a background color,
like this,
<Grid x:Name="Wrapper" Background="Transparent">
<VisualStateGroup x:Name="MultiTouchStates">
<VisualState x:Name="SpecialTouch">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PressedImage">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NormalImage">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
Hope this helps.