Controlling XAML grid structire using VisualStateManager - xaml

I am writing a WinRT app and need to change its layout in a snapped view. In a regular view details are displayed in grid of a following structure:
MainGrid: contains 2 rows, 2 columns (let's call them M11, M12, M21, M22)
DetailGrid: occupies rightmost column and upper row of MainGrid, contains 1 row, 2 columns of equal, so the layout looks like this:
M12 contains D1 and D2 layered horizontally
In a snapped view I want DetailGrid to be redefined so it has a single column and 2 rows:
M12 contains D1 and D2 layered vertically
If I didn't care about column width, I could use StackPanel instead of Grid to display details and simply change StackPanel orientation in a snapped mode from Horizontal to Vertical. But D1 and D2 must use all available space in a standard mode and have equal size, therefore I control them via Grid ColumnDefinition. But grid definition is not something that is easily controlled using VisualStateManager.
What do you think would be the best way to manage such layout?
Thanks in advance

Grid definitions are hard to control but I've found changing Grid.RowSpan or Grid.RowColumn span on the controls within the grid should be able to do what you need in snap view

Related

Colors[4] not showing color selection on Front Panel

I am trying to set the color of an indicator to different colors based on different values, like 1 = red, 2 = blue etc. Using guidance from a Youtube video (accessible using this link: https://www.youtube.com/watch?v=czUmPQmKmGU), I have created a Colors[4] control for the indicator I have after changing it to the "write" function.
The Problem on the front panel is that I am getting a control with numbers instead of a color box where I can select the colors to show based on the value. This was the control I got instead.
This is the control I am trying to achieve (below):
Is there any way that I can get the color box on my control instead of the number controls? I am not sure if it can be changed through a control on the front panel or something but what I have tried so far keeps leading me back to this problem.
Any advice is much appreciated
A color box control is just a U32 number (three bytes for RGB and one which is always 0), which is why that's what you get.
There is a right click plugin which adds a replace with color box option directly to the right click menu of unsigned 32 bit numbers, but I don't remember if it ships with LV or not.
If you don't have that, you can always just right click the indicator inside the cluster, select replace and navigate the palettes to find the color box. You can also copy a color box and then select the indicator and paste, which replaces the selected control.
The color[4] is actually an array of 4 colors (UInt32 as Yair said), that define 2 color gradients, one for the 'Off' state, and the other for the 'On' State of the control.
If you want to set the control's color, you will have to define all 4 of them.

How to dock panels to fill the entire form

I'm using vb.net 2017. I want to put some panels and dock them in order to create a configuration like in the attached image:
So these panels must be docked and occupies the entire form.
I've tried several docking mode , also I used the Send to back / Bring to to front but I can't do like I want.
How can I do it?
This is what I do, add a TableLayoutPanel to the form and set Dock to Fill.
Then I would add some rows and columns to it so I could combine them to produce the results. Based on what I see it looks like you should end up with 5 columns of 20% and 4 rows of 25%.
Then drag a Panel to the top left cell of the TableLayoutPanel.
Set its:
.Column = 0
.ColumnSpan = 2
.Row = 0
.RowSpan = 3
.Dock = Fill
Follow this procedure and add two more panels. One will start at row 0, column 2 and the other at row 3 column 0.
You might need to play around with the numbers to achieve the desired results. When you get what you want you can set the margins of all of the panels to 0.
I use background colors on all the panels so I can see what it looks like while setting this up.

Match two trellis pages between two different graphs

I want to have on the same page a pie chart and a bar chart, with trellis pages.
They both have 5 columns as trellis, so 5 different pages that you can visualize by scrolling down.
However, I would like to display the same pages at the same time for both graphs. For instance, let's imagine I'm on the pie chart, I scroll down one page - and so my pie chart is on page2 - I want my bar chart to automatically go to page 2 as well
I tried to use markings but although it links a bit the two graphs, it doesn't change the trellis pages automatically
Does anyone know how to do this ?
as #scsimon mentions, there's no native feature (nor API method, AFAIK) for this using a trellis. however, you can create a Property Control (I'd use a dropdown) in a Text Area, then use the same Document Property to your chart in a Limit By expression.
little more detail, assuming a data table like this:
A B CATEGORY
1 2 red
3 4 red
5 6 green
7 8 green
9 10 blue
11 12 blue
add a Text Area to the page and edit its contents
add a Property Control
click New to create a Document Property, give it a type String and a name category
change Set property value through to Unique values in column and choose the "category" column and click OK
save the Text Area contents
in your Pie Chart's Properties dialog, go to the Data page and look for Limit data using expression. click Edit
set the expression to: [CATEGORY] = "${category}" (don't forget the quotes or the Document Property won't be treated as a string and you'll get an error)
repeat steps 6 & 7 for your other chart
As #scsimon mentioned in the comments, it seems to be impossible. I found a way to have a similar representation though without using trellis visualization, by using text arena
I created a list box that contains the 5 columns I want to visualize, and then I select this list box as the vertical axis variable of the bar chart and the sector size of the pie chart
Then, by clicking on my list box, I can have a synchronized Pie chart and Bar chart (a bit different from what I expected but it also has some advantages like a multiple scale since a new graph is generated independently of the other variables)

summary row for a grid in dojo

I Am looking for a Summary row or a Footer row for a grid where i can display total value of all column ,This footer row should not get scrolled(Virtically) .
Please Correct me if i am wrong .A Summary row for a Grid is not available in Dojo as a Default widget.
I Have achieved the above Summary row feature for Grid By
1) Adding a second grid only with Header Just below the Grid where you want footer row ,as a whole its look like a footer row to a Grid
Problems faced are
1) Column resizing i.e., when you resize any column in Grid 1 the same column in Grid 2(Grid with only Header ) must be resized
The above problem can be solved be capturing a resizing event in Grid 1 and propagating the event to Grid 2.
2) When you resize the column we will get Horizontal scroll Bar For both the Grids
Is there a way to propagate Horizontal scroll event from Grid 1 to Grid 2 so that when u scroll the Grid 1 then simultaneously Grid 2 has to get scrolled or how to get only one scroll for two Grids
Is there any other way to achive above feature for a grid .
I have achieved this by "stacking" the grids together. A primary data and footer grid. Use CSS to hide the heading of the footer grid. You have to use javascript to update the sums for the footer grid.
See demo and detailed reference
DoJo EnhancedGrid has a summary property that can be set, as described in the api documentation

