How to do XAML markup

Question

Can't figure out the markup. How to do it without using fixed values (So that it adapts to the screen size)

My markup:

<Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions > <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions>

But everything works in one place.

I want to get a markup of this type:

In 1 is a ListView In 2 image In 3 buttons

ListView

  <ListView Grid.RowSpan="2" Margin="0,37,0,0" SelectionMode="Single" x:Name="ListOfFilters" IsItemClickEnabled="True" HorizontalAlignment="Left" ItemsSource="{Binding Filters}" Visibility="{Binding IsListOfFiltersVisible, Converter={StaticResource BooleanToVisibilityConverter}}"> </ListView>

Image

  <Image Grid.Row="0" Grid.Column="1" x:Name="OriginalImg" Source="{Binding OriginalPicture}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Visibility="{Binding IsOriginalImgVisible, Converter={StaticResource BooleanToVisibilityConverter}}"/>

Buttons

  <Button Grid.Row="2" Content="Open" x:Name="OpenImg" Margin="22,23,0,15" VerticalAlignment="Bottom" Command="{Binding PickCommand}"/>

All buttons have the same Margin except for the left indent (each following button has a larger indent)

Problems I encountered:

If there are many elements in the ListView (They do not fit vertically on the screen), then it displaces over screen 3 and it is not clear where it displaces 2

Because of the different widths of the elements in the ListView (2 sheets on the page), the grid will jump, can I somehow specify (maybe in percent) that the grid is not the minimum width and always the maximum in height (Even if there is 1 element in the sheet )

@Smile on the first problem Your initial code works fine, only you are confused with placement and merging.
With this construction, everything should be fine: <ListView Grid.Row="0" Grid.Column="0" ... /> , <Image Grid.Row="0" Grid.Column="1" .../> , <Button Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" .../>

Alex Krass Alex Krass 13.9k one 18 46 · Accepted Answer · 2016-08-31T09:06:09

You are a little confused about where to place elements and how to place them in more than one cell. Suppose we have such a simple grid Grid .

The fact is that RowSpan spreads from the current placement of the element down, and the ColumnSpan from the current placement of the element to the right. Since the button is placed in cells {1,0} and captures {1,1} , then you must place it in {1,0} and specify the union with the right cell via Grid.ColumnSpan="2" .

In this case, everything will be in place.

To solve the second problem, use the relative size instead of the automatic one, as suggested by @Mirdin in your answer. In addition, the HorizontalAlignment="Left" attribute must be removed from the ListView , so that it occupies all this relative volume initially and no longer jumps.

The final code with all the changes.

 <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions > <ColumnDefinition Width="*"/> <ColumnDefinition Width="3*"/> </Grid.ColumnDefinitions> <ListView Grid.Row="0" Grid.Column="0" Margin="0,37,0,0" SelectionMode="Single" x:Name="ListOfFilters" IsItemClickEnabled="True" ItemsSource="{Binding Filters}" Visibility="{Binding IsListOfFiltersVisible, Converter={StaticResource BooleanToVisibilityConverter}}"> </ListView> <Image Grid.Row="0" Grid.Column="1" x:Name="OriginalImg" Source="{Binding OriginalPicture}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Visibility="{Binding IsListOfFiltersVisible, Converter={StaticResource BooleanToVisibilityConverter}}"/> <Button Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Content="Open" x:Name="OpenImg" Margin="22,23,0,15" VerticalAlignment="Bottom" Command="{Binding PickCommand}"/> </Grid>

Wow, it turned out a little more than it was in the comments)
@NickVolynkin Well, if you already write the answer, so write in full)

Answer 2 · 2016-08-30T12:18:32

Set relative sizes, not automatic:

 <Grid.RowDefinitions> <RowDefinition Height="3*"/> <RowDefinition Height="1*" MaxWidth = "60"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions > <ColumnDefinition Width="1*"/> <ColumnDefinition Width="3*"/> </Grid.ColumnDefinitions>

Then:

 строки: 1 - 75%, 2 - 25% (Но не больше 60 пикселей) столбцы: 1 - 25%, 2 - 75%

MinWidth , MinHeight - unfortunately can only be specified in absolute (fixed) numbers

PS

For WPF

 <ListView ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Visible" </ListView> <Button Grid.Row = "1" Grid.Column = "1"/>

For UWP

 <ScrollViewer> <ListView /> </ScrollViewer> <Button Grid.Row = "1" Grid.Column = "1"/>

NB! Numbering starts from scratch, all other properties are yours. And yes, don’t pop a few elements in one cell, rather put a container there, and already several buttons, lists, etc. in it (Grid, StackPanel ...)

Now if in 1 long List it will click on buttons (3) and it’s impossible to press UPD when opening any list you cannot press buttons, even if the list is short
@SmiLe, most likely because you have <ListView Grid.RowSpan="2" />, so it is placed in cells {0,0} and {0,1} and overlaps the buttons.
You must either remove this property, or specify the location of the buttons Grid.Column = 1

How to do XAML markup

2 answers 2

More articles: