I'd like to show a Grid with three columns, where each column fills the available space but not so that they push subsequent columns off the end of the grid. Each column needs to have at least some of its content (defined by MinWidth) visible.
This is what I'm after:
___________________________________________
| | | |
|very-wide-first-col...|second...|third...|
|______________________|_________|________|
This is what I get:
___________________________________________
| | |
|very-wide-first-column-text|second-column|-text|third-column-text
|___________________________|_____________|
Here's my code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="very-wide-first-column-text" TextTrimming="CharacterEllipsis"/>
<TextBlock Grid.Column="1" Text="second-column-text" TextTrimming="CharacterEllipsis"/>
<TextBlock Grid.Column="2" Text="third-column-text" TextTrimming="CharacterEllipsis"/>
</Grid>
No combination of MinWidth and MaxWidth seems to achieve the desired layout - it seems they don't work with Auto and proportional sizing isn't what I want. I also tried using a DockPanel but that didn't help.
Use stars.
Width="2*" for the first column
Width="1*" for the other two.
This means that the total width available is divided evenly between the total of the numbers (in this example 4 - with the first column being 2/4 and the others each being 1/4 of the available width).
The total width is determined by whatever container the columns are in (the grid).
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I am trying to have a different layout during runtime depending of the hot device phone or tablet.
I'd like to have a 2 columns layout on a tablet and keep a one column layout on a phone.
I'd like also to have some controls to span on 2 columns when on table device, while on phone device the layout should be single column, I mean with many elements to show (3/4 full page height...).
Expected layout:
You can achieve it by taking advantage of OnIdiom, here is a sample in xaml: (note also the new simplified syntax for ColumnDefinitions and RowDefinitions)
<Grid RowDefinitions="*,*,*,*,*,*,*,auto"
ColumnDefinitions="50*,50*">
<BoxView BackgroundColor="Red"
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"/>
<BoxView BackgroundColor="YellowGreen"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="{OnIdiom Phone=2,
Tablet=1}"/>
<BoxView BackgroundColor="Aqua"
Grid.Row="{OnIdiom Phone=2,
Tablet=1}"
Grid.Column="{OnIdiom Phone=0,
Tablet=1}"
Grid.ColumnSpan="{OnIdiom Phone=2,
Tablet=1}"/>
<BoxView BackgroundColor="Bisque"
Grid.Row="{OnIdiom Phone=3,
Tablet=2}"
Grid.Column="0"
Grid.ColumnSpan="2"/>
<BoxView BackgroundColor="Purple"
Grid.Row="{OnIdiom Phone=4,
Tablet=3}"
Grid.Column="0"
Grid.ColumnSpan="{OnIdiom Phone=2,
Tablet=1}"/>
<BoxView BackgroundColor="Blue"
Grid.Row="{OnIdiom Phone=4,
Tablet=3}"
Grid.Column="{OnIdiom Phone=0,
Tablet=1}"
Grid.ColumnSpan="{OnIdiom Phone=2,
Tablet=1}"/>
<BoxView BackgroundColor="DimGray"
Grid.Row="{OnIdiom Phone=6,
Tablet=4}"
Grid.Column="0"
Grid.ColumnSpan="{OnIdiom Phone=2,
Tablet=1}"/>
<BoxView BackgroundColor="HotPink"
Grid.Row="{OnIdiom Phone=7,
Tablet=4}"
Grid.Column="{OnIdiom Phone=0,
Tablet=1}"
Grid.ColumnSpan="{OnIdiom Phone=2,
Tablet=1}"/>
</Grid>
Phone
Tablet
My page layout requirement is such that, it requires 3 rows. First and third row contains some buttons whereas middle row contains a data grid. This data grid is what will occupy most of space. My page root element is Grid with following row definitions.
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="3*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
The first and third row is just a StackPanel whereas middle row is DataGrid itself. Problem is that when user reize the windows this dooesn't scale very well. Are there any other panels that may be better fit for this scenario?
If you want the data grid to use most of the space, use the following XAML
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
I'm looking to use the LongListSelector to display two columns of images, the catch is that the images are of various heights and a static known width.
An example of the layout would be:
+--------+ +--------+
| img1 | | img2 |
| | | |
+--------+ | |
+--------+ | |
| img3 | +--------+
| | +--------+
| | | img4 |
| | | |
+--------+ | |
+--------+
I found a project that shows a grid of images, called PhotoHubSample (from http://code.msdn.microsoft.com/wpapps/PhotoHub-Windows-Phone-8-fd7a1093), however this uses a consistent width and height - leading me to believe it's not possible to do what I want.
I can't see any other Windows Phone 8 examples, however if you want to see a real world example - the Pinterest app on the iPhone renders this kind of list... is there a way to do it in XAML? I'm not 100% set on using LongListSelector if there is an alternative.
I tried the VariableSizedWrapGrid and WrapPanel but both required known heights and widths (or proportions thereof). Since I knew my image width (half the screen width on the phone) I would be sizing the height of the image to ensure correct scaling. This meant the height was variable.
To achieve this, I created a ViewModel that had two image sources a 'LeftImage' and a 'RightImage' as well as a computed 'YOffset'. Now each Item in my LongListSelector would have the following XAML;
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,17">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="14" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding LeftImageUri}" Margin="0,0,0,0" HorizontalAlignment="Left" Stretch="None"/>
<Canvas Grid.Column="2">
<Image Source="{Binding RightImageUri}" Stretch="None" Margin="{Binding YOffset, Converter={StaticResource ThicknessTopConverter}}"/>
</Canvas>
</Grid>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
I used an IValueConverter to create the Thickness object required for the vertical offset of the second image and wrapped this in a Canvas so that it could spill over the boundaries of the Grid.
To generate my ViewModel items I take the list of images and do a simple bin sorting algorithm between the Left and Right sides, making sure I always have an image in the left to match. I keep a running count of the offset and set appropriately on each item in the ViewModel collection.
It's a bit hacky as it's not pure XAML, and I'm sure I could turn it into a proper control, but this works fine for the one scrolling list I need. I also get all the benefits of the LongListSelector, I'll be implementing infinite scrolling eventually so all I need to keep track of in the ViewModel is the ongoing offset.
A view of what it looks like with 400px and 600px images is below (actual screenshot);
There is a variable sized wrap grid control available in the Kinnara wp toolkit... maybe it can help? You can get it at github here...
Im new here and Im quite a noob in xaml, but here's what I'd like to do :
get 2 columns and split the 1st column in 2 rows.
I think that the base is :
(I want the 2nd column to be a bit larger)
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="1.5*"/>
</Grid.ColumnDefinitions>
but then I don't manage to split the 1st column :/
I tried :
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
but I can't specify that this definition is only for the 1st column (Grid.Column attribute unavailable in RowDefinition)
You dont split rows/columns but rather tell content to be placed above more than one colum to be spanned. Check the Grid.ColumnSpan or Grid.RowSpan properties.
So basically what you want to do is take what you started, define two rows and two columns and then specify that the the UIElement in the second column shall span over both rows, e.g.
<Image Grid.RowSpan="2" Grid.Row="0" Grid.Column="1" />
I just accepted it, but in the end, I used the following code than did exactly what I wanted with the philosophy I build my interfaces with !
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="1.5*"/>
</Grid.ColumnDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40*"/>
<RowDefinition Height="60*"/>
</Grid.RowDefinitions>
</Grid>
</Grid>
I am using the DataGrid of Silverlight toolkit. Now my requirement is to merge cell in some of the row in the datagrid.
Is there any way to do Cell merging in the Datagrid using silverlight.
If it's just displaying values from multiple columns in one column it is best to do this by using a DataGridTemplateColumn:
<sdk:DataGridTemplateColumn Header="Merged Cols">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Column1}" />
<TextBlock Text="{Binding Column2}" />
</StackPanel>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>
You could also do this through a converter if you want to use the DataGridTextColumn. As a Silverlight converter only supports one value you'd need to send the entire row.
The column definition of the DataGrid would contain
<sdk:DataGridTextColumn Binding={Binding Converter={StaticResource MergedCols}} />
You'd need to add the MergedCols converter to your solution and to your resource collection.
<UserControl.Resources>
<myConverters:MergedColsConverter x:Key="MergedCols" />