I have a TextBlock that I create during run-time:
TextBlock firstBlock = new TextBlock();
firstBlock.Text = "Mary Joe";
firstBlock.Margin = new Thickness(0, 0, -1500, 0);
firstBlock.FontSize = 72;
firstBlock.TextAlignment = TextAlignment.Center;
firstBlock.Foreground = Brushes.Red;
myGrid.Children.Add(firstBlock);
I want to be able to move the TextBlock down the Y-axis smoothly. I've thought to use DoubleAnimation, but I couldn't find a property to alter in order to move it. I would also like to make the text smaller as it goes downwards (kind of like a reverse Stars Wars Credits, but no 3D). I know this stuff is pretty simple to make in xaml, but I want to be able to call the animation at certain times and add new text each time in the blocks. I've searched around a lot to no avail. I figured I would post here to see if smart people could help me :).
You can use a TranslateTransform on the TextBlock to move it. Use a double animation on the Y property.
For the FontSize use another double animation to shrink the value. Put them both in a Storyboard and you can run them at the same time.
Related
I'm trying to develop an application with a "map" and every user has some pieces on it.
All the pieces are in canvas.
The pieces have a new position every 30ms, I set them using a timer doing :
myPiece.Margin = new Thickness(x, y, 0, 0);
But the render is not really smooth (actually it is when I put my window in 1024*768).
Is there a better way to set the positions to have a better render ?
You can try RenderTransform with TranslateTransform. They should be faster than setting the margins. But then you will need to keep track of your positions based on something else but margin.
I need to make an application that shows codes that update from time to time.
Now I got the back-end part covered but I am completely new to the front end part.
I'd basicly like it took look something like this:
Now the idea is that I'll have a List that holds items that should be converted to elements in the below visual list.. The logo is something I staticly added and that is anchored to the left top corner, I'd like to create the rest of the elemnents dynamically (I have a timed event loop to check if the list has changed, etc)
So I made the following method as a starting point:
private void createOTPEntry()
{
Rectangle entry = new Rectangle();
entry.Name = "entry1";
entry.Stroke = new SolidColorBrush(Color.FromRgb(0, 111, 0));
entry.Fill = new SolidColorBrush(Color.FromRgb(243, 86, 13));
entry.Height = 65;
entry.Width = 497;
Thickness margin = entry.Margin;
margin.Left = 10;
margin.Top = 83;
entry.Margin = margin;
entry.BringIntoView();
}
Now this isn't relative yet to the logo or anything.. But it's supposed to atleast be a white rectangle with an orange border.. And it's not showing. I tried to find if my rectangle object has like a "show" or "draw" method but it doesn't.. And I'm still miles away from what I really want..
So the logic of what I want:
Loop that goes over list elements and draws the visual list elements, probably a Rectangle containing 2 TextBoxes or Labels (one of the labels will change)
These elements will be added to another Container? that has a scrollbar in case there are to many elements.
I'd like some help of possible on what control do I choose to add the elements to? (the container witht he scrollbar?). How exactly do I show my rectangle? Is there an easy way to make them kinda automaticly space when I add them to the "parent control" (the scrollable container).
Thanks in advance for giving me a jump start!
hello I have the following problem: I want to draw a rectangle on the canvas with methods Canvas.SetLeft() and Canvas.SetTop().
I use the method UserControl_Loaded() and everything works.
the problem is that having ActualWidth when resizing the window and therefore the grid, the value does not change and I left with the values no longer accurate.
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
Rectangle rett = new Rectangle();
rett.Height = grid1.ActualHeight-10;
rett.Width = grid1.ActualWidth -10;
rett.Fill = new SolidColorBrush(Colors.LightBlue);
canv.Children.Add(rett);
Canvas.SetLeft(rett, 10);
Canvas.SetTop(rett, 10);
}
this is the xaml:
<Grid x:Name="grid1">
<Canvas x:Name="canv" Height="auto" Width="auto"></Canvas>
</Grid>
in the first picture it is fine when not resize the window.
the second when I resize the grid remains the previous width.
I want the width of the rectangle was updated when changing the width of the grid.
Thank you.
Without a good, minimal, complete code example that clearly illustrates your question, along with a detailed explanation of what you're actually trying to accomplish (especially in a broader sense), it is impossible to know for sure what the best answer in your case would be.
Taking your question literally, it seems one possible approach would be to bind the Rectangle dimensions to the Grid's dimensions, so that they are updated as the Grid changes size. You can use IValueConverter to subtract the appropriate amount from the actual dimensions.
But that's a fairly complicated solution for what would otherwise be a reasonably simple problem, and especially so given that you seem to be doing this in code-behind for some reason (not ideal in the first place, and setting up bindings in code-behind is particularly tedious).
Idiomatically, what you should probably be doing is not putting the Rectangle in the Canvas at all, but rather making it a child of the Grid directly. Then you can set its alignments to Stretch so that it will fill the grid cell it's in. Finally, you can set its margins so that you have the 10 pixel gap on the top and left, and no gap on the right and bottom.
For example:
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
Rectangle rett = new Rectangle();
rett.Fill = new SolidColorBrush(Colors.LightBlue);
// NOTE: technically don't need to set these, as Stretch is the default value!
rett.HorizontalAlignment = HorizontalAlignment.Stretch;
rett.VerticalAlignment = VerticalAlignment .Stretch;
// 10 pixels of margin on top and left, none on right and bottom
rett.Margin = new Thickness(10, 10, 0, 0);
grid1.Children.Add(rett);
}
Doing it as above allows the XAML layout engine to automatically handle the resizing behavior you are looking for.
All that said, I would definitely encourage you to implement this in XAML instead of code-behind. There are a lot of things code-behind is good at, but frankly XAML is much better at any of the things directly related to the configuration of your GUI object graph.
I have an application where I need to dynamically build the content to a Canvas. Everything works just fine, but I am a little unsure of how I can set the y coordinates for the labels in the safest way. For example, I need to add three labels that are essentially lines of text. In Java Swing or C# GDI I would just query the the font for the line height and add that value to the y coordinate of the drawText command.
This is my code.
double y = 0.0;
_line1.Content = "Line1";
_line1.SetValue(Canvas.TopProperty, y);
_line1.SetValue(Canvas.LeftProperty, 0.0);
CanvasChart.Children.Add(_line1);
double textHeight = _line1.Height;
y += textHeight;
_line2.Content = "Line2";
_line2.SetValue(Canvas.TopProperty, 0.0);
_line2.SetValue(Canvas.LeftProperty, y);
CanvasChart.Children.Add(_line2);
This does not work because _line1.Height does not seem to be set to anything useful at this point. I suppose it has not rendered yet. The above code is in the loaded event for the window. ActualHeight does not help either.
Most code that I've seen seems to just set them to a hard coded value. That I suppose looks right on the developer's display, and you just hope looks good at other resolutions/DPI. In Swing and GDI I always had the best results finding out exactly how many pixels a string will be rendered at and using this to offset the next line.
You must call the Measure method, specifying an infinite available size. This will update the DesiredSize of the control:
_line1.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
double textHeight = _line1.DesiredSize.Height;
Another easy way to achieve the desired effect is to put the labels in a StackPanel.
In Swing and GDI I always had the best results finding out exactly how many pixels a string will be rendered at and using this to offset the next line.
This is possible in WPF as well. The GlyphTypeface class provides the AdvanceWidths and AdvanceHeights properties for each character in a typeface. By using CharacterToGlyphMap, you can map a character to an index within the AdvanceHeights, and use that to determine the actual height of any character.
For a detailed example, see GlyphRun and So Forth.
So im developing this app, where i got something that reminds alot about a list, but it doesn't use a list control or something. I add grids & rectangels to a scrollviewer, and when i doubletap a grip or a rectangel, it dissapears with a fade animation (which i also need help to do, as well as fade in, fast, one by one on app startup), and when that happens, i want the grid or rectangel beneath the one that faded out (or was removed, what is the best solution?), to be slided up, and replace the empty position. Please, do not misunderstand the question, i dont want you to make it for me, i want to know how since i absolutely cannot find ANY solution at all. It kind of works like google now for android and iphone. How can i do this the best way? Thank you SO much! Best regards, Erik
My DoubleAnimation to fade the grid:
DoubleAnimation fadeGrid = new DoubleAnimation();
fadeGrid.From = 0;
fadeGrid.To = 1;
fadeGrid.Duration = new Duration(TimeSpan.FromSeconds(0.5));
fadeGrid.AutoReverse = false;
1) Use animations for your fade out and slide up. For fade, you'll be doing a DoubleAnimation on the Opacity property. For sliding items up, you'll be doing an animiation on the TranslateTransform property. See these MSDN guides: http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj206955(v=vs.105).aspx and http://msdn.microsoft.com/en-us/library/windowsphone/develop/system.windows.media.translatetransform(v=vs.105).aspx
2) For actually properly moving things up, you'll want to capture the Completed event from the animiation (http://msdn.microsoft.com/en-us/library/windowsphone/develop/system.windows.media.animation.timeline.completed(v=vs.105).aspx). When the animiation completes, remove those controls from the StackPanel inside the ScrollViewer, and undo any position animation you did on the items below it to animate them 'sliding' up.
3) After creating an animiation, you need to add it to a storyboard:
Storyboard sb = new Storyboard();
sb.Children.Add(fadeGrid);
Storyboard.SetTarget(fadeGrid, myRectangle);
Storyboard.SetTargetProperty(fadeGrid, new PropertyPath("(UIElement.Opacity)"));
sb.Begin();
The syntax for the propertypath but not be quite perfect, but you get the idea. You can see another example that specifically mentions opacity here: http://blogs.msdn.com/b/silverlight_sdk/archive/2008/03/21/silverlight-animations-a-walkthrough.aspx