Force rendering of a WPF control in memory - wpf

I have the following code:
void Test()
{
currentImage.Source = GetBitmap();
RenderTargetBitmap rtb = new RenderTargetBitmap(100, 100, 96.0, 96.0, PixelFormats.Default);
rtb.Render(currentImage);
}
This code is supposed to render currentImage, which is an Image control in my xaml to a RenderTargetBitmap.
It doesn't work, rtb returns a blank image, the problem is currentImage didn't render itself yet and so this behavior is expected, I think...
To workaround this problem, I wrote this code:
void Test()
{
currentImage.Source = GetBitmap();
this.Dispatcher.BeginInvoke((Action)delegate()
{
RenderTargetBitmap rtb = new RenderTargetBitmap(100, 100, 96.0, 96.0, PixelFormats.Default);
rtb.Render(currentImage);
}, System.Windows.Threading.DispatcherPriority.Render, null);
}
Basically, I wait for currentImage to be rendered and then I can get it properly rendered to my RenderTargetBitmap.
Is there any way to make it work without using this workaround? Force the Image control to render in memory maybe?
thanks!

use a ViewBox to render in memory
Grid grid = new System.Windows.Controls.Grid() { Background = Brushes.Blue, Width = 200, Height = 200 };
Viewbox viewbox = new Viewbox();
viewbox.Child = grid; //control to render
viewbox.Measure(new System.Windows.Size(200, 200));
viewbox.Arrange(new Rect(0, 0, 200, 200));
viewbox.UpdateLayout();
RenderTargetBitmap render = new RenderTargetBitmap(200, 200, 150, 150, PixelFormats.Pbgra32);
render.Render(viewbox);

I think this is a BETTER answer . The viewbox didn't work completely as expected, and it turned out to be an unnecessary overhead.
Here is a copy of that answer (instead of just link)
You need to force a render of the item, or wait for the item to be rendered. You can then use the ActualHeight and ActualWidth properties.
To force a render:
MenuItem item = new MenuItem();
item.Header = "bling";
item.Icon = someIcon;
//Force render
item.Measure(new Size(Double.PositiveInfinity, Double.PositiveInfinity));
item.Arrange(new Rect(item.DesiredSize));
In this example the MenuItem has not been given an explicit height or width. However, forcing the render will render it taking the supplied header text and icon into consideration.

Related

UINavigationBar Custom Title View not centered on iOS11

I just updated to Xcode 9 and run to an iOS11 simulator. My custom view for the navaagation bar title is shifted down.
This code was working before i updated; it was vertically centered before
companyCountryView = CompanyNameView(frame: CGRect(x: 0, y: 0, width: Utils.getScreenWidth() - 150, height: 35))
companyCountryView.companyLbl.text = ""
companyCountryView.countryLbl.text = ""
self.navigationItem.titleView = companyCountryView
Even though I change values for y and height, no effect at all.
It seems the width value i used does not do any effect too.
I have solved it! You need to override the intrinsicContentSize in your custom view class and put the size of the view there:
class CustomView: UIView {
override var intrinsicContentSize: CGSize {
return CGSize(width: Utils.getScreenWidth() - 150.0, height: 35.0)
}
}

Isotope grid layout fails on window resize

I'm having problems with isotope in my site. I thought I tackled them all but now there is still a problem when resizing the window. On resize of the window the whole grid is moved way down on the page. This is not fixed by re-doing the layout when the window size changes. Triggering a .isotope('layout') always moves the whole grid to the bottom of the page. My code also implements infinite scroll, that is why I have the part on the hiddenelem's children. I'm also using bootstrap btw.
The (important) part of the code:
if (typeof g_Isotopegrid === 'undefined') {
g_Isotopegrid = $('.grid').isotope({
itemSelector: '.grid-item',
stamp: '.stamp',
masonry: {
columnWidth: 255,
gutter: 30
}
});
}
// Append all the hidden items to the visible items element
hiddenElm.children().each(function () {
var aItem = $(this);
// Append the items to the visible div
aItem.appendTo(visibleElm).imagesLoaded(function() {
g_Isotopegrid.isotope('appended', aItem);
});
});
Any help is appreciated!
In Bootstrap I never set static width:
masonry: {
columnWidth: 255,
gutter: 30
}
just item's class:
masonry: {
columnWidth: '.grid-item',
gutter: 30
}
When you are using Bootstrap is better for item width use bootstrap's classes.
The problem was that we were not using the direct container of the grid items as the element to apply isotope to.

Set Extjs Panel's Height (Layout) After It's Child items taken their height

