Edit: I solved it using a ToggleButton and its CheckedStates: more info here
I have a storyboard that when I press a button a usercontrol slides into view. I would like to be able to press the same button again and the animation reverses and the usercontrol slides away.
Here is the storyboard code:
<Storyboard x:Name="SettingsScrollUp" AutoReverse="False">
<DoubleAnimation Duration="0:0:1" To="-189" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="btn_Import" d:IsOptimized="True">
<DoubleAnimation.EasingFunction>
<QuarticEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Duration="0:0:1" To="-189" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="btn_Settings" d:IsOptimized="True">
<DoubleAnimation.EasingFunction>
<QuarticEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Duration="0:0:1" To="-189" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="SettingsPopup" d:IsOptimized="True">
<DoubleAnimation.EasingFunction>
<QuarticEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Duration="0:0:1" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="btn_Import" d:IsOptimized="True">
<DoubleAnimation.EasingFunction>
<QuinticEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
I solved this using a toggle button instead and triggering the animations from the Checked and UnChecked events. More information here.
Related
Here's a UserControl:
<Grid x:Name="LayoutRoot">
<Border x:Name="Border1" Background="Green">
<TextBlock Text="Hello, World!"></TextBlock>
</Border>
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup >
<VisualState x:Name="ExampleState">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border1">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red">
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
And somewhere in codebehind:
public DialerView()
{
this.InitializeComponent();
//LayoutRoot.DataContext = this;
VisualStateManager.GoToState(this, "ExampleState", false);
}
Please, could you explain, why Border1 doesn't change it's color to Red?
Yes, VSM should be in a Grid and everything will work now.
I met the same question and solved it with the help of official documents:
UWP:VisualStateManager Class
I gonna to pick the saying from the document:
Control authors or app developers add VisualStateGroup object elements
to the root element of a control template definition in XAML, using
the VisualStateManager.VisualStateGroups attached property.
So,i think what cause your VisualStateManager not working is that your VisualStateManager's part should be put into the hero element(except Page, I guess) scope (Maybe it's Grid or Maybe it's RelativePanel or else)
I am working on windows 8 store app in c#. I need to implement image fading in the app.
I tried to add border over it and increase thickness but could not work.
Can any one help me for how to implement it.
Thanks
By using visual state manager, you can achieve image fading animation. (I have not tried this piece of code, If you find any error please let me know :) );
<Button x:Name="btnFade" Content="Fade" Click="Button_Click" />
<Image x:Name="imageControl" width="500" height="500" Source="ms-appx:///dummy.jpg" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup >
<VisualState x:Name="FadeInState">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="imageControl"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.5" Duration="0:0:5"
/>
</Storyboard>
</VisualState>
<VisualState x:Name="FadeOutState">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="imageControl"
Storyboard.TargetProperty="Opacity"
From="0.5" To="1.0" Duration="0:0:5"
/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
// code behind
private bool isFadeIn = false;
private async void Button_Click(object sender, RoutedEventArgs e)
{
if(isFadeIn == true)
VisualStateManager.GoToState(gridControl, "FadeInState", true);
else
VisualStateManager.GoToState(gridControl, "FadeOutState", true);
isFadeIn != isFadeIn;
}
simple noob question again. I have a windows 8 phone app with a ListBox loaded with ListBoxItems (that are just plain text). I set the foreground color of the text to white in xaml:
<ListBox x:Name="L1" Foreground="white">
Once I invoke the SelectedIndex property of ListBox, the foreground changes to red. It does this whether I set it in xaml or c#. If I try and add code in c# to change the color manually after SelectedIndex has been invoked, it still doesn't work...
tempListBoxItem = listBoxPicType.SelectedItem as ListBoxItem;
tempListBoxItem.Foreground = //some color that isn't red
what is the simplest way to get around this? TIA
It has a simple way to achieve it, you can change the ListBoxItem ControlTemplate. This is the code for details
you can put the style within the resource of the PhoneApplicationPage, change the Selected VisualState
<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">
<!--The selected state, change the value to your color-->
<DiscreteObjectKeyFrame KeyTime="0" Value="Your 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>
ListBox
<ListBox ItemContainerStyle="{StaticResource ListBoxItemStyle1}"/>
Wish this can help you. Thanks
I have created a custom button in my WP app. i want to make it look like a standard windows phone 8 button.
XAML Code
<Grid Name="btnCancle" Height="76" Width="76" Margin="24" ManipulationStarted="btnCancle_ManipulationStarted" ManipulationCompleted="btnCancle_ManipulationCompleted" >
<Ellipse Name="ellipseCancle" Grid.Row="2" Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3" Height="76" Width="76" />
<Canvas x:Name="appbar_close" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="31.6666" Height="31.6667" Canvas.Left="22.1666" Canvas.Top="22.1667" Stretch="Fill" Fill="{StaticResource PhoneForegroundBrush}" Data="F1 M 26.9166,22.1667L 37.9999,33.25L 49.0832,22.1668L 53.8332,26.9168L 42.7499,38L 53.8332,49.0834L 49.0833,53.8334L 37.9999,42.75L 26.9166,53.8334L 22.1666,49.0833L 33.25,38L 22.1667,26.9167L 26.9166,22.1667 Z "/>
</Canvas>
</Grid>
The code for event handlers
private void btnCancle_ManipulationStarted(object sender, System.Windows.Input.ManipulationStartedEventArgs e)
{
Brush br = (Brush)Application.Current.Resources["PhoneAccentBrush"];
ellipseCancle.Fill = br;
}
private void btnCancle_ManipulationCompleted(object sender, System.Windows.Input.ManipulationCompletedEventArgs e)
{
Brush br = (Brush)Application.Current.Resources["PhoneBackgroundBrush"];
ellipseCancle.Fill = br;
}
My problem is that when i click the button, there is a slight delay before the button acts as the notmal button.( The backgrounc changes to the PhoneAccentColor and back). The background color won't change as soon as i touch it. but after one or 2 attempts it behaves normally. Im writing the code to perform the action for that button in the Tap event handler. but i need to make it behave like a normal button as soon as the user touches it. What am i doing wrong and what can i do to fix it? Please help.. Thanks in advance..
Try using the to change the controltemplate/style of a button. This will allow you change the appearance of the button but keeps all the behaviour a user would expect from a button. one of the great upsides from XAML to be able to do this.
So add a button to your phone page, then on the right of the designer select Document Outline go to your button you want to restyle, right click on the button, under Template choose Edit a Copy.... You now can name the style and ad it to the page resource. Now just bellow the VisualStateManager.Groups you will find the source to draw the button and you could replace it with your code:
<phone:PhoneApplicationPage.Resources>
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
<Setter Property="Padding" Value="10,5,10,6"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>-->
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse Name="ButtonBackground" Grid.Row="2" Fill="{TemplateBinding Background}" Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3" Height="76" Width="76" />
<Canvas Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path x:Name="ContentContainer" Width="31.6666" Height="31.6667" Canvas.Left="22.1666" Canvas.Top="22.1667" Stretch="Fill" Fill="{StaticResource PhoneForegroundBrush}" Data="F1 M 26.9166,22.1667L 37.9999,33.25L 49.0832,22.1668L 53.8332,26.9168L 42.7499,38L 53.8332,49.0834L 49.0833,53.8334L 37.9999,42.75L 26.9166,53.8334L 22.1666,49.0833L 33.25,38L 22.1667,26.9167L 26.9166,22.1667 Z "/>
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
Here is what the button should look like after this, notice the style gets set to the control template you just created.
<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource ButtonStyle1}"/>
HTH
I am trying to make the slider value to be set only from data binding.I dont want users to be able to change the slider value manually. This is the snippet. any suggestions on how to do it.
<Slider x:Name="Serverslider" Value="{Binding Value}"
/>
Any attribute i am missing?
As wojtek suggests, you can use IsEnabled="False" to disable input from affecting the Slider. You get this:
Now, you have the additional requirement of needing to change the fill color of the Slider. Here you have two options:
Retemplate the Slider and change the "Disabled" visual state to look how you want it. In Blend, right-click the Slider and choose "Edit Template > Edit a Copy". Then, locate the colors you wish to change. Here, these are going to be the fill color, the Thumb Background, and the Thumb BorderBrush for the Disabled state. For example, change the following XAML:
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="HorizontalDecreaseRect">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDecreaseDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="HorizontalThumb">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="HorizontalThumb">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
to this:
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="HorizontalDecreaseRect">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="HorizontalThumb">
<DiscreteObjectKeyFrame KeyTime="0" Value="Orange"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="HorizontalThumb">
<DiscreteObjectKeyFrame KeyTime="0" Value="Yellow"/>
</ObjectAnimationUsingKeyFrames>
Note: Edit the parts marked "Vertical*" if you care about the vertical Slider template.
Example code: https://github.com/finnigantime/Samples/tree/master/examples/Win8Xaml/Slider_RetemplateDisabledState
If all Disabled Sliders in your app look the same, you can override the "theme resources" that are used to draw the Disabled Slider in your app.xaml:
<Application>
<Application.Resources>
<ResourceDictionary>
<SolidColorBrush x:Key="SliderTrackDecreaseDisabledBackgroundThemeBrush" Color="Green" />
<SolidColorBrush x:Key="SliderThumbDisabledBackgroundThemeBrush" Color="Lime" />
</ResourceDictionary>
Example Code: https://github.com/finnigantime/Samples/tree/master/examples/Win8Xaml/Slider_OverrideDisabledResources