Supposing that I have two labels with variable text. Label 1 is in the center of the screen. I can position Label 2 on the right side of Label 1:
label1.Location = (WIDTH / 2, Height / 2)
label2.Location = new Point(label1.Right, label1.Top);
Form output:
_______________
| |
| 100 200 |
|_______________|
Now I want do the same, but position Label 2 on the left side of Label 1. How can I do this?
Form output:
_______________
| |
| 200 100 |
|_______________|
If label2 is already sized correctly, you can just subtract its width from the left side of label1:
label2.Location = new Point(label1.Left - label2.Width, label1.Top)
Diagram:
-----(label1.Left - label2.Width)
|
| -----label1.Left
_|___|_________
| v v |
| +---+---+ <--------label1.Top
| |200|100| |
| +---+---+ |
| '---' |
|___|__________|
|
-----label2.Width
Position the second label starting from the left point of the first label and subtracting the witdh of the one to be placed
label2.Location = new Point(label1.Left - label2.Width, label1.Top);
By the way, the value used for your first label should consider the width and height of the label to be really at the center of the label container.
So assuming you want the first label at the center of its containing form you should use a formula like this
int leftPos = (this.Width / 2) - (label1.Width / 2);
int topPos = (this.Height / 2) - (label1.height / 2);
label1.Location = new Point(leftPos, topPos)
Related
I've got a tabbed UI (WPF) like this:
___ ___
/ A \_/_B_\_____
| ___________ |
| | (List) | |
| | ______ | |
| | | Data | | |
| | |______| | |
| | ______ | |
| | | Data | | |
| | |______| | |
| | ______ | |
| | | Data | | |
| | |______| | |
| |___________| |
|_______________|
In each "Data" section there is data (duh) but also a button that causes the state of the data to change so that it disappears from tab A and appears instead in tab B. For better or worse, this is the design the client wants, so unfortunately restructuring is not an option.
So right now when the user hits the button in a Data section, the Data just disappears and the user has to "know" that it's now moved to tab B. To show the user what is happening, I was imagining animating the data block when the user hits the button so that it shrinks and moves up to the tab labeled "B" and maybe even have the tab pulse when it gets there or something.
I've got the animation code working, it was a little tricky to convince a Storyboard to animate position and size at the same time, but thanks to a previous StackOverflow answer I was able to write this and it works:
TransformGroup group = new TransformGroup();
TranslateTransform trans = new TranslateTransform();
group.Children.Add(trans);
ScaleTransform scale = new ScaleTransform(1, 1);
group.Children.Add(scale);
RenderTransform = group;
var storyBoard = new Storyboard();
var yMove = new DoubleAnimation(0, newY, new Duration(new TimeSpan(0, 0, 3)));
Storyboard.SetTarget(yMove, this);
Storyboard.SetTargetProperty(yMove, new PropertyPath("RenderTransform.Children[0].Y"));
storyBoard.Children.Add(yMove);
var xMove = new DoubleAnimation(0, newX, new Duration(new TimeSpan(0, 0, 3)));
Storyboard.SetTarget(xMove, this);
Storyboard.SetTargetProperty(xMove, new PropertyPath("RenderTransform.Children[0].X"));
storyBoard.Children.Add(xMove);
var width = new DoubleAnimation(1, scaledWidth, new Duration(new TimeSpan(0, 0, 3)));
Storyboard.SetTarget(width, this);
Storyboard.SetTargetProperty(width, new PropertyPath("RenderTransform.Children[1].ScaleX"));
storyBoard.Children.Add(width);
var height = new DoubleAnimation(1, scaledHeight, new Duration(new TimeSpan(0, 0, 3)));
Storyboard.SetTarget(height, this);
Storyboard.SetTargetProperty(height, new PropertyPath("RenderTransform.Children[1].ScaleY"));
storyBoard.Children.Add(height);
storyBoard.Begin(this);
The problem is that as soon as a Data control tries to move outside of its parent, it gets clipped. I tried setting ClipToBounds to false but it didn't help.
Is there a way to "set my control free" so it can move around the screen without getting clipped?
You could try to use an adorner layer, there you should be free to move the objects wherever you want.
You can create the same the control in the adorner layer, collapse you actual control and then animate the control in the adorner layer.
I have created a widget which looks like the following.
There are 3 panels which will track 3 different items and display their respective information.
Next to them will be a scrollviewer which outputs all the events that happens.
==============================================================
* This is * * *| |
* a * * *| This is a scrollviewer |
* panel * * *| |
==============================================================
I am trying to have a notification popup when an event occurs for the item and display for a few seconds before disappearing. E.g
==================
| Battery empty! |
| |
| |
==================
==============================================================
* Item:1 * Item:2 * Item:3 *|Item 1 battery empty! |
* * * *| |
* Batt: 0 * Batt:55% * Batt:80% *| |
===============================================================
However the width of the notification window is bigger than the panel. Hence if there are alerts for any other items, the notification popups will be overlapping each other.
============================
| Battery em|Battery full! |
| | |
| | |
============================
==============================================================
* Item:1 * Item:2 * Item:3 *|Item 2 battery full! |
* * * *|Item 1 battery empty! |
* Batt: 0 * Batt:100% * Batt:80% *| |
===============================================================
Is there a way for me to program the popups to avoid each other and automatically readjust themselves to the side? And if it is too difficult is there any other method such using window as a popup?
================ =============== ===============
| Battery empty | |Battery full!| | Battery empty |
| | | | | |
| | | | | |
================= =============== =================
==============================================================
* Item:1 * Item:2 * Item:3 *|Blah blah |
* * * *|..... |
* Batt: 0 * Batt:100% * Batt: 0 *|..... |
===============================================================
*The panels are usercontrols stored in an itemcontrol of the main window.
To show Popups adjacent to each other, we can set Placement to Relative, and set HorizontalOffset property of subsequent Popups to increase by 200 (width of popup).
For eg; 1st Popup will have HorizontalOffset to 0, 2nd to 200, 3rd to 400 and so on.
<Popup x:Name="Popup1" PlacementTarget="{Binding MyCanvas}" IsOpen="False" Placement="Relative">
<Grid Background="Red" Width="200" Height="200"></Grid>
</Popup>
<Popup x:Name="Popup2" PlacementTarget="{Binding MyCanvas}" IsOpen="False" Placement="Relative" HorizontalOffset="200">
<Grid Background="Yellow" Width="200" Height="200"></Grid>
</Popup>
<Popup x:Name="Popup3" PlacementTarget="{Binding MyCanvas}" IsOpen="False" Placement="Relative" HorizontalOffset="400">
<Grid Background="Yellow" Width="200" Height="200"></Grid>
</Popup>
This will place Popups adjacent to each other like shown below.
By default, the Y axis will start from bottom in ZedGraph.
Now, I want to have a chart will look:
y
0 |
10 |
20 |
30 |
40 |--------------x
Is it possible to reverse Y asix?
It can be achieved by setting YAxis.Scale.IsReverse = true;
I have a bug somewhere in my code, was wondering if this is incorrect.
I have a 2D view matrix in my code, but to display my world to the screen I need to convert the 2D view matrix to a 3D one. This is the process that I am using:
| a b c | | a b c 0 |
| d e f | => | d e f 0 |
| g h i | | g h i 0 |
| 0 0 0 1 |
It works when I use an identity matrix for the 2D matrix, but as soon as I apply any transforms to the 2D matrix all my objects being drawn disappear.
For drawing in 2D using 3D, I use this projection matrix:
_basicEffect.Projection = Matrix.CreateOrthographicOffCenter(0, graphicsDevice.Viewport.Width, graphicsDevice.Viewport.Height, 0, 0, 1);
What is the correct way to transform the 2D matrix to 3D?
Affine transformations use the extra row/column of the transformation matrix for translation. So I think what you want to do is to move the last row/column down/right and then for the new axis simply insert the identity transformation.
| a b c | | a b 0 c |
| d e f | => | d e 0 f |
| g h i | | 0 0 1 0 |
| g h 0 i |
I'm not sure, but give it a try at least.
I'm looking for a simple algorithm that, given a rectangle with width w and height h, splits the rectangle into n more or less equal sized and shape rectangles and calculates the center of these rectangles.
EDIT: Forgot to mention that the shapes should be as similar as possible to a square.
Any hints how to start?
A simple algorithm is to split vertically into n equal sized strips of height h and width w/n.
If you assume that the initial rectangle has corners (0,0) and (w,h) then using this algorithm the ith rectangle would have center (w / n * (i + ½), h/2), for 0 <= i < n.
Update: try finding all the factorizations of the number n into factor pairs (i, j) such that i * j = n, and find the factor pair such that the ratio of the factors is closest to the ratio of the sides of the rectangle. Then use the two factors to create a regular grid of smaller rectangles.
For example when n is 10, you can choose between (1, 10), (2, 5), (5, 2) and (10, 1). Here is an example grid using the factors (5, 2):
------------------------------------
| | | | | |
| | | | | |
------------------------------------
| | | | | |
| | | | | |
------------------------------------
If your initial rectangle has width 60 and height 20 then using the factor pair (5, 2) will give ten rectangles of size (60/5, 20/2) = (12, 10) which is close to square.