All geek questions in one place

XAML Columndefinitions width * does not take up free space

I know how column definition in XAML works, but there is something I want to do, and I don’t know how to do it.

I need 4 columns:

<Grid.ColumnDefinitions> <ColumnDefinition Width="110" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="80" /> <ColumnDefinition Width="80" /> </Grid.ColumnDefinitions>
  • Column
  • has a fixed width Column
  • should take all available space (yes, this is between the columns, and this is definitely the problem). Column
  • has a fixed width Column
  • has a fixed width

The second column contains text, and the problem is that when this text is too short, the second column does not take up all the free space. it gets smaller automatically, and this is for each row. I can get it to work with this code in a text block:

 MinWidth="2000"

But this is not very good, as this number may be too low when the screen is large.

Here is the whole list containing 4 columns:

 <ListView Grid.Row="1" Grid.ColumnSpan="4" ItemsSource="{Binding blabla}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"> <ListView.ItemTemplate> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="110" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="80" /> <ColumnDefinition Width="80" /> </Grid.ColumnDefinitions> <Image Height="110" Width="110" Grid.Column="0" Source="{Binding blabla}" HorizontalAlignment="Stretch" /> <TextBlock Text="{Binding blabla}" TextWrapping="Wrap" Margin="5,0,0,0" Grid.Column="1" FontSize="16" HorizontalAlignment="Stretch" TextAlignment="Left" FlowDirection="LeftToRight" MinWidth="2000" VerticalAlignment="Center" ScrollViewer.HorizontalScrollBarVisibility="Disabled" FontStretch="UltraCondensed"/> <TextBlock Grid.Column="2" TextWrapping="Wrap" Foreground="Black" Margin="5,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Center"/> <Image Source="{Binding blabla, Converter={StaticResource ImgConverter}}" Grid.Column="3" Width="76" Height="76" HorizontalAlignment="Center" Stretch="None" VerticalAlignment="Center" Margin="0"/> </Grid> </DataTemplate> </ListView.ItemTemplate> </ListView>
+5
source share
1 answer

Your layout is well-defined, but missed a small thing, which caused the contents of the Listviewitem to be dropped to the left because it was defined in the default ListViewItemStyle, which is called the ItemContainerStyle for the ListView control.

All you have to do is add this ListViewItemStyle, which I changed to stretch the content horizontally and vertically throughout the available space for the item in your resources.

 <Style x:Key="StretchedListViewItemStyle" TargetType="ListViewItem"> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="VerticalContentAlignment" Value="Stretch" /> </Style>

Then set it as ItemContainerStyle for ListView as follows:

 <ListView Grid.Row="1" Grid.ColumnSpan="4" ItemsSource="{Binding blabla}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" ItemContainerStyle="{StaticResource StretchedListViewItemStyle}"/>
+8
source

Source: https://habr.com/ru/post/1201599/

More articles:


All Articles