How can we recalculate the Extjs-4 Panel's Height After it's Child items like Grid (Which have auto height) takes their height.
Use autoHeight with Panel and GridPanel. Then catch the resize event of GridPanel to force Panel to layout :
var grid = new Ext.grid.GridPanel({
listeners: {
'resize': function () {
var panel = Ext.getCmp('panel');
panel.doLayout();
}
}
}),

extjs panel resize while window resizes

I have a panel with a "form" layout, containing several buttons. now I want to enable this panel resize according to window resizing. How can I get this done?
thanks.
Ext.EventManager.onWindowResize(function(w, h){
panel.doComponentLayout();
});
Assuming you have a Panel named 'panel' with some automatic sizing built in (e.g. height: "100%"). Otherwise, the new width and height of the window are passed into the anonymous function passed to onWindowResize().
As wrote #deniztt you should subscribe to EventManager class onWindows Resize Event.
It can be something like this:
Ext.EventManager.onWindowResize(function () {
var width = Ext.getBody().getViewSize().width - 160;
var height = Ext.getBody().getViewSize().height - 140;
panel.setSize(width, height);
});
Where panel is reference to your panel
You can read about it here.
You can make the panel resizable by setting the 'resizable' config option, see the docs for the various options: http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.panel.Panel.html.
As far as how the form components interact you'll need to set anchor's if you want to use a form layout or switch to an hbox/vbox type of set-up with various flex settings.
You can set the size for window and set the child panel's autoHeight and autoWidth attributes true.
Another way is catching the resize event of the window and resize the child panel according to the new size values.
Thanks to Gegory and Joseph for the EventManager solution. I've done some minor changes to this solution, replacing the getBody() with a DIV and setting an initial width/height of my chart (or any other component):
<div id="chart" style="overflow: hidden; position:absolute; width:100%; height:90%;"></div>
....
Ext.onReady(function() {
var renderDiv = Ext.get('chart_div');
var chart = Ext.create('Ext.chart.Chart', {
renderTo: renderDiv,
width: renderDiv.getWidth(),
height: renderDiv.getHeight() - 50,
...
});
Ext.EventManager.onWindowResize(function () {
var height = renderDiv.getHeight() -50;
var width = renderDiv.getWidth();
chart.setSize(width, height);
});
});
autoWidth and autoHeight don't seem to work for me (Ext-JS 4.2.1).

Creating Images in WPF without XAML and dispaying

I am trying to create a WPF Chart in c# code and saving it to file without displaying it on screen. This will be in a WCF Service where data is sent to the service, an image is created and and path to the image is returned.
So far I have got the image to save to file and the data on the X & Y axis is displayed but the columns on the graph are not drawn.
Does anyone know why the columns on the chart are not drawing... here is my code:
public void DoWork()
{
var newThread = new Thread(CreateImage);
newThread.SetApartmentState(ApartmentState.STA);
newThread.Start();
}
public void CreateImage()
{
var grid = new Grid {Width = 800, Height = 600, Background = new SolidColorBrush(Colors.LightBlue)};
var chart = new Chart();
grid.Children.Add(chart);
var renderTarget = new RenderTargetBitmap((int)grid.Width, (int)grid.Height, 96d, 96d, PixelFormats.Default);
var barSeries = new BarSeries
{
Title = "Fruit in Cupboard",
ItemsSource = new[]
{
new KeyValuePair<string, int>("Oranges", 18),
new KeyValuePair<string, int>("Apples", 15),
new KeyValuePair<string, int>("Melons", 2),
new KeyValuePair<string, int>("Pineapples", 4),
new KeyValuePair<string, int>("Plums", 25)
},
IndependentValueBinding = new Binding("Key"),
DependentValueBinding = new Binding("Value")
};
chart.Series.Add(barSeries);
grid.Measure(new Size(grid.Width, grid.Height));
grid.Arrange(new Rect(new Size(grid.Width, grid.Height)));
grid.UpdateLayout();
renderTarget.Render(grid);
var png = new PngBitmapEncoder();
png.Frames.Add(BitmapFrame.Create(renderTarget));
using (Stream stm = File.Create(string.Format(#"C:/Images/{0}.png", Guid.NewGuid())))
{
png.Save(stm);
}
}
I had exactly this problem with Telerik's RadChart. The explanation was as you wrote in your comment above - the series was being animated in and the snapshot was being taken before they were visible.
My solution was to set the value of the ChartArea.EnableAnimations property to false before rendering it. I am not familiar with the WPF Toolkit Chart but it is likely that there is a similar setting that you can use to disable the animations.
Note that there is a further, related issue with Telerik's BarSeries - it is necessary to set the opacity of the bars to 1. See the Telerik documentation for details.

Resources