I have a simple animation that i did using blend that moves a TextBlock to the left till it vanishes from the screen
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="dtitle">
<DoubleAnimation Duration="0:0:2" To="-523.831" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="titleblock" d:IsOptimized="True"/>
</Storyboard>
</phone:PhoneApplicationPage.Resources>
I have one button 'Start' that should play the animation for about 0.25 secs and then pause it. So if the user presses the button, the TextBlock will move a tiny bit to the left and then stop. Is there something like
dtitle.Resume()
//wait 0.25 secs
dtitle.Pause()
or maybe
dtitle.PlayForSeconds(0.25)
The user should be able to use the UI within this period.
Related
I'm trying to test touchscreen of a tablet (Surface) and therefore I'm developing an app that is able to detect tap event and tell its coordinates.
I made a tap event handler to main Grid in MainPage and wrote this to MainPage.xaml.cs:
outputText.Text = e.GetPosition(this).X.ToString() + "\t";
outputText.Text += e.GetPosition(this).Y.ToString();
outputText is just a TextBlock to output coordinates.
This code should give its coordinates based on Grid, but it only gives coordinates if I touch it within TextBlock area.
How does this Tapped event handler work in a way that it only detects tap events inside TextBlock and not from entire screen (app runs in fullscreen mode)?
My MainPage.xaml looks like this:
<Grid Tapped="Grid_Tapped" PointerPressed="Grid_PointerPressed">
<TextBlock x:Name="outputText" HorizontalAlignment="Left" Height="62" Margin="806,374,0,0" Text="TextBlock" TextWrapping="Wrap" VerticalAlignment="Top" Width="182"/>
</Grid>
The problem is that the Grid.Background is null, so the tap events pass through it. The only place where the Grid has any actual "surface" is the TextBlock, which is exactly what you are seeing.
You will have to set the background to any other value like Transparent. This way it will handle the events properly.
I have created a round button using Blend. It works good but doesn't respond to a touch event. The button should become a bit smaller and set the opacity to 1.0, similar to the location button of Nokia Maps app.
This is my existing control template:
<ControlTemplate x:Key="RoundButtonTemplate" TargetType="Button">
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="50" Margin="{StaticResource PhoneTouchTargetOverhang}">
<ContentControl x:Name="ContentContainer" Content="{TemplateBinding Content}" RenderTransformOrigin="0.5,0.5">
<ContentControl.RenderTransform>
<ScaleTransform x:Name="buttonScale" />
</ContentControl.RenderTransform>
</ContentControl>
</Border>
</ControlTemplate>
What is the right StoryBoard and where it needs to be inserted?
The first thing I would suggest is creating the circle using an Ellipse rather than a Border with rounded edges. That way you won't need to keep tweaking CornerRadius if you decide the button needs to be a different size. You can overlap the Ellipse and the ContentPresenter in a Grid like so:
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<Ellipse HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
To change how the button reacts visually to touch, you should use Visual States in Blend. With the button template opened, click on the States tab (or go to Window | States if not visible).
If you have the button template opened, you should see several built-in visual states for you to edit. Select the Pressed state, and you will go into Recording mode. Any changes to the template you make will appear when the button is pressed. You can tell you're in recording mode because of the red outline and notification around the main content window.
In this state, change what you want to see when the button is pressed. In your case, set the ellipse opacity to 100% and set the Scale Transform on the Grid to something smaller that fits your needs.
Make sure you click the Base state in the States tab to exit recording mode.
Now, when you press the button during runtime, the changes you recorded should show up. They'll also be instantaneous. To make a nice transition between states, go back to the States tab. and click the Add Transition button next to the Pressed state.
Add a transition for ->Pressed, and Pressed->. These are the transitions that will play when you enter and leave the pressed state. Here you can edit the transitions duration and easing function.
Personally I usually do something around 0.2s, with Quadratic Ease In/Out. Now when you press the button, there should be a slight animation between different visual states.
Good luck!
I have introduced some animation into my WP7 app via a storyboard.
It is all working as expected the first time through - the event occurs, and I call the code to do the animation in the code behind and I get exactly the behaviour I want.
But when I trigger the second time, it is like the the delegate code involved in this is being called twice. And then I trigger the same event and the delegate code is called 3 times. Its cumulative.
Code that is called is as follows
private void WeekForward()
{
FadeTitleOut.Begin();
FadeTitleOut.Completed += delegate
{
StartingMonday = StartingMonday.AddDays(7);
BuildPage();
FadeTitleIn.Begin();
};
}
FadeTitleOut and FadeTitleIn are my storyboards and the animation effect is fine. It's just that the first time the event happens StartingMonday is incremented by 7 days. The next time the event fires its incremented by 14 days and so on.
Am I doing something really dumb with my delegate code?
Probably should add that I am doing most of the stuff here in the code behind, including the generation and deletion of controls dynamicaly, but the Storyboards are defined in the XAML and they reference a control that is defined in the XAML (and not generated in the code behind)
Storyboard XAML is
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="FadeTitleOut">
<DoubleAnimation Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:0.3" />
</Storyboard>
<Storyboard x:Name="FadeTitleIn">
<DoubleAnimation Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="0:0:0.3" />
</Storyboard>
</phone:PhoneApplicationPage.Resources>
Any ideas?
Have a look through your code, my guess is that "WeekForward()" is getting called more often than you want it to and you are subscribing the FadeTitleOut.Completed each time it is called (hence the behaviour you are describing). One way to fix this would be to have this code else where so it only subscribed to the Completed event once.
Also, you should write up your events before firing the Begin method as you have a potential race condition. eg,
FadeTitleOut.Completed += delegate
{
StartingMonday = StartingMonday.AddDays(7);
BuildPage();
FadeTitleIn.Begin();
};
FadeTitleOut.Begin();
Put this code where it will be fired once during the life of the XAML page and it should be fine. Hope that helps.
For example, using the Light Theme means that the back and appbar buttons are black.
However when using a darker app bar colour, the contrast of the buttons is stark.
Here's a screen grab, ignore the quality of the white one. http://i.imgur.com/2EzSd.png
Is there any way to directly access the styles that result in one theme's icons vs anothers?
Note: I'm building a C# + XAML app.
As a start the button will be looking somewhat like this:
Under the StandartStyles.xml you have to look for the style AppBarButtonStyle first to change your icon color find <Setter Property="Foreground" Value="{StaticResource AppBarItemForegroundThemeBrush}"/>
Now you replace {StaticResource AppBarItemForegroundThemeBrush} with the color you want you can use both white and #FFFFFFFF. now you have changed the visuals of your icon and you should have something like this
Now you need to style the text below this is done by finding the </TextBlock tag a few lines down and also changeing the forground property there
Now you have a nice looking icon but as soon as you mouse over it all turns quiet ugly agien. in order to change the diffrent states move down to the <VisualStateGroup x:Name="CommonStates"> tag here you will find a tag <VisualState x:Name="PointerOver"> as you might suspect this changes the properties of button when you hover the mouse over it.
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
<!-- the background of the actionbar-> !--><DiscreteObjectKeyFrame KeyTime="0" Value="yourBackgroundColor"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
<!-- the icon of the actionbar-> --><DiscreteObjectKeyFrame KeyTime="0" Value="yourActionBarIconColor"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
If you keep scrolling down you will find <VisualState x:Name="Pressed"> and so on.
You can take a look at the CSS that each theme uses by expanding the References node under the project in Visual Studio, then expanding the Windows Library for JavasScript 1.0 node and then the css folder.
The relevant lines for the colors of the AppBar seem to start on line 2621 of my ui-dark.css file. Also line 2448 specifies the color of for a .win-commandimage item, which is the icons for most appbar commands are. You should be able to override these settings in your project's stylesheet.
It turns out that Windows 8 just uses the Foreground colour (which it inherits from the selected theme style).
Which means that all you need do, is set the foreground to change the icon colour, winner!
The colours of the App Bar buttons for each theme are defined as resources which you can override. I've described the process at Windows 8 – Overriding Metro app resources.
For your approach is should be simple enough to grab the Light App Bar button resources and use them to override the Dark resources.
I have a behavior that changes the visual state based on the page's orientation (portrait/landscape). I have a ListBox with a somewhat complex DataTemplate for its ItemTemplate. Is it possible to change the ItemTemplate from a VisualState's Storyboard? My XAML karma is low, and Blend doesn't let me do it (it changes the original ItemTemplate, it doesn't add a storyboard entry).
And remember, this is for Windows Phone 7 (thus Silverlight 3).
I probably didn't get an answer because it was too obvious. I told you my XAML karma was low. Here is the solution. Simply add this ObjectAnimationUsingKeyFrames to your storyboard:
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ItemsControl.ItemTemplate)"
Storyboard.TargetName="PartakersListBox">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource LandscapePartakerDataTemplate}" />
</ObjectAnimationUsingKeyFrames>
I didn't return to Blend yet, to see if the template was editable. Will update below.