I was wondering whether it's possible to have an animation whereby the Text value of a TextBlock switches between two values. The FontFamily for the TextBlock is an icon font and so what I'm aiming to pull off is essentially an animated icon.
For example:
<StackPanel
x:Name="PART_LayoutRoot">
<StackPanel.Resources>
<Storyboard
x:Name="PART_Animation">
<<STRING>Animation
Storyboard.TargetName="progressBarIcon"
Storyboard.TargetProperty="Text"
From="hi" To="bye" Duration="0:0:1"
AutoReverse="True"/>
</Storyboard>
</StackPanel.Resources>
<TextBlock
x:Name="progressBarIcon"/>
</StackPanel>
Does an animation type exists that will enable me to achieve what I'm after? If not, is there any other way to do so without using a storyboard animation? I'm planning to use this animation until a certain action completes i.e. a custom busy indicator.
Any help/guidance is much appreciated.
Animating string properties is not possible this way for two reasons - there is no clear way how a string animation should look, and also the value of the Text property would be unclear/invalid during the animation.
To achieve the result you want, you will need to create two TextBlocks, one with full Opacity="1" and one with Opacity="0" and then animate these opacities - one to fade out, one to fade in - this is possible normally with the DoubleAnimation so you will not run into any issues here.
Related
I have a SplitView:
<SplitView Name="splitView"
DisplayMode="{Binding SplitViewDisplayMode}"
IsPaneOpen="{Binding SplitViewIsPaneOpen}"
OpenPaneLength="200" CompactPaneLength="51"/>
I am also using VisualStateManager to adjust the SplitView based on application window size: (example)
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="500"></AdaptiveTrigger>
</VisualState.StateTriggers>
Thus far everything works correctly, but I ran into an unexpected result when the trigger above and state below are activated.
<VisualState.Setters>
<Setter Value="True" Target="splitView.IsPaneOpen"></Setter>
<Setter Value="Overlay" Target="splitView.DisplayMode"></Setter>
</VisualState.Setters>
I cant seem to find a way to detect the event so that my ViewModel knows when the SplitView pane focus is lost. Right now as designed Overlay displays until the user clicks the view (as designed), but I'd like to know, when the SplitView Overlay is collapsed so that I can add additional binding events into my HamburgerMenu.
From what I am experiencing it appears that VisualStateManager doesn't update/change my bindings
DisplayMode="{Binding SplitViewDisplayMode}"
Any ideas as to how I can discover if/when the Overlay disappears/Closes?
The only thing I can think of is to create methods that discover the Window size, and then determine if the SplitView should be Inline/Compact/Overlay.. This is doable but would result in a lot of potential combinations.
Any thoughts or ideas on how to detect or get SplitView to tell me if Overlay is Collapsed when a user clicks a control outside of the SplitView?
To make the bindings work, you have to specify them as two way bindings. Without this, they will only update the UI with your changes in code, not the other way around:
<SplitView Name="splitView"
DisplayMode="{Binding SplitViewDisplayMode, Mode=TwoWay}"
IsPaneOpen="{Binding SplitViewIsPaneOpen, Mode=TwoWay}"
OpenPaneLength="200" CompactPaneLength="51"/>
Now your properties should be properly updated whenever the state changes.
I am trying to get a RichEditBox to take over the entire width of the app window and to be responsive to window resizing, so far the code I have is the following:
<RichEditBox HorizontalAlignment="Stretch"
TextWrapping="WrapWholeWords"
Height="250"
Name="Intro"/>
What I am getting from the code above is this:
Any ideas on how can I get this to work? Why is it that I tell the text to wrap and it doesn't follow?
UPDATE
I also tried this:
<RichEditBox HorizontalAlignment="Stretch"
Height="250"
Name="Intro"/>
But the result is:
The problem that I am having is that it seems that HorizontalAlignment="Stretch" does not really do anything. The only way I am able to set a decent width is by hard-coding it, for example: Width="600". But if I do this my UI will not respond correctly to resizing. I also tried HorizontalContentAlingment="Stretch" but the result is exactly the same.
How can I get my RichEditBox take up all the available Width and Wrap at the same time?
If you look at the documentation of RichEditBox.TextWrapping, you'll notice that WrapWholeWords is invalid. You have to use
<RichEditBox TextWrapping="Wrap"/>
-or-
<RichEditBox TextWrapping="NoWrap"/>
Since Wrap is the default value, you can drop the property.
<RichEditBox HorizontalAlignment="Stretch"
Height="250"
Name="Intro"/>
Edit: in reply to the updated question:
A control only takes the width of it's parent control. Some container controls (e.g. Grid) automatically take the full width available, while others (e.g. StackPanel) only take the required size of it's children. Using HorizontalAlignment="Stretch" in combination with a StackPanel as a parent control, will only use the MinWidth property instead of the full available width on your screen. Sometimes you can't directly see this issue, e.g. when your control is inside an itemtemplate of a ListView. Use the Live Visual Tree in Visual Studio to find the parent containers and locate the issue.
So in short: make sure your RichEditBox is inside a Grid (or similar control) instead of a StackPanel.
I have a Canvas that overrides PointerMoved event do some stuff if the user "paints" on it. Now I'm trying to move this Canvas inside a ScrollViewer to add Zoom and Scroll effects which works perfectly.
<ScrollViewer x:Name="MainScrollViewer" Grid.Column="1"
VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"
ZoomMode="Enabled" MinZoomFactor="0.5" MaxZoomFactor="2.0" >
<Canvas x:Name="MainCanvas" Background="#000000"
HorizontalAlignment="Left" VerticalAlignment="Top"
PointerMoved="MainCanvas_PointerMoved" />
</ScrollViewer>
However, the ScrollViewer captures all the Pointer move Events and this caused the main paint procedure not working anymore.
Any idea on how to fix this?
Drawing with touch while still allowing zooming/panning - this is currently not supported in XAML. You will need to turn OFF zooming/panning in order to be able to draw with Pointer events and it is not possible to obtain system zooming and panning behaviors simultaneously with custom manipulations. You can however try to use Manipulation events by setting ManipulationMode=All and handle two finger scrolling and pinch zoom using Scale and Translate values manually.
See more at: Touch based drawing app with a Canvas inside a ScrollViewer
I didn't work with canvas and scrollview but I think which I found will help you :)
There is a trick! You can add a tool button (like hand) to switch in two conditions.
First condition enable drawing: you can disable HorizontalScrollMode and VerticalScrollMode of ScrollViewer which gives you ability to use pointer events of Canvas.
In second one you should enable the HorizontalScrollMode and VerticalScrollMode for ScrollViewer, and it works!
To change ScrollViewer properties programmatically:
MainScrollViewer.HorizontalScrollMode = ScrollMode.Auto;
MainScrollViewer.VerticalScrollMode = ScrollMode.Auto;
MainScrollViewer.ZoomMode = ZoomMode.Enabled;
Quick question for the pros. I have a userControl sitting in the centre of my page. When the page is tapped I want to use a doubleAnimation to dock the control to the left of the page.
This line To="{Binding Canvas.Left}" is not working. I have to specify a value. eg. -200 which will animate (TranslateX) to the left but for some screens it never reaches the left of the page. How should I handle this? Also is the tapped event of the page the correct place to check for the first interaction on the page since it should only happen the first time the user interacts?
In my code behind I want to use something like if(usercontrol.left > 0){storyboard.begin;}. What is the best way to achieve this?
I will probably have to put a From={Binding UserControl.CurrentPosition} as well
Thanks
<Page.Resources>
<Storyboard x:Name="EntryAnimation">
<DoubleAnimation Duration="0:0:1"
To="{Binding Canvas.Left}"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="idcMain"
d:IsOptimized="True" />
</Storyboard>
</Page.Resources>
Instead of using storyboards, You can use system transitions (RepositionTransition in your case). This way, You Just modify the Canvas.Left property and it's automagically animated using transitions timing consistent with the global OS UX.
I have layout as described below:
<ScrollViewer>
<StackPanel Orientation="Horizontal">
<!-- ... -->
<ScrollViewer>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel ScrollViewer.VerticalScrollBarVisibility="Visible" Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ScrollViewer>
<!-- ... -->
</StackPanel>
</ScrollViewer>
And I would like to achieve that effect that is present in weather app.
In my application, when you're scrolling horizontaly using mouse wheel, when pointer gets over ItemsControl it immediately starts scrolling verticaly wheras in weather application there's fluent horizontal scrolling effect and scrolling verticaly begins when there's some time hover that vertical collection.
Is that behaviour somewhere implemented by default?.
Szymon
Generally, the guideline is that introducing vertical scrolling in a horizontally scrolling repeater is a bad idea. I think you should NOT consider Weather (or any standard Windows 8 app) as a model to emulate. Most of them violate the guidelines in some of the worst ways.
The Weather app accomplishes what you are asking based on the current mouse placement, the motion of the grid, and control with focus. That's a complex way of saying, some developer dreamed up a solution to help make their UI as confusing to the user as possible.
Please, don't.
What I think they do in order to achieve that effect is this:
If the mouse is over the vertical list for a while, they deactivate the horizontal scroll and activate the vertical one. Once the mouse moved outside the list, they switch back (deactivate the vertical scroll and activate the horizontal scroll).
I have not tested this to see if this works, but I think it should.