Anchoring with many TextBox controls - c#

I am working on a science fair project and I really need to move forward beyond anchors. I have worked for a couple of days on anchoring this window and I cannot figure out how to resize all of these well.
Can somebody label this image with anchors and explain exactly how they work in a way that will make sense to a 12 year old?

I have marked the necessary Anchors in colors
You will need a little code in addition to the anchors, since Anchors can't handle more than one control in relation to the borders of its parent. In your layout you have three groupBoxes all (presumably) sharing the center of the form.. You could calculate dist if you want to, too..
Here is a piece of code to get you started with the GroupBoxes:
private void Form1_Resize(object sender, EventArgs e)
{
int dist = 3; // set to the distance between the GroupBoxes!
int width = (oneWideTextBox.Width - dist * 2) / 3;
groupBox1.Width = width ;
groupBox2.Left = groupBox1.Right + dist;
groupBox2.Width = groupBox1.Width;
groupBox3.Left = groupBox2.Right + dist;
groupBox3.Width = groupBox1.Width;
}
Of course I have made some assumptions about how you want it to work.. I hope you can take it from here! Feel free to ask!!

Related

Set MinimumSize according the controls residing inside form

Title of my question could be make it look like a duplicate but please read ahead as my problem is a bit different.
I am trying to replicate the minimum size functionality of some popular media players like MPC-HC or VLC where when you try to make it small the minimum size it achieves is when only MenuStrip and Player Controls are visible.
The code I've written to attain this is:
public NewMain()
{
InitializeComponent();
int ClientTop = RectangleToScreen(ClientRectangle).Top;
int height = menuStrip1.Height + panel1.Height + ClientTop - Top;
label4.Text = height.ToString();
MinimumSize = new Size(373, height);
}
The problem is that when it runs, its not working perfectly and the menuStrip1 is still getting blocked a little at bottom from the panel1 (Docked at bottom) where the player controls will be placed.
Below is the Image of what I was able to attain with above code.
Next Image is what I expected:
Note that label on left updates when resize the form and the label on the right is the determined height via code.
My Idea was to add the difference of Form's Top and the Top of total rectangle visible on the screen i.e. the height of the title bar otherwise the resulting height will be even smaller and hide the menuStrip1 completely. I don't want to hardcode any values because it'll make the interface less adaptable to the changes that I might be doing later on.
To correctly determine the minimum height in this case is to keep the calculations relative which can be attained by:
int height = Height - (panel1.Top - menuStrip1.Bottom);
All credit goes to Hans Passant who provided this code. I'm just posting it as an answer to mark my question solved. Thank you.

Image manipulations in Universal Windows app

I have an image element inside a grid along with other controls in it. I want to be able to zoom the image. I don't want to place it inside a scroll viewer as I don't know the dimensions of the image and as it is a Universal app, I am having a lot of Adpative UI and the ScrollViewer messes with whole thing. The Image is downloaded from the web. When the user swipes left or right the source of the image should change to previous or next image. I am saving the sources of the images in a LinkedList and updating the source accordingly.
I implemented the swipe to change image source using the following code
MediaControl.ManipulationMode = ManipulationModes.TranslateX | ManipulationModes.TranslateY;
MediaControl.ManipulationStarted += (s, e) => { X1 = (int)e.Position.X; Y1 = (int)e.Position.Y; };
MediaControl.ManipulationCompleted += (s, e) => {
X2 = (int)e.Position.X;
Y2 = (int)e.Position.Y;
if (Math.Abs(X1 - X2) >= 50 && Math.Abs(Y1 - Y2) < 20)
{
{
if (X1 > X2)
{
NextPostButton_Click(s, e);
}
else
{
PreviousPostButton_Click(s, e);
}
}
};
};
I want to have zoom functionality in my image at the same time when source is changed, the image should be zoomed out. I want both the zoom and swipe functionality without each affecting the other manipulation. How do I do this? I am a beginner and have no experience in very complex Pointer events. If anyone could help me with this or point me to a good source for learning about this I would be eternally grateful.
Thank you.
Use a FlipView with a ScrollViewer inside of it and an Image inside of that. Then you just bind your FlipView's ItemsSource to a collection of Uri's. This will keep zoom functionality and swipe functionality automatically. Each image will retain its zoom factor as you swipe through your images. This works very well on mobile and desktops/tablets.
Let me know if you need some sample code. I'm on a phone right now so it's a little difficult to do source.
You can register the ManipulationDelta event, and use ManipulationDelta.Scale Property to take care of the zoom.
MediaControl.ManipulationMode = ManipulationModes.Scale | ManipulationModes.TranslateX;
private void MediaControl_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
MediaControl.Height = e.Delta.Scale * MediaControl.ActualHeight;
MediaControl.Width = e.Delta.Scale * MediaControl.ActualWidth;
}
For more information on ManipulationDelta, see to
https://msdn.microsoft.com/en-us/library/system.windows.input.manipulationdelta.scale(v=vs.110).aspx
For more information on ManipulationModes, see to
https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.input.manipulationmodes

