live tiles in Windows Phone and Grids - windows-phone

I'm trying to create a live tile for my application, using a user control.
The user control contains a grid, an image and a rectangle filled with color.
Now here comes the funny part.
I want the rectangle to act as a background for the tile's title, and the image to fill the rest of the tile. And i said to myself, well, lets put some rows in that grid and set the like you usually set them in a WPF/SL application.
I then write the entire thing in a WBM and save it to isostore.
The problem is, the parser seems to ignore the presence of grid's rows. regardless of what I try, the rectangle is not shown, and the image covers the full tile, when it should only cover the first row. It is as if the grid didn't even existed.
Another funny aspect is that it doesn't matter if I use rows or columns, the result is the same.
Any ideas?

Are you using the following method?
Dynamic LiveTile - adding background image?
I recently implemented a Live Tile using a Grid with Rows and Columns for layout of some TextBlocks. I encountered similar challenges, so I placed the control that I was using for my Live Tile on a blank page in my app to better see what was happening. Does the control render correctly when displayed on a page (versus being rendered to a WriteableBitmap)?
Another idea. Instead of trying to position the Rectangle relative to the tile's Title, why not leave the Title property blank and put the same text in a TextBlock within the user control?
If you are careful about the font and positioning of the TextBlock, the text on the resulting background image can appear indistinguishable from text displayed from the Title property. I decided to follow this strategy myself. I found the font information in the following answer:
Font size and family for a tile's title
Otherwise, could you post an example of the XAML you are using?

Related

Understanding collapsible box layout and sizing

I am working on a Qt-UI with PyQt and found this nice snipped to create a custom collapsible box widget here: How to create collapsible box in PyQt
I have just replaced the internal QScrollArea by a QFrame.
It works perfectly, as long as the content of the layout that is added stays the same.
However, I allow the user to add or remove widgets from that layout dynamically during use. Here I need some help. I am adding a Grid Layout with, say, 3 widgets inside there (initial creation of the box with .setContentLayout) and once the user adds a 4th widget:
the layout is compressed and keeps its original size
all widgets inside are compressed to fit in the newly created one
overall size of the collapsible box is kept constant.
I have played with various options like updateGeometry() on the content_area and all surounding widgets. It seems I don't fully understand what this code does, I am not really familiar with these animations yet. My best guess is, that the animation somehow blocks the update of the height of the collapsible box, causing the layout to be compressed.
I would be really happy for a pointer where to look / what to adjust to get the size of the collapsible box reacting to the size of the containing layout.
Thanks!

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?

How to build below screen in titanium?

below i attached an app help guide screen. I am understanding how to build this screen.
If any body have idea please share here
View with semi transparent background color (backgroundColor:"rgba(0,0,0,0.5)";) and some images on top of it.
So, using images is bad. You'll need images for translations and if you do this as one image you'll need to ensure all devices are covered so your arrows point to the right element.
Minimise images == smaller app.
First thing you'll need to do is a create a blocker view -- so that's a view that will fill the screen and have a black background with opacity.
You can't apply that to the window as everything in it will be semi-transparent so:
Create a transparent Window that fills the screen.
Add to that window a view that fills the window and has opacity say 0.5 and black background
Add to the Window (not the view you just created) the other elements and button -- ideally, these should be individual graphics of the arrows, sized in such a way that you can position them based on the host element (the item they are pointing to / referring to). Use real text so you can handle translations / reduce file size.
So you'll need a way to associate each tip with a control they are anchored too, and that will ensure that regardless of the screen size, the tip will appear in the correct place.
First of all, always give a try before putting questions anywhere because it makes you learn things on your own for long time.
The easiest step for you to do this is to ask your designer to create a complete image just like that & you just have to show it on top.
If you have to show that image in different translations, then you can ask your designer to provide you required translations images.

UI controller that mimics home screen

Is it possible to create a UI controller that would look like a home screen? Or is there one already?
I am trying to make one using a Grid controller, but I am struggling with sizing - I could not find exact sizes for tiles, margins, only for their content, and it appears that margins and tile sizes change on over-scroll.
I would like to use this to display something like a picture album.
Your answer for photo album is WrapPanel.
One of the new controls in the Silverlight Toolkit is WrapPanel. It enables users to position child elements sequentially from left to right or top to bottom. When elements extend beyond the panel edge, they are positioned in the next row or column.
For more Refrence how to use it go here

How to layout the UIlabel object according to design spec in iOS

I have some difficult time in creating iOS screen to match with visual design provided by design team.
The design team has provided the spacing info for each screen which shows how much space each text needs to be apart from other UI element on the screen. This is attached for your reference. You can see here that the two text labels "Activate Your Account" and "A Verification link...." are placed apart by 25px.
The same thing I am trying to achieve in the storyboard. I am attaching the storyboard screen snapshot for reference.
From this you can see that I cannot keep exactly 25px b/w the two text labels because for the following issue
The text font is custom font and I cannot load the same in storyboard. I have added the font file in the project, but when I try to open it in storyboard for UILabel, it doesn't list out. I am not sure why xcode doesn't show up. This makes me hard to resize the label's frame. If I try to decrease the empty space in the label (upper and lower part of the text), this will make label height less, but when I set the font programmatically, it doesn't fit in this small space.
When I try to increase the height of the label, the text inside the label starts displaying at the center leaving space at the top and bottom of the label frame.
So I want to know how to solve this problem. If anyone had this issues and sorted out, please let me know how to fix this.
Many Thanks
Your designers aren't speccing their designs correctly :) Show them how iOS renders text and have them spec their designs in the same way. This is what we do on the Facebook design team. I mocked up an example for you (each square is 4dp/8px).
http://i.stack.imgur.com/q4tZX.png