is it possible to anchor a control to another control?

Is it possible to anchor a control to another control?
Lets say i want my Button1 to keep its 4px distance from Textbox1 control without
using FlowLayoutTable control?
"Why would be this advantageous?" - one could ask
Well let's say you have a SplitContainer with a vertical splitter and you have Textboxes
in SplitContainer.Panel1 which are anchored to the left and right but their maximum size's
width is smaller than you allow to the SplitContainer.Panel1's width to have (maybe
because you want text to show up there or because additional padding or whatever,you name it)
Now let's say you also have a button next to Textbox1 and you dont want Textbox1 to be
overlapped by the Button1 because its extends to far.
If i want to have my textbox fill the SplitContainer.Panel1 in a fashion that it leaves space for
Button1 control while still both of them are anchored to the right how would i do it?
I extensively use TableLayoutPanels and FlowLayoutPanels to accomplish this. For you specific circumstance I would use a TableLayoutPanel with three columns and a row for each TextBox.
Column 1: Auto-width, contains Labels all with AutoSize = True.
Column 2: 100% width, contains TextBoxes all with Anchor = Left, Right.
Column 3: Auto-width, contains the Button in the appropriate row.
Next, I set all text boxes, except for the one next to the button, ColumnSpan = 2. Then just put the TableLayoutPanel in the SplitPanel and set Dock = Fill.
it will be a sequence in live which should be flow out from left and keep working lets the right side should be layout.
List item safty cares should be provided.
List item all things that use in this method should be provided and be check;