I want a Items Control which shows items in a horizontal alignment and it should stretch / size over the whole aviable horizontal space.
Currently I have 7 Columns, but it would be possible that the amount may be dynamic.
First of all I used a stackpanel as items like this:
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
This works for the horizontal alignment requirement.
But, as the stackpanel does, it does not strecth. It always has the same size not regarding the aviable space of the device.
What Items.Panel should I use to achieve this?
Any advice?
many thanks in advance.
You could try a UniformGrid. There is one in WinRT XAML Toolkit.
Related
How do I apply 2 layouts when orientation changes? I have 2 layouts a below it has columns given width using * values. I don't know how to change those values.
I would like to do this using blend with behaviours.
Please let me know any good articles that I should refer.
This is my landscape view
This is the portrait view I want
If I understood you correct you want two columns:
The first uses the complete available space without a fixed pixel width
The second column should always be for example 300px width (the width that column 1 does not use)
In this case you can declare your second column width without the *:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition /> <!-- implicitly 1* -->
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<Border Background="lightblue"/>
<Border Background="LimeGreen" Grid.Column="1"/>
</Grid>
Your are able to name these ColumnDefinitons with the x:Name attribute and access them in code behind to change there widths at runtime. You can also create a data binding to do it without a code behind.
I'm moving a Titanium app (for ios and Android) to windows phone 8.1. I'm a newbie at windows applications.
I want to create an app that has the same appearance in different screens, I mean in bigger screen show elements bigger but keeping the aspect of the app. I think I need to define Margin and Width and Height to place elements in the page.
I tried to put some basic elements in MainPage.xaml and see what happens. This is my code:
<Grid>
<Image Source="Assets/ppal/fondoCompleto.png"
Margin="-25, 0, -25, 0"></Image>
<Image Source="Assets/ppal/settings.png"
Margin="10,10,365,612"></Image>
<TextBlock Text="aaa" FontFamily="Arial"
TextAlignment="Center"
Margin="0, 200, 0, 0"
FontSize="22"/>
<Rectangle
Fill="#0098bc"
Margin="30, 50, 30, 450"
RadiusX="5"
RadiusY="5"/>
</Grid>
I've tried it in different Windows phone simulator with different inches and result has been horrible. It shows ok on 4 inch but very bad on 6 inch.
Do you know how I can do this?
Is there a way to use a unit like dip, not pixels?
Or is there a formula to convert a width, height, margin and return a value depending on screen size? (this is what I use in Titanium app: Titanium conversion pixels to dp)
Thank you very much!
"I think I need to define Margin and Width and Height to place elements in the page"
Not necessarily. If you have elements that need to overlap or move around via animation you may need to, but if you're just laying out some form elements you should use the grid (or multiple grids) to arrange them. I'm not going to try an discern your layout from above (it looks like a random test anyway), but it would look something like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="*" />
<RowDefinition Height="2*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Image Source="Assets/ppal/fondoCompleto.png" Grid.Row="0"></Image>
<Image Source="Assets/ppal/settings.png" Grid.Row="1"></Image>
<Rectangle Grid.Row="2" Fill="#0098bc" RadiusX="5" RadiusY="5" />
<TextBlock Grid.Row="3" Text="aaa" FontFamily="Arial" TextAlignment="Center" FontSize="22"/>
</Grid>
This will lay out four rows; the top is 100px high, the bottom is 50px high, and the two middle rows will fill up the rest of the screen space (*), with the second being twice as high as the first (2*). You can do the same with ColumnDefinitions. Images should scale to fit the containing grid cell, and if you need other elements to scale to fit that don't normally, you can use something like a ViewBox.
You can also use a combination of grid layout and margins/horizontal alignment to get the layout you want. The margins will be relative to the containing grid cell. There's also nothing stopping you from having multiple elements inside a single grid cell -- you can have Grid.Row=1 on two items and then use margins etc to lay them out the way you want.
I want to have fluid layout for my view in a windows store app.
In a new page template you have a Grid which has a row set to fill the screen after the title at the top of the page.
So I have my content to enter into this grid row. My content is going to be a mixture of controls (images, text, vertical listview, maybe another gridview) but it isn't a single grouped collection that I can bind to a single gridview.
The point I'm trying to make is that I want my horizontal width to be more than that of the page, yet I want to size things fluidly which means relative to a single page height / width.
Ideally I don't want to have to specify hard coded widths for controls as I want this layout to work for as many different screen resolutions as possible. That being said, I imagine I will use Min / MaxWidth and heights to make sure items aren't too big or too small.
What approach should I take?
EDIT
Hopefully the following image would better describe what I mean.
The first image shows a (grouped) gridview that automatically will expand horizontally as it requires. This would work well but the controls I want to add are not grouped / related to each other.
The second image is what I am trying to do, which is to have a number of unrelated controls in a window but have them scroll off the side of the page horizontally. I can do this if I give each control a fixed width but I want to try and make it more flexible than that if possible (using min / maxWidth but not fixed values for the widths themselves).
Use star values in grid. Like:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
...
and use ViewBox as the top container. ViewBox will scale all the content to fill the available size.
I have two textblocks inside a stackpanel. I fix my textblock height to 66. I also set the stackpanel height to 66. However, when I am running my app the height of stackpanel is always bigger than height of my textblocks. Do you know how can I fix this problem?
Thanks
Setting the height of a stackpanel configured to stack elements vertically makes no sense : the height will always be the sum of the heights of the elements of the panel.
Your problem is most likely the margin of the textbocks. Remove it and the panel will have the right size:
<TextBlock Margin="0,0,0,0" />
i have gridview in my windwos store app and i want this gridview to fill whole screen - to have 100% width and height.
This is my gridview in xaml:
<GridView x:Name="ItmLView" HorizontalAlignment="Left" Height="751" Margin="0,10,0,0" VerticalAlignment="Top" Width="1361" SelectionChanged="FeedItemClick" ItemTemplate="{StaticResource ItemTemplate}"/>
Can anybody help me please?
Thank You
You can remove properties affecting size and position, like, Height, Margin, Width, etc. and have it like this:
<GridView x:Name="ItmLView" SelectionChanged="FeedItemClick" ItemTemplate="{StaticResource ItemTemplate}"/>
Basically, we just want GridView to have HorizontalAlignment="Stretch" and VerticalAlignment="Stretch" which are the default values, so you don't need to put anything.