Trouble updating the margin property of buttons to animate them

I have a WP8 app where I display buttons on a wheel. When clicked, I want the wheel to turn and bring the clicked button on the top of it.
I'm placing the buttons with their margin property. I figured I'd use a double while loop to move the buttons along the circle degree by degree, like this (trying to simplify it as much as I can) :
private void Select(Button selectedButton)
{
Button[] SelectedButtons = { button1, button2, button3 };
//Calculates the distance between buttons in degrees
double buttonDistance = 360 / SelectedButtons.Length;
double angleDeg;
double angleRad;
int i = 0;
int j = 0;
//While the selected button hasn't reach top position, move the wheel
while (selectedButton.Margin != new Thickness(<top position of the wheel>)
{
//Moves the buttons of a single degree
while (i < SelectedButtons.Length)
{
//Calculates the position of the current button in the array in degrees and converts it in radians
angleDeg = j + 90 + i * buttonDistance;
angleRad = Math.PI * angleDeg / 180;
//Button positioning
SelectedButtons[i].Margin = new Thickness(<calculation of the margins with the given angles>);
i++;
}
System.Threading.Thread.Sleep(5);
j++;
i = 0;
}
}
However, and even with the Sleep() function, the buttons' positions only update once the loop is over, and don't animate like I want them too.
I tried to use UpdateLayout() in the loop, both on the ContentPanel and on the Buttons themselves, I tried InvalidateArrange() and InvalidateMeasure(), or even adding a canvas in, but nothing does it : the buttons only update when the whiles are over, never before.
Can you guys please help me on this ?
Quick update, for anyone who could stumble upon the same issue :
Indeed, as steveg89 said, you can't update UIElements right from the GUI thread. The link he gave suggests using a background worker, or delegates, to get it to work. Unfortunately, WP8 doesn't allow it either.
The only solution is switching to storyboard animations : http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj206955(v=vs.105).aspx
Not extremely easy for a absolute beginner, but it works fine when you take the time to understand how these work and their different types (simple animations, keyframe animations, or path animations (however path animations are not supported in Windows Phone. Lost quite a bit of time to it.))

Can I create transition effects in C#?

I have a form and couple of labels on it. I am creating a screensaver with the said form. So far, I have been able to have the text labels appear at different intervals.
Howveer, I want to take it notch further. I would like to have a text scroll in from the top or bottom in right or left direction. Can I do this directly with C#? How?
I would appreciate a helpful answer. Thanks.
You want your text to "fly" on the form? If yes, why just not changing the label position?
Havent seen something like it... But if you know what is Expression Blend, you can make your own element styles (color, form, size, ANIMATION). You can try to realize it there...
Create a timer with a low interval and just use:
//Move right:
label1.Location = new Point(label1.Location.X + 1, label1.Location.Y);
//Move left:
label1.Location = new Point(label1.Location.X - 1, label1.Location.Y);
Maybe something like this:
private void timer1_Tick(object sender, EventArgs e)
{
if (label1.Location.X <= Width)
label1.Location = new Point(label1.Location.X + 1, label1.Location.Y);
else
label1.Location = new Point(0, label1.Location.Y);
}
You and any one else wanting to do something like that can simple use the following framework:
WinForm Animation Library [.Net3.5+]
A simple library for animating controls/values in .Net WinForm (.Net
3.5 and later). Key frame (Path) based and fully customizable.
https://falahati.github.io/WinFormAnimation/
new Animator2D(
new Path2D(new Float2D(-100, -100), lbl_label.Location.ToFloat2D(), 500))
.Play(lbl_label, Animator2D.KnownProperties.Location);
This slides the lbl_label label from -100, -100 to the location it was in first place in 500 ms.

How do I move a control to the center of a screen at runtime in C#?

So, I have a control (it's a label) of varying size. I want to recenter it in the form each time it changes (horizontally centered, not vertically). How would I do that programmatically?
YourLabel.Left = (YourForm.Width / 2) - (YourLabel.Width / 2);
If you want this to be adjusted every time the form dimensions change, just utilize the Form.Resize event.
No code required: AutoSize = False, TextAlign = TopCenter. Make it as big as you'll allow it to get. Anchor to the right is optional.
Easiest Way to center any component. might be helpful for someone. Right click Project -> Add -> Class
Update that class with below code.
public static class MyClass
{
public static void center(this Control component)
{
float compWidth = component.Width;
float parentWidth = component.Parent.Width;
float middled = (parentWidth / 2) - (compWidth / 2);
component.Left = Convert.ToInt32(middled);
}
}
and then you can middle any component. you can use on any component like this
MyLabel.center();
MyPanel.center();
Ok, so I stand corrected - thanks guys.
Here is a workaround to do it without code using RAD (design time). Note I would go with #Shark's answer as I dont think this will achieve the result your after but here it is:
Drop a button in the form
Set its Text as the text in the label
Size button to fit the text
In the buttons properties "FlatStlye =Flat"
In the buttons properties, expand Flat Appearance and set Border Size= 0
Now set the Anchor to Left and Right

Categories