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>
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
I need to create a CommandBarFlyout with many buttons.
My XAML code:
<StackPanel>
<Button Height="40" Width="40">
<Image Source="/Assets/StoreLogo.png"/>
<Button.Flyout>
<CommandBarFlyout>
<AppBarToggleButton>
<AppBarToggleButton.Icon>
<BitmapIcon UriSource="/Assets/StoreLogo.png"/>
</AppBarToggleButton.Icon>
</AppBarToggleButton>
</CommandBarFlyout>
</Button.Flyout>
</Button>
</StackPanel>
If I copy-paste twelve buttons in CommandBarFlyout - only first eleven are showing.
If I add more buttons - still first eleven shown.
From this document about Commandbarflyout, it mentions:
Unlike CommandBar, primary commands do not automatically overflow to
the secondary commands and might be truncated.
So the reason why only 11 buttons are displayed should be that the actual contents have overflowed the scope of the primary command and were truncated.
If you still want to continue to use CommandBarFlyout, you can also add commands to the SecondaryCommands collection. Or as the document said, to use CommandBar or Flyout.
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).
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" />