CODEWITHSUNDEEP
wpfxamluwp
Tilcey
Tilcey

Reputation: 43

Inner Items in UWP Grid not stretching XAML

Having an issue with my items in this list view not spanning the width of the screen. Sorry if my code is sloppy. A bit new at this. I do have similar pages with similar code.

Thanks in advance!

Not the full code - wasn't sure if you would need it. 

<ListView x:Name="listView" DataContext="{Binding ServicesCvs}" ItemsSource="{Binding}" Margin="0,80,0,0" HorizontalContentAlignment="Stretch">

                   <ListView.ItemTemplate>

                    <DataTemplate>
                        <Grid>

                                <Button Command="{Binding DataContext.SelectServiceCommand, ElementName=serviceSelectionPage}"
                                    CommandParameter="{Binding Text, ElementName=ServiceIdTextBlock}">
                                    <StackPanel Orientation="Horizontal" Margin="0,0,0,0">
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="0*"/>
                                            <ColumnDefinition Width="1*"/>
                                            <ColumnDefinition Width="1*"/>
                                            <ColumnDefinition Width="1*"/>
                                            <ColumnDefinition Width="1*"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <TextBlock x:Name="ServiceIdTextBlock" Grid.Column="1" FontFamily="Arial" Text="{Binding ServiceId}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" Foreground="#FF18417C" Margin="10,0,0,0"/>
                                        <TextBlock x:Name="ServiceType" Grid.Column="2" FontFamily="Arial" Text="{Binding ServiceTypeId}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" Foreground="#FF414B59"/>
                                        <TextBlock x:Name="AssetId_TextBlock" Grid.Column="3" FontFamily="Arial" Text="{Binding AssetId}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" Foreground="#FF4D7CC1"/>
                                        <TextBlock x:Name="ProductItemId_TextBlock" Grid.Column="4" FontFamily="Arial" Text="{Binding ProductItemId}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" Foreground="#FF414B59"/>

                                    </Grid>
                                </StackPanel>
                                </Button>
                            </Grid>

                    </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

Upvotes: 4

Views: 6653

Answers (3)

Ive
Ive

Reputation: 1331

Put this in your ListView, it will works in Designer too

<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
</ListView.ItemContainerStyle>

And as Mark Feldman said, remove that StackPanel and set button's HorizontalContentAlignment="Stretch".

Upvotes: 21

SelAromDotNet
SelAromDotNet

Reputation: 4815

i'm not sure if this is the same problem you're having, but one of the things that drove me crazy about listview/gridview is that the containers wouldn't stretch. the templates would stretch, but only as far as the container, which by default, does NOT stretch.

the fix is to override the style for the ListViewItem/GridViewItem by adding something like this to your resources (either on the page or in the app.xaml resource dictionary:

<Style TargetType="ListViewItem">
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>

you won't see the results in the designer (!!!) but when you run it, it should stretch the contents of the item to fill the screen

i hope this is helpful!

Upvotes: 3

Mark Feldman
Mark Feldman

Reputation: 16148

Two issues:

  1. Set your button's HorizontalContentAlignment="Stretch". Your child controls may specify stretch but they will only stretch into whatever space the parent makes available to them.
  2. Remove the horizontal StackPanel. A StackPanel overrides stretching and effectively says "reserve as much space as the child controls require for layout and no more".

Upvotes: 3

Related Questions