I have an OnOffSwitch in my UI. It has its UUID set to a specific style.
when I modify the colors of this style, the full OnOffSwitch is affected. How can I make it so the sliding piece has one background color and the area inside the full box has another? I'd like a green square with a black border sliding over a transparent background with a slightly thicker black border.
You will have to make your own OnOffSwitch images, 3 of them:
switchOffImage = the off state image (In your case, a slightly thicker black border image)
switchOnImage = the on state image (In your case, a green square with a black border)
switchMaskImage = A square transparent mask image
To get an idea of what the 3 images should be like, open your GUI Builder -> Select Theme -> switch to constants tab at the UIID section and you will find the 3 UIID mentioned above there. If they're not, click add and look for them in the dropdown, then add them all.
After finishing designing your switch images, replace the default images. Keep modifying and testing until your OnOffSwitch flow smoothly.
Related
Need a quick suggestion for styling a WinForm. I made it with rounded corners even when re-sized. Now trying to add a close button with a image (ControlBox=false), overlapping or clipped to top right corner. This is what I could end with.
But I wish to make it more like in this example image.
How could I achieve this in WinForm.
Here's the trick : your window doesn't just end with the white part. It extends a little bit further. The close button comes under the 'extra' part. The other sides where the window appears to not be there is actually transparent...or in the case of the image, semi-transparent.
The glow effect is provided by the window. Set the TransparencyKey property of the window to Color.Magenta (its a convention as Magenta is the color least likely to be used in a window). Then set the background image to a white background with a little bit of Magenta in the edges. The Magenta will appear transparent when set as the background image.
Fiddle around with TransparencyKey and you'll understand what I mean
Winforms itself cannot provide this for you without outside manipulation of the windows,
because it still uses win32 windows classes in the background.
If you want transparancy in windows: see articles like:
Cool, Semi-transparent and Shaped Dialogs with Standard Controls
And the method in Win32 to do it:
SetLayeredWindowAttributes
I have a pretty standard application with a bar at the bottom. The bar and app are the same background color. My issue is that there is a tiny little line along the edge of the application bar, I can only determine that is it some sort of soft edge that is part of the default style of the ApplicationBar.
Here is an image of the display, note the tiny 1-2 pixel horizontal line:
It appears to be a 1-2 pixel black line with transparency. My main question is, what is this line, is it something I am introducing by accident?
It is by design a 1 pixel gap will be there between ApplicationBar and your ContentGrid. The gap will be visible only when your set the Opacity of the ApplicationBar to 1, So to get rid of the gap You can change the Opacity of the ApplicationBar to 0.99, so that the appbar comes above your ContentGrid.
Obviously you need to make some changes to your ContentGrid so that you can access the part of the Grid that the appbar is occupying.If your grid has ScrollViewer or ListView, it is always recommended to have some extra space after its contents*(may be a empty StackPanel with some height)* which will obviously solve this otherwise if it is a Static layout, you can make use of margin Property.
I try my 4-large-imageButtons to place centred in my main form, so that these buttons for all devices (Smartphone and iPad) centrally placed in a beautiful shape in the main form.
My questions:
1 - How can I change the background color, size and position of a button?
2 - How can I (seeing) large image buttons (centered in the Main Form 2 top and 2 bottom) place in the main Form. Until now two bottom buttons slightly move down. they are not exactly centered in my opinion.
3 - How do I change the background color of the main form? What do I do if I want to use an image instead of a color?
4 - What should I do, that 4-large-ImageButtons look for smartphones smaller and for iPad large? Until now, these see full postponed for Smarphone screen. These do not fit exactly in Smarphone screen.
Here are some screenshots of what I have so far:
As can be seen, the buttons are not exactly centered and shown very large. All 4-buttons do not fit exactly in Smarphonescreen. Only one Button is to see. For the 3 others you have to scroll.
I set the MainForm so.
The placement of buttons should look like this for tablets and for Smartphones should be smaller.
Button 1, 2, 3 and 4 each have a transparent image. The transparent images come on that colors.
On the smartphone it should look for portrait format so:
But if i turn the Smartphone, for Landscape format it should look like (responsive design):
How can I best proceed. Could someone please explain step by step? That would be really great.
Thanks.
Set the UIID value to something other than Button e.g. Container or even MyButton so the push button background won't be there. Place the 4 buttons in a 2x2 grid layout. You can nest containers in various ways to achieve the layout you want see http://www.codenameone.com/how-do-i---positioning-components-using-layout-managers.html
Make sure the images for the buttons are MultiImages so they adapt to the various resolutions.
I'm making a toggle button with a new design "material design" like. I have a problem with animation. I'm using an ellipse that expands and changes the color of the button where the mouse clicked. With color it works well but I want to make visible label as ellipse is over it and invisible the second one. I have an image to make it simplier to understand:
so the second image shows that where the green is it stills writes "Toggled" where it should already write "Untoggled" but still where blue color is, there should be writed "Toggled" then radialy changes. I have tried to use Opacity Mask but I couldn't get it to work. Anyone could help me?
Ok I did it animating EllipseGeometry, settings the label I want to display on top of the old one and clipping the top one to the EllipseGeometry.
My WPF VS 2008 application is working with many different images that are assembled and displayed at runtime. I would like to display some white text on top of those images. My problem is that some images contain a white or light color background.
My question is - is it possible to somehow specify a property or specify a setting in the image object, BitmapImage object (where the image is loaded from), or some other WPF object such that when white pixels from one image overlap white pixels from the other image - they turn a different color so the text will be viewable?
I think it depends on how you 'draw' your text on the images. If you use e.g. a Label, you can try out the 'DropShadowEffect', see: http://msdn.microsoft.com/en-us/library/ms748273.aspx
This effect should work with all WPF objects and you can try out some transparent black soft shadows surrounding the text (a little bit like a glow).
This will only be visible in bright environments if you adjust the opacity right.
Decided to use a dark background color for the text that is only partially (.35) opaque. This means that the background color of the image comes through for the most part, but for lighter colors it yields enough contrast so that the text is viewable.