How to calculate Height of any control which is loaded in DataTemplate? - height

I want to get the height of the control which is loaded in DataTemplate when the width is set to 100. I have used the below code, but always returns the size 0,20. Any suggestion on this?
<DataTemplate x:Name="dataTemplate">
<Grid>
<TextBlock Text="{Binding Path=Name}" TextWrapping="Wrap"/>
</Grid>
</DataTemplate>
var record = new UserInfo() { Name = "ASKL ALASO DKADOLD ADKIKAM AMDKI ADKAI AKDKI" };
var contentControl = new ContentControl();
contentControl.Measure(new Size());
contentControl.Content = record;
contentControl.ContentTemplate = App.Current.Resources["dataTemplate"] as DataTemplate;
contentControl.Measure(new Size(100, Double.PositiveInfinity));
var size = contentControl.DesiredSize;

I have used the below code, but always returns the size 0,20. Any suggestion on this?
This is because you didn't render your ContentControl on the layout, you can render it for example like this:
var record = new UserInfo() { Name = "ASKL ALASO DKADOLD ADKIKAM AMDKI ADKAI AKDKI" };
var contentControl = new ContentControl();
stackPanel.Children.Add(contentControl); //Add this ContentControl to the childeren collection of a StackPanel to show it
//contentControl.Measure(new Size());
contentControl.Content = record;
contentControl.ContentTemplate = App.Current.Resources["dataTemplate"] as DataTemplate;
contentControl.Measure(new Size(100, Double.PositiveInfinity));
var size = contentControl.DesiredSize;
Then now, you can get the size of your ContentControl, by my side it is 94,100.
I'm not sure this size is the one you actually want, from your title, you want to calculate Height of any control which is loaded in DataTemplate, but this size is the size of ContentControl, I think what you need is the height of the Grid, or TextBlock inside of this ContentControl. To get this two control, you can code like this after the ContentControl is fully rendered:
var grid = contentControl.ContentTemplateRoot as Grid;
var textblock = grid.Children.FirstOrDefault() as TextBlock;
And be aware that the DesiredSize is not the rendered size of the control, you can refer to the Remarks part of UIElement.DesiredSize property.

Related

Draw a moving vertical line representing the current date in amcharts gantt chart?

I am using amCharts4 and is able to plot a vertical line on my Gantt chart representing the current date time as described in the following : Draw a vertical line representing the current date in amcharts gantt chart?. However, how do I make the vertical line move every sec on the chart based on the current time? Here is the code :
var range = dateAxis.axisRanges.create();
range.date = new Date("2020-10-29 07:04:56");
range.grid.stroke = am4core.color("red");
range.grid.strokeWidth = 2;
range.grid.strokeOpacity = 1;
You can add a setInterval that runs every second to update the date on your range, like this:
// First, create your range marker
var range = dateAxis.axisRanges.create();
range.grid.stroke = am4core.color("red");
range.grid.strokeWidth = 2;
range.grid.strokeOpacity = 1;
range.date = new Date();
// Then, update the position of your range marker every second
range.date = new Date(2018, 0, 1, 8, 0, 0, 0);
var timeout = window.setInterval(() => {
range.date = new Date(range.date.getTime() + 1000);
}, 1000);
chart.events.on('beforedisposed', () => {
clearTimeout(timeout);
});
Here is an example
UPDATE
One thing you want to do with the timeout is to also clear it when you no longer need it--- for example, when you dispose the chart or the marker.
I have updated the code above to clear it before the chart is disposed.

Set the font size and color of an AmChart4 XYCursor's X and Y label

