Custom Listbox design - c#

I have a list of dates that I want to present. Initially I thought of using datepicker but it doesn't have max days or max months (Unbelievable) and this is a requirement for me.
Hence I thought of generating my own dates and presenting it to the user.
Below is how I want to display it
I am currently using listbox. I tried combobox, grid view but I am facing the same problem in all of them
Problem
When the date is under the two blue lines I want to set it as selected. The only way I can think of is using code by getting position of the line and then get position of each item in listbox to determine which is falling in the range.
Is there a xaml way to do this?
Any other logic besides determining position? I find this logic extremely crude. A good one would be having a collision box or something which is represented by those lines and when an item hits it, it gets selected
Thanks in advance

So after mucking around for like 3 days I found following solution to be useful
First find the midpoint that is located between the two line. (Find horizontal midpoint, then find vertical midpoint). I found the midpoint using the following code
private void DetermineSelectionLineBoundaries()
{
if (SelectionBoundaryUpper == null || HorizontalScrollPanel == null)
{
return;
}
var transform = SelectionBoundaryUpper.TransformToVisual(Window.Current.Content);
_upperStart = transform.TransformPoint(new Point(0, 0));
_upperEnd = new Point(_upperStart.X + 100, _upperStart.Y);
var lowertransform = SelectionBoundaryLower.TransformToVisual(Window.Current.Content);
_lowerStart = lowertransform.TransformPoint(new Point(0, 0));
var midPointHorizontal = CalculateMidpoint(_upperStart, _upperEnd);
var midPointVertical = CalculateMidpoint(_lowerStart, _upperStart);
_midPoint = new Point(midPointHorizontal.X, midPointVertical.Y);
}
Once you have that, on every scroll call
VisualTreeHelper.FindElementsInHostCoordinates(_midPoint, Window.Current.Content).ToList();
This function will give you all the elements at the point. To be honest I dont just get that element I basically get everything on page that falls vertically on same place as the point. Maybe I am doing something wrong. But the good news is I get only one listbox item. So easy to loop through.
Once that is done, just turn on the IsSelected flag.
Hope this helps someone
I could not find any xaml way to do this.

Related

Unity 2D Setting the value of a Scrollbar to 0

