How to shrink wrap image in wxScrolledWindow - wxwidgets

I have a frame that has some stuff at the top, and a wxScrolledWindow below. The scrolled window contains an image selected by the user. I want the frame to shrink-wrap it so that background never shows in the scrolled window. I am using a BoxSizer in the frame. Everything works perfectly until the user drags a border to increase the viewing area. He takes it too far, and background shows. I have tried at least a dozen methods, but I cannot get the window's border to snap back when the user drags the border beyond where the scrollbars disappear. When the image is loaded, the scrolled window calls SetMaxClientSize() with the right numbers, but it has no effect. A couple of pictures will help. I have just dragged the right border to the right, increasing the viewing area. Here is what it looks like:
I want the border to snap back so it looks like this:
Windows 7 x64, wxWidgets 2.9.4

Re-implement the size event handler. If the new size is larger than you want, modify it to the largest you accept. Then call the base implementation.
void MyFrame::OnSize(wxSizeEvent& event)
{
wxSize new_size = event.GetSize()
wxSize max_size = ... calculate max size ....
if ( new_size.GetHeight() > max_size.GetHeight() {
new_size.SetHeight( max_size.GetHeight() );
if ( new_size.GetWidth() > max_size.GetWidth() {
new_size.SetWidth( max_size.GetWidth() );
event.SetSize( new_size );
wxFrame::OnSize( event );
Also, be aware of this note in the documentation:
Important : Sizers ( see Sizers Overview ) rely on size events to
function correctly. Therefore, in a sizer-based layout, do not forget
to call Skip on all size events you catch (and don't catch size events
at all when you don't need to).

Ravenspoint's answer doesn't seem to work (using wxWidgets 3.0.3 or 2.8.12). The frame is resized larger than desired even when the event size is reduced and propagated as you suggested. Here's an example:

Related

Allow user to resize window such that Gtk3 TextView component can't show all text

I'm working on a GTK program in Rust (someone can probably answer this if they don't know Rust, as I can figure out how to translate between different bindings and the native C API) via the gtk-rs bindings for which I want to have a non-editable TextView who's contents are constantly updated in my code. I want the user to be able to resize the TextView to any size, after which my code will re-calculate its contents accordingly. Unfortunately, GTK prevents any resize from taking place that would hide any contents that are current in the TextView. I can't use a ScrolledWindow because I don't want visible scrollbars, and disabling the scrollbars on a ScrolledWindow prevents the resizing behavior that I want. I also tried calling set_size_request to set the size to both 1, 1, and 0, 0 after every text change, but this does not change the behavior at all either — the user still can't properly resize the TextView (by resizing the window).
How can I enable the resizing behavior that I want?
Probably this is not possible. What would be the point of resizing the text view smaller, if the user can never see the text that is outside of the viewport because you don't want scrollbars? That seems like it would confound the user's expectation of how such a component would usually work.
Maybe an approach could be that you pick a certain number of lines to show, make that the size of the viewport, and delete the old contents of the text view that scroll outside of the viewport?

Codenameone Slider cannot set height

I am finding it difficult to set the right look and feel of a CN1 Slider control. Essentially i want it to look like the one in the CN1 Default Demo of the Theme window, and have it with the Thumb image to allow the user to set the scroll.
But when i code it up as per online examples, it comes out skinny on the simulator (as below)
...but doesn't display the line at all on the actual iphone device.
When i start messing with the methods, such as 'getSliderEmptyUnselectedStyle()' then this makes the background show and can see the progress but its tall and i cannot seem to shrink it.
Container container = new Container(new FlowLayout());
container.getAllStyles().setBgTransparency(255);
container.getAllStyles().setBgColor(0xffffff);
Slider slider = new Slider();
// slider.getAllStyles().setFgColor(0);
// slider.getAllStyles().setMarginLeft(0);
// slider.getSliderEmptyUnselectedStyle().setBgTransparency(255);
// slider.getSliderFullUnselectedStyle().setBgTransparency(255);
// slider.getSliderEmptySelectedStyle().setBgTransparency(255);
// slider.getSliderFullSelectedStyle().setBgTransparency(255);
// slider.getSliderEmptyUnselectedStyle().setBgColor(0xffffff);
// slider.getSliderFullUnselectedStyle().setBgColor(0x42B72A);
// slider.getSliderEmptySelectedStyle().setBgColor(0xffffff);
// slider.getSliderFullSelectedStyle().setBgColor(0x42B72A);
Style sliderStyle = UIManager.getInstance().getComponentStyle("Label");
sliderStyle.setFgColor(0);
slider.setThumbImage(
FontImage.createMaterial(FontImage.MATERIAL_RADIO_BUTTON_CHECKED, sliderStyle, 4).toImage());
slider.setMinValue(0);
slider.setIncrements(25);
slider.setProgress(entity.getCompletion_pct());
slider.setEditable(true);
container.add(slider);
return container;
How can i get it pretty much to the CN1 example?
Thanks
The slider in the example used a 9-piece border or a 3-piece border both of which have a fixed minimum height/width. This minimal height is applied to the way the slider is rendered.
Your code can be made thicker with padding but it will create a problem when you add a thumb. Once you add the thumb it will increase the overall size and make the entire height of the thumb have that background. So you need to style this via the designer and for this specific case you would want to use an image border that is carefully measured to align with the thumb image.
Also notice you used getAllStyles() which is wrong. Slider is a special case and uses the Slider and SliderFull UIID so effectively the component has two UIID's and two separate sets of Style objects.

dijit.dialog - Dynamically Sized dijit.Dialog Not Centered

I'm having issues with correct sizing and positioning of digit.dialog.
I'm using the built in logic of dijit.dialog to determine the dialog width and positioning as it's content can be any size. In addition, the dialog content needs to be set via the href tag. If I start the browser window at 300px width, the right side of the dialog is all the way to the right. As soon as I manually resize the browser to the full width, and then shrink it, it adjusts the position. Sometimes it gets it correctly, but it's not consistent.
How do you get digit.dialog correctly so it displays it's content correctly for the first load time?
Please look at plunkr: http://plnkr.co/edit/FLO1VFWX2LbZeZAZuhYm?p=preview
new dijit.Dialog({
id: "modal",
href: "modal.html
});
Your content needs to have a fixed size. Otherwise The position is calculated with an inner size which is not relevant anymore after the sizing.
Basically, when re-sizing, the position is calculated using the previous width.
By calling multiple times the resize method, the dialog will adjust its position (a sort of binary search of the best position/size)
dialog.show().then(function() {
dialog.resize();
dialog.resize();
dialog.resize();
dialog.resize();
dialog.resize();
});
http://plnkr.co/edit/bhhAZlYOE6kIduxOX8cn?p=preview
But this is extremely ugly. You should consider giving a width of the content

How Can I use Graphics.CopyFromScreen to enable alpha transparent controls?

I am trying to use (and this may be my problem already) e.Graphics.CopyFromScreen() in the OnPaint() method of my control to prepare a background onto which I can draw the content of the control. The goal is a tool-tip with rounded corners and other specific features to replace the default Windows tool tip.
Ideally the tool tip could be antialiased and blended into the backdrop, however at a pinch I could tolerate an aliased boundary. This may also be necessary as the control will often be covering a control with an OpenGL overlay and the whole blending procedure may end up a nightmare.
I have created a custom user control, a persistent instance of which belonds to my applications's main form, overriding the OnPaint and OnPaintBackground methods. The application of transparency however is challenging. As I understand, the graphics object passed to the paint method starts with a copy of the current VisibleClipBounds, where generally the first move is to clear the control with a solid colour and start drawing the main features. My first thought was to bypass the fill and start drawing on the captured background. For the first redraw this works fine, but subsequent redraws keep the previous content instead of re-capturing the backdrop. I hoped that CopyFromScreen would specifically eliminate the currently drawing control from its capture so as to start from a clean base but this is not the case, it captures the rectangle of the new location including the image of the previous location if it is in the bounds.
Other solutions and permutations thereof such as
SetStyle(ControlStyles.SupportsTransparentBackColor, True)
Me.BackColor = Color.Transparent
e.Graphics.Clear(Color.FromArgb(0,0,0,0))
have to-date yielded no appropriate results.
I started with a transparent form using the transparent key colour. This worked with aliasing but using a form as a tool tip seemed excessive and caused annoying artifacts (some of which could be overcome) such as the temporary presence of the taskbar button, focus loss of underlying form with subsequent visual feedback in the host form's title bar colour. The control is much lighter weight but I am struggling to make it work even as well as the form.
At this point I simply ask how to achieve the desired result and whether CopyFromScreen is a part of that solution.
That's a lot of text to read - but addressing transparency to achieve a custom-shaped form/control... Control.Region can do the same thing:
[DllImport("Gdi32.dll", EntryPoint = "CreateRoundRectRgn")]
private static extern IntPtr CreateRoundRectRgn
(
int nLeftRect, // x-coordinate of upper-left corner
int nTopRect, // y-coordinate of upper-left corner
int nRightRect, // x-coordinate of lower-right corner
int nBottomRect, // y-coordinate of lower-right corner
int nWidthEllipse, // height of ellipse
int nHeightEllipse // width of ellipse
);
private void CreateRegion()
{
this.Region = System.Drawing.Region.FromHrgn(CreateRoundRectRgn(0, 0, Width, Height, 40, 40));
}
If your control is set as a top-level window and you're running it on Windows 7 or 8, check into DwmEnableBlurBehindWindow. In the parameter structure, I set enable to true and I create a region 1x1 pixels for the blur. With BackColor and TransparencyKey set to Black, this gives me a entirely transparent window (complete with mouse pass-through) that I can paint 32-bit images to with full alpha transparency (using Graphics.FromHwnd). A bonus to this method is that if the window moves or the background changes, Windows DWM does all the work--I don't have to update a thing.

Setting ScrollView Height

I have a window. That window has a header (variable size) and should have a scrollable body that sits directly under the header. How can I set the height of the body so that it actually scrolls? If I set height: 'auto', the body extends beyond the bottom of the viewport to fit all of its content. If I set its top and bottom properties, nothing shows up at all.
I can't imagine that I'm the only one who's come across this, but I haven't found a single definitive answer for how to create properly sized, scrollable view within a window. Heights seem tricky since the value is so different in portrait and landscape modes on a single device, much less across devices.
Can someone provide tips on how to manage this scenario? I'm hoping I can extrapolate it to handle other view height scenarios.
Thanks.
It depends on what you are trying to achieve. If you're trying to create a ScrollView that just has the ability to scroll when empty, you should add a empty View into the ScrollView, which has the "top" property.
For example:
var win = Ti.UI.createWindow();
var scrollView = Ti.UI.createScrollView();
var emptyView = Ti.UI.createView({top: 460});
scrollView.add(emptyView)
win.add(scrollView);
Note that the "top" property has 460 set, which is 40 bigger than the iPhone screen res of "420". This will case the scrollView to scroll. If you're looking for a specific size based on the window's navBar controlTitle, you will have to run an equation based on what you think the size will be, applying that size to the view's "top" property accordingly.