Skiasharp Canvas does not appear in Xamarin forms - xamarin

I am following this example here .
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/graphics/skiasharp/curves/arcs
More specifically the Exploded pie chart with example code here :
https://github.com/xamarin/xamarin-forms-samples/blob/master/SkiaSharpForms/Demos/Demos/SkiaSharpFormsDemos/Curves/ExplodedPieChartPage.cs
My issue is here :
SKCanvasView canvasView = new SKCanvasView();
canvasView.PaintSurface += OnCanvasViewPaintSurface;
Content = canvasView;
It works fine and it display the circle but I do not want the canvasView to be the entire content of a page .
I tried to add this line in my xaml but when I use it it does not display the circle .
<skia:SKCanvasView x:Name="canvasView " PaintSurface="OnCanvasViewPaintSurface"/>
it looks like it only works if i defined SKCanvasView in my C# code and assigned it to a page content .but my design have more objects inside the view other than the drawings (buttons and labels).
I also tried this and it did not work .
stacklayout.Children.Add(canvasView);

Related

horizontal bars with vaadein 8

i very new with Vaadin.
i have a chart with bars veritcally.
i want to geht horizontal bars
i have read here:
https://vaadin.com/docs/v8/charts/java-api/charts-charttypes.html
thats a part of my source (no errors):
Chart chart = new Chart(ChartType.BAR);
Configuration configuration = junkPerMachineChart.getConfiguration();
configuration.getChart().setType(ChartType.BAR);
configuration.addSeries(series);
junkPerMachineChart.setCaption("Stündlicher Verbrauch Mischer");
getUI().access(() -> junkPerMachineChart.drawChart());
i searched inside my junkPerMachineChart for a method like
.setType(ChartType.Vertical);
there is no option like this.
i also searched inside the configuration and found no method like this:
i changed ChartType to COLUMN and the bars are now horizontal
Configuration conf = junkPerMachineChart.getConfiguration();
conf.getChart().setType(ChartType.COLUMN);

Vaadin 8 grid: Size image in grid cell?

I try to render an image in a grid cell as follows:
grid.addColumn(probe ->
new ThemeResource("img/" + probe.getStructureData().getImageFileName()),
new ImageRenderer()
).setCaption("Structure");
I want to set the size of the image in pixel. How can I do this? It seems the ImageRenderer has no method for this.
Of cause I could size my images before. But I would like to add a big image that should be shown as tooltip and a small version of the same image should be shown in the grid cell. I would like to avoid adding the same image in 2 sizes.
Thank you!
Try doing it this way.
grid.addComponentColumn(probe -> {
Image image = new Image("", new ThemeResource("img/" + probe.getStructureData().getImageFileName()));
image.setWidth(100, Sizeable.Unit.PIXELS);
image.setHeight(100, Sizeable.Unit.PIXELS);
return image;
}).setCaption("Structure");

Webix window - autoadjust

I am new to webix and have a problem with ui.window!
For me the window never adjusts to the parent HTML element. :(
I want the window to have the same width and height as the parent (100%).
What am I dowing wrong?
See code in Webix Snippets: http://webix.com/snippet/c5fe5e96
According to the documentation:
"Window Sizing and Positioning
The must-have parameters for the window are width and height. If you don't set [them], the window [...] will occupy the whole screen."
http://docs.webix.com/desktop__window.html
"adjust - adjusts the component to the size of the parent html container"
http://docs.webix.com/api__link__ui.popup_adjust.html
Window and Popup widgets are working for the whole app, they are not using container and can't use .adjust as well.
You can size the Window to the document by using fullscreen option
var popup = webix.ui({
view: "window",
fullscreen:true,
http://webix.com/snippet/93a5e3ba
or by using the complex position property
var popup = webix.ui({
view: "window",
position:function(state){
state.left = state.top = 10;
state.width = state.maxWidth - 20;
state.height = state.maxHeight-20;
},
http://webix.com/snippet/164a3955
I have managed to make the window inherit the size of the HTML container by getting the HTML container size by using getNode() and then using setPosition, config.width, config.height and resize().
See example below.
http://webix.com/snippet/056b9610

How do I center a textbox inside a panel in visual studio?

When I set the textbox's anchor to top,bottom,left,right the textbox still stays on the top. I don't understand, this seems to work for labels and buttons. I kinda need this anchor property for it to adapt well to a form resize.
I'm sorry if I'm missing something incredibly obvious.
If I understand your question, you want a single line textbox to appear centered vertically and horizontally in your form. Still without showing more than one line. In this case you could set just the Anchor Left and Right property to have you textbox centered horizontally on the form, but for the vertical position you need to work with code adjusting the Iop property of the textbox in the Resize event of the form
For example, after the call to InitializeCompoment of your form you could add the following code to center your textbox (C# but easily convertible to VB.NET)
textBox1.Left = 10;
textBox1.Width = yourForm.ClientSize.Width - 20;
textBox1.Top = (yourForm.ClientSize.Height / 2) - yourForm.Height / 2;
textBox1.Anchor = AnchorStyles.Left | AnchorStyles.Right;
and then add the event handler for the resize event of your form where you could call again the vertical repositioning of the textbox
protected void yourForm_Resize(object sender, EventArgs e)
{
textBox1.Top = (this.ClientSize.Height / 2) - textBox1.Height / 2;
}

HTML5 canvas saving

I have an html5 canvas and one image object to save this canvas contents
(all drawings: images,draws,..).
i want to play with the order (zindex) of these 2 objects from 1 button as below:
when i want to draw, i call the canvas to the top .
when i want to save i call image to the top(full with datURL). (and rightclick to save as PNG)
These switching operations must be repetitive and reliable.
I used this code (in a function called by the button onclick) but it fails in the second time (canvas have new contents)!
var canvas = document.getElementById('ycanvas1');
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
// set canvasImg image src to dataURL - it can be saved as an image
document.getElementById('canvasImg').src = dataURL;
NB: i use IE olecontrol embed on a form (working on local) .Is there any security restrictions ?
I guess in the first case:
canvas.style.display="none" // hide the canvas
img.style.display="" //show the image
in the second case:
canvas.style.display="" //show the canvas
img.style.display="none" //hide the image

Resources