Take a look on attachement, how can I customize the check boxes in Sencha to look something like this? The biggest challenge is not probably the styling, but the possibility to have two checkboxes beside each other.
http://i.stack.imgur.com/2Dxup.png
For styling, you can apply a cls property to the checkbox to add additional styling or use the baseCls property to wipe the st2 styling and apply your own... in order to get the checkboxes side by side you'll want to use a vbox layout in the parent container to accomplish that.. id offer sample code, but im on my mobile, let me know if you have questions and i can whip up an example for you tomorrow
Related
I have a UWP app that I am working on, and using absolute position creates problems when using the app on screen sizes different than the one it was designed for.
I'm not sure how exactly i should place elements at distances from each other without using margin and absolute position. How should I be doing this?
Edit: I am using XAML to design the UI.
Well, it depends on what UI you want to build up.
There are various panels and, usually, there is NO need to use absolute position in most cases.
Usually, the Grid panel is used to create flexible layouts, by adding rows and columns: for example, if you want to create a page with some content and a bottom app bar with buttons on it, you usually create a Grid with as many rows as you need for your content controls, plus one for the bottom appbar itself.
Years ago, I also started building UIs by using absolute position for every element, but then times passes and you start having a flexible mind in order to build flexible layouts.
Sorry to not answer any further, but your question is just TOO broad to give any precise answer.
Best regards
How do you properly position elements in XAML without using absolute position?
You should use an appropriate layout panel:
Layout panels are containers that allow you to arrange and group UI elements in your app. The built-in XAML layout panels include RelativePanel, StackPanel, Grid, VariableSizedWrapGrid, and Canvas.
I want to give a different color to my Toggle Switch when it is On mode.I was going through the Standard Style but couldn't find anything which i am looking for.
First, I'd check the default template again. You can bingoogle it to get this:
http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj709931.aspx
You might then want to change the "On" visual state Storyboard to update the Background of the "InnerBorder" element or add another background element and use a DoubleAnimation in the Storyboard to control its Opacity.
The easiest way to modify the template might be to use Blend. Similar to what I have done in my answer to this question:
Listview selection display with no padding and no checkmark
I start to learn winrt so I have question regarding containers in xaml.
I want to have on main screen of my app a set of different custom controls, but i want to have such interface like in Gridview (Horizontal scrolling, names for groups).
Yes, I can use GridView with different templates per item. But it's not a good solution.
For better explanation please review my picture. It's my goal.
How can I do this? Should i write some kind of custom GridView or there is already such or similar controls?
Thank you!
You can achieve this by using the following:-
-Scroll Viewer
- StackPanel (orientation horizontal)
-Grid view
-User Control
-...
If you are targeting 8.1 then you can use the new hubs which are designed exactly for the described scenario.
I know the title is a little confusing, but the best way to describe what I'm after is by running the Weather metro app on the Consumer Preview; as you scroll horizontally, you'll note that the section headings kind of move around and stay on top of the relevant content, and then fade out as you cross over into a new section. (The main background for the first section also kind of does this)
My question is, how would I go about replicating this behavior in a WinRT app of my own? Are there any existing controls I can leverage or would I have to essentially rewrite it all?
This looks just like a ScrollViewer - you would handle the ViewChanged event and depending on the scroll offset - change the opacity of overlaid static TextBlocks and completely hide the ones that scroll once you cross specific tresholds. I don't think there is anything like that that does it, but I can build it.
There is a problem with sencha touch 2.
I am trying to understand how can I implement the same functionality which provides navigation view in sencha touch 2, but ....
Each item of the 'Ext.NavigationView' component should have it's own unique set of 'navigationBar' elements. I mean set of buttons, for example.
I know that I can do something like this:
this.getMain().getNavigationBar().rightBox.removeAll();
this.getMain().getNavigationBar().rightBox.add(this.getSettingButton());
//where 'getSettingButton' predefined by me a button
And do this action each time when 'push' event happens (clear 'navigationBar' and add appropriate set of buttons)
Of course, I even can implement 'Ext.Panel' with 'layout: card' and set of 'Ext.panel' elements in the 'items' property, each of which will be have unique 'toolbar'.
To control the behavior I can use 'setActiveItem' method.
But, I think each of these approaches is a bit weird, isn't it?
I expected that would be much more natural approach to implement it.
Most likely I don't know what I need. Confirm my doubts. What is the best way to do it.
Currently, Ext.NavigationView tends to perform navigation between "simple" views. "Simple" here means that your views are just panel with innerHTML, not the "complicated" ones with functional buttons, toolbars, etc.
As far as I know, there're 2 ways you could try:
If you still want to use Ext.NavigationView, you can customize your NavigationBar with titles, items (buttons, spacers, etc.) as normal components through navigationBar config, getter and setter.
(recommended) If your views are completely different from each other, you should use many Ext.Container with different items of your choice (for eg. first container with simple HTML announcement, second one with some extra Ext.Button, and so on). Simple use animateActiveItem() for animated navigation. This way is much more flexible, I suppose.