I've looked here:
https://www.amcharts.com/docs/v4/reference/xycursor/
and tried this
chart.cursor.fontSize = "14";
chart.cursor.fill = am4core.color("#ff0000");
chart.cursor.fontFamily = "verdana";
To style the (default white on black) element when the xycursor touches the X/Y axis (don't know what the correct name for this element is, hope you know which one I mean)
I would like to set the font size and family. Tried to set the color to red to see if it has to be set via the fill property, but also that doesn't work.
Created the cursor like this:
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = axis;
You have to set the tooltip properties inside the axis objects directly, as mentioned in the documentation. For example, to change the font, size and color in the category axis tooltip, modify the tooltip's label object:
categoryAxis.tooltip.getFillFromObject = false;
categoryAxis.tooltip.label.fill = "#ff0000"
categoryAxis.tooltip.label.fontFamily = "Courier New"
categoryAxis.tooltip.label.fontSize = 15;
Demo

Change bar color depending on value

I'm using chart-js/ng2-charts for an angular 2 app.
I can display a bar graph, but at the moment, all the bars are the same color. I'd like to have a different color depending on the value.
Can that be done?
After you create your chart, you can use the following function to loop through the dataset and change the color depending on the data value.
In this example, if the value is above a 50, the color changes to red.
var colorChangeValue = 50; //set this to whatever is the deciding color change value
var dataset = myChart.data.datasets[0];
for (var i = 0; i < dataset.data.length; i++) {
if (dataset.data[i] > colorChangeValue) {
dataset.backgroundColor[i] = chartColors.red;
}
}
myChart.update();
JSFiddle Demo: https://jsfiddle.net/6d0jsyxu/1/

Changing image on click Raphael paper

I have a program where the user can add images to a paper, using Raphael. Now I want to be able to change an image to another image when clicked. Is this possible? Do I have to add an ID to the images? If so, how?
var imgURL = "img/img.png";
var bankNoteImg = new Image();
bankNoteImg.src = imgURL;
var width = bankNoteImg.width;
var height = bankNoteImg.height;
var image = paper.image(imgURL, X, Y, width, height);
Use the click and attr function of Raphael api.
Element.click will take a function as a parameter. Use this to access the image element inside the function.
I created a simple demo
var paper = Raphael(document.getElementById("papercanvas"), 200, 200);
var img = paper.image(URL1, 100, 100, 100 , 100);
function changeImageSource() {
this.attr('src', URL2);
}
img.click(changeImageSource);

Making charts in RaphaelJS that are 100% width?

I have seen graphs in Flash & stuff that basically adapt nicely to whatever the size of the browser or flexible element they are inside of.... I'm not really too well versed with raphaelJS but can you do this, and if so, how?
In raphaeljs, you can call .setSize on a Raphael object to update its size. To adapt to runtime changes in browser window size, you can respond to a window resize event. Using jQuery, you could do:
// initialize Raphael object
var w = $(window).width(),
h = $(window).height();
var paper = Raphael($("#my_element").get(0), w,h);
$(window).resize(function(){
w = $(window).width();
h = $(window).height();
paper.setSize(w,h);
redraw_element(); // code to handle re-drawing, if necessary
});
This will get you a responsive SVG
var w = 500, h=500;
var paper = Raphael(w,h);
paper.setViewBox(0,0,w,h,true);
paper.setSize('100%', '100%');
Normally you could set the width to %100 and define a viewBox within SVG. But, Raphael JS manually set a width and height directly on your SVG elements, which kills this technique.
Bosh's answer is great, but it was distorting the aspect ratio for me. Had to tweak a few things to get it working correctly. Also, included some logic to maintain a maximum size.
// Variables
var width;
var height;
var maxWidth = 940;
var maxHeight = 600;
var widthPer;
function setSize() {
// Setup width
width = window.innerWidth;
if (width > maxWidth) width = maxWidth;
// Setup height
widthPer = width / maxWidth;
height = widthPer * maxHeight;
}
var paper = Raphael(document.getElementById("infographic"), 940, 600);
paper.setViewBox(0, 0, 940, 600, true);
window.onresize = function(event) {
setSize();
paper.setSize(width,height);
redraw_element();
}