I'm applying an EntranceThemeTransition animation to a TextBlock. The TextBlock has a style of PageHeaderTextStyle which has a RenderTransform in it. The issue I'm having is that the RenderTransform applies a Translation effect that doesn't actually render until after the animation is done playing. So, it looks weird because the animation scrolls the control in, and then suddenly the translation snaps the text in place. Does anyone know why this happens?
Is there a way to play the animation with the translation taken into account?
Transform:
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform X="-2" Y="8"/>
</Setter.Value>
</Setter>
TextBlock:
<TextBlock x:Name="pageTitle" Grid.Column="1" Text="{Binding Title}" Style="{StaticResource PageHeaderTextStyle}">
<TextBlock.Transitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</TextBlock.Transitions>
</TextBlock>
I just came up against exactly the same issue. The way to solve it is to nest the TextBlock one level away from the Grid with the transition on it, for example with a second Grid.
What happens is the transition applies a transform to each of its children, but any transform they may have had is replaced temporarily until after the animation completes, resulting in the nasty 'snap' when the original transform is applied afterwards.
In the following example, the transition will run, replacing the TextBlock's transform, and then after the transition ends the original transform will be applied. You see the 'snap':
<Grid Style="{StaticResource LayoutRootStyle}">
<TextBlock Text="Header" Style="{StaticResource PageHeaderTextStyle}"
Margin="0,0,0,40"/>
</Grid>
In the next example, the transition runs and the transform is applied to the Grid, leaving the TextBlock's transform unaffected. No 'snap':
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid>
<TextBlock Text="Header" Style="{StaticResource PageHeaderTextStyle}"
Margin="0,0,0,40"/>
</Grid>
</Grid>
Hope this helps!
From your words it just seems like the EntranceThemeTransition animates the transform of your TextBlock. The simplest way around that would be to either put the entrance transition on a parent element, or put the transform on one. You could simply wrap your TextBlock in a Grid to do it.
Related
PersonPicture is a control offered in Microsoft's Universal Windows Platform.
It looks great, which is why I'm trying to use it to display a user's initials with a background color.
The problem is that when I set the control's background to a color, the background is not changed on the display.
<PersonPicture Initials="JF"
Background="Red"/>
In the above code, the Background still remains the default, while everything else is updated.
Please if you have been able to set the background color, share how you've done it!
I found the template for the PersonPicture through this question: How to get all Controls' ControlTemplates Programmatically?(UWP)
The PersonPicture ignores its Background property and uses a couple of brushes that make up the colors of the control depending on Dark/Light theme and some hard coded values.
It draws an ellipse/circle and thus shows its container's color in the four corners.
Assuming you want to set the color in the square that contains the picture you could do this:
<Grid Background="Green">
<Grid HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="Red">
<PersonPicture />
</Grid>
</Grid>
The first grid represents a page. The second grid tightly wraps around the PersonPicture:
Note how the personpicture is somewhat transparent and shows the color of the grid. The color that the template uses for the ellipse is #77FFFFFF
So you could take it a step further by adding an ellipse:
<Grid Background="Green">
<Grid HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="Red">
<Ellipse Fill="White"/>
<PersonPicture />
</Grid>
</Grid>
This allows you to control the color of the picture somewhat by setting the color of the ellipse:
Do note that it still mixes the PersonPicture with the background so you cannot set it to black:
<Grid Background="Green">
<Grid HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="Red">
<Ellipse Fill="Black" />
<PersonPicture />
</Grid>
</Grid>
Shows:
And finally, you could copy the template (see: How to get all Controls' ControlTemplates Programmatically?(UWP))
and adjust it to use the Background property.
I'm trying to create a UWP calculator app and for the display I have a slight issue. The calculator is the type that you input the text and eventually click enter and it respects orders of operation. As such, the input may get quite long so I'll need a scrollviewer around a textbox. I'm working on Windows 10 Creator's Update but the app should be backwards compatible to release version if possible.
I intend on using buttons to control cursor position, but I'd still like to have a scrollbar to indicate where you are, horizontally, in the long string. I can't figure out how to make the scrollbar there only as a visual indicator, not as a way of controlling the scrollviewer. When the mouse cursor goes near it the scrollbar expands and allows user input; this I want to avoid.
This is my display currently, very basic. How would I go about modifying that scrollviewer to my purposes?
<Border>
<ScrollViewer HorizontalScrollMode="Auto" VerticalScrollMode="Disabled" HorizontalScrollBarVisibility="Auto">
<TextBox IsReadOnly="True" Margin="5" FontSize="24" Text="long string of testing text"/>
</ScrollViewer>
</Border>
Disable hit testing on the ScrollBar:
<Border>
<ScrollViewer HorizontalScrollMode="Auto"
VerticalScrollMode="Disabled"
HorizontalScrollBarVisibility="Auto">
<ScrollViewer.Resources>
<Style TargetType="ScrollBar">
<Setter Property="IsHitTestVisible"
Value="False"/>
</Style>
</ScrollViewer.Resources>
<TextBox IsReadOnly="True"
Margin="5"
FontSize="24"
Text="long string of testing text" />
</ScrollViewer>
</Border>
Let's say we have a grid with a TextBlock in it. Now if I do some RenderTransform which makes the TextBlock appear outside of the grid, the TextBlock is still visible. My question is simple: how to automatically hide the part of the TextBlock that's outside of the grid? (In other words, how to make the grid act like a visual bound of its child?)
You can use a clipping mask that matches the bounds of the parent element:
<Border Height="200" Width="200" BorderThickness="1" BorderBrush="Black" >
<Border.Clip>
<RectangleGeometry Rect="0,0,200,200"></RectangleGeometry>
</Border.Clip>
<TextBlock Text="Foo">
<TextBlock.RenderTransform>
<TranslateTransform X="180"></TranslateTransform>
</TextBlock.RenderTransform>
</TextBlock>
</Border>
In WPF you don't need to do that manually, just set ClipToBounds="True"
In my app I'd like to have a page layout as shown on this picture:
It has two content blocks (depicted as plain and shaded rectangles) and two states. In normal (1st) state plain block takes all the screen and is fully visible while shaded is hidden behind screen. In 2nd state shaded block is fully visible and also a small part of plain block is on screen, the rest of it is hidden.
I'd also like to have a nice transition from one state to another. I understand I'd probably need to use ViewStates for this. What I don't understand it what XAML control should I use to represent content blocks. So this is the question: what XAML controls would allow me to express this layout as elegantly and concisely as possible?
How about a grid with 2 rows. A pivot control with your 2 states in each pivot item in first row and your fixed content in second row.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Background="Red">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<phone:Pivot Margin="0,-24,0,0">
<phone:PivotItem Background="Blue">
<StackPanel>
<TextBlock Text="Transition content 1" />
</StackPanel>
</phone:PivotItem>
<phone:PivotItem Background="Brown">
<StackPanel>
<TextBlock Text="Transition content 2" />
</StackPanel>
</phone:PivotItem>
</phone:Pivot>
<StackPanel Grid.Row="1" Margin="12,0,12,0">
<TextBlock Text="Fixed content" />
</StackPanel>
</Grid>
Swiping on the top box will animate as the standard pivot animation.
If you don't want the user to be able to flick and rather control the two states programmatically then you can simply add IsHitTestVisible="False" on the root pivot control then set the SelectedIndex on the pivot to switch between states.
I am having hard times figuring this out. Here is what I need:
<StackPanel x:Name="container" VerticalAlignment="Stretch">
<RichTextBox Height="???" />
</StackPanel>
Basically what I know I can do is to bind RichTextBox Height to it's parent's height ( Height="{Binding ElementName=container, Path=ActualHeight}". Unfortunately this only works on load, because as it seems ActualHeight and ActualWidth don't notify for changes.
So what is the best way in Silverlight 4 to tell RichTextBox or TextBlock, it doesn't matter, to fill it's parent height, and maintain scrollbar if it's content height is bigger. Is the only way to bind some Resize events and maintain the height explicitly? That seems really ugly to me? Have anybody had this problem as well?
Any resources or information is highly appreciated! Thanks.
Ivan,
The best way to solve this is to use a Grid as the parent for the RickTextBox, instead of a StackPanel. By default, a Grid will "Strectch" its content to take up all of the available space. A StackPanel will only Stretch its content in one diminsion.
As an example, paste the following XAML into my XamlViewer to see the difference:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<RichTextBox
Foreground="Blue" FontSize="24" Background="Yellow">
<Paragraph>RichTextBox inside a StackPanel</Paragraph>
</RichTextBox>
</StackPanel>
<Grid Grid.Row="1">
<RichTextBox
Foreground="Blue" FontSize="24" Background="Tan">
<Paragraph>RichTextBox inside a Grid</Paragraph>
</RichTextBox>
</Grid>
</Grid>
</UserControl>
Good luck,
Jim McCurdy, Face to Face Software and YinYangMoney