I just wanted to set the value of the scrollbar of my scrollview object to 0 every time a new text object is created. This way the newest object would always remain at the bottom without needing to scroll down (think of the chat of a video game for example). My problem is that for some reason the program is setting the value to 0 and then creating the text object, so it keeps the 2nd newest object at the bottom of the scrollview.
My code:
//Creates the Text objects
private GameObject GenerateTextObject(string content)
{
//Creates the Text objects
GameObject messagePrefab = Instantiate(MessagePrefab);
Text textComponent = messagePrefab.GetComponent<Text>();
//Sets the content of the text and parent
textComponent.text = content;
messagePrefab.transform.SetParent(ContentPanel.transform, false);
ScrollbarVertical.value = 0;
return messagePrefab;
}
In the code I am setting the value at the end of the function, but still sets the value of the scrollbar to 0 (properly moving the scrollview to the bottom) before the object is created.
https://gyazo.com/897982521f13d7792ec26540490a40c0
In the Gyazo picture you can see how it doesn't scroll all the way down.
I have tried using a coroutine and waitForEndFrame aswell as waitforseconds(1), but none seem to work.
Edit: when loading up Unity and sending new messages to the scrollview, I see the scrollbar go all the way down and then really quickly move up just a bit hiding the new text object.
What you can do is create a new Scroll View and follow these steps:
The result is from calling GenerateTextObject(Time.time.ToString()); every second.
private GameObject GenerateTextObject(string content)
{
//Creates the Text objects
GameObject messagePrefab = Instantiate(MessagePrefab);
Text textComponent = messagePrefab.GetComponent<Text>();
//Sets the content of the text and parent
textComponent.text = content;
messagePrefab.transform.SetParent(ContentPanel.transform, false);
//Force reset to the bottom on each message
//ScrollbarVertical.value = 0;
return messagePrefab;
}
I have not come up with a proper fix for this problem (I honestly do not know the cause of problem), but I have put together a little work-around for this situation.
To do this I simply created a small function:
public void Testing()
{
if (testing == true)
{
ScrollbarVertical.value = 0;
testing = false;
}
}
This would be attached to the built-in functionality of scrollbars "On Value Changed (Single)". In order to allow this to work, I just change the bool "testing" to true after creating a text object on GenerateTextObject(string content).
This fix is really ugly, and probably would cause more problems in the near future, but for now, it is a quick and dirty solution for this problem.
Sorry to necro this, but I had a similar problem and googling couldn't find a good answer. So I'm posting the solution that I found.
I tried to change the scrollbar value to 1 or 0, depending on the direction, so that everytime I open a UI panel, it'll start at the top. But no matter what I did, nothing seemed to work.
So my solution is to change the Y position of the content instead of the scrollbar value.
My scrollbar direction is set at bottom to top. Then I take the sizeDelta of the content, divide it by 2, (since I need the value of 1 for the scrollbar.value). I then multiplied it by -1 (if I dont, it'll start at the bottom). Then I set that value as the Y position of the content.
So far it works like a charm everytime I open my UI panel.
Hope this helps anyone looking for a solution.

Visual C# creating list of items

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!

Winforms Linechart - Remove padding

I am currently working on some software and need to generate a Line graph. I've managed to get a linegraph setup just the way I like it, but I cannot seem to find anywhere on how to remove the padding on the left and right of the inner graph. Below is a picture of my graph to help explain what it is I am asking:
As you can see, the first point starts on the second line. What I want to happen is the blue parts of the graph touch both ends (left and right) of the entire chart area. Here is how I plotted my points in C# code:
chart2.Series[0].Points.Clear();
int i = 0;
foreach (var rank in sim.Elements.OrderBy(x => x.Key))
{
chart2.Series[0].Points.AddY((double)rank.Value.TotalPersonel);
chart2.Series[0].Points[i].AxisLabel = Rank.EnlistedRanks[rank.Key];
chart2.Series[0].Points[i].LegendText = Rank.EnlistedRanks[rank.Key];
chart2.Series[0].Points[i].Label = rank.Value.TotalPersonel.ToString();
i++;
}
As you can see in the code snippet, I am clearing any and all points, and starting at an index of 0. I don't understand why the graph starts on the second plot. Does anyone know how to do this? Any help will be much appreciated.
In the chart properties look for ChartAreas collection, select the first and the only item, Axis property's collection, X axis IsMarginVisible = false.

Rich Text Box/Flow Document > Formatting (list order, line spacing & bullet points)

I have a RichTextBox in a WPF application that serves as an output container for status updates. Each line added is colored based on it's informational level (warning-yellow, info-gray and so on).
Paragraph currentStatus = new Paragraph(new Run("ERROR: Couldn't find stuffs."));
currentStatus.Foreground = System.Windows.Media.Brushes.Red;
List myList = new List();
myList.ListItems.Add(new ListItem(currentStatus));
rtbStatus.Document.Blocks.Add(myList); // existing rich textbox
Though it is technically working, after hours of digging I still have a few formatting problems I can't seem to over-come or research out:
I want the list to be inverted, with the most recent 'post' at the top. I have been able to achieve this a couple of different ways, but each at a cost of losing the previous color formatting to the default foreground color of the control (the app has a visual buffer of about 10 lines when spacing is ideal that needs to retain the color applied).
I want the line spacing to be normal, w/o padding between lines. There is enough room for almost 2 more lines between each 'post' when using a list and I am looking for something resembling a textblock's multi-line spacing (see screen linkage below).
I'd love to get rid of the bullet points if a list is the way to go.
A couple notes: This all has to be done on the back-end, and I would like to look at a smooth auto-scrolling animation as a future feature release, though I haven't researched it yet (off-thread topic).
Now, everything I am reading leads me to believe a richTextBox>flowDocument>list is my best solution as I couldn't figure out how leverage the AppendText() method with a line break (environment.NewLine works, but has an even greater amount of padding between lines) nor work out the color dynamics when using other controls, but I am a novice in the C# world.
Please tell me if I am doing this the hard way first and foremost. But if anyone has ideas on how to achieve the above it'd be greatly appreciated.
Image of the above syntax:
Image of the desired spacing results using textblock:
Thanks in advance.
I found some properties that allowed me to accomplish this, so I removed the list and after some tweaking came up with the below:
// Status Update
public void UpdateStatus(string eventLevel, string message)
{
Paragraph currentStatus = new Paragraph(new Run(message));
if (eventLevel == "info")
currentStatus.Foreground = System.Windows.Media.Brushes.Gray;
if (eventLevel == "warning")
currentStatus.Foreground = System.Windows.Media.Brushes.Yellow;
if (eventLevel == "error")
currentStatus.Foreground = System.Windows.Media.Brushes.Red;
if (eventLevel == "highlight")
currentStatus.Foreground = System.Windows.Media.Brushes.CornflowerBlue;
currentStatus.LineHeight = 1;
rtbStatus.Document.Blocks.InsertBefore(rtbStatus.Document.Blocks.FirstBlock, currentStatus);
}
and can now append colored lines to the 'top' with a minimal line space:
UpdateStatus("error", "My custom error message");

VISIBLOX, WPF: Getting chart points to scroll horizontally?

I'm using the Visiblox WPF API and am having trouble getting the chart points in my line chart to scroll horizontally. Instead of scrolling, the points are get squashed together, in which, this isn't particularly a problem, except that I expect to have 100s of data points on the chart. I have looked throughout the examples available on the Visiblox website, but couldn't find what I was looking for. Ive attached an example screenshot.
Any ideas?
Thanks for your help,
Sparky
By default Visiblox Charts will re-calculate the range to include all the data in the series, so there are two possible approaches: 1) when you add the last point, remove the first one which will effectively move the visible window one point over or 2) set an explicit axis range and update that when you want to move the visible window.
Check out the Visiblox blog for more details on how ranges work at: http://www.visiblox.com/blog/2011/03/visiblox-charts-ranges-demystified
I just had something like this recently. Everytime I'd add a point to the cart I'd run a little section of code that would check the amount of time (my x-axis dimension) that had passed since 0. I also set up a range of data I always wanted to see. I always wanted to show 120 seconds of data on the graph. So I had something like this:
private void adjustXasis(int timeCount)
{
if(timeCount>desiredRange)
{
chart.axis.Xaxis.minimum=timeCount-desiredRange;
chart.axis.Xaxis.maximum=timeCount;
}
else //two minutes not reached yet
{
chart.axis.Xaxis.minimum=0;
chart.axis.Xaxis.maximum=desiredRange;
}
}
I don't have VS in front of me and I know that syntax for the axis min/max is wrong but you get the idea.
By default Visiblox Charts will re-calculate the range to include all the data in the series, so there are two possible approaches:
1) when you add the last point, remove the first one which will effectively move the visible window one point over or
2) set an explicit axis range and update that when you want to move the visible window.
Check out the Visiblox blog for more details on how ranges work at: http://www.visiblox.com/blog/2011/03/visiblox-charts-ranges-demystified

Categories

Resources