CODEWITHSUNDEEP
uwpuwp-xaml
Riz
Riz

Reputation: 6686

grid inside gridview doesn't fill up the whole width

I've been trying this for hours and this is supposed to be very basic but I'm having a hard time figure this out and I can't find any examples of this or solutions online. I am trying to do a grid layout bound to a list of items. I am using a Gridview which encompasses a grid. I can't get it to fill out the entire width. It only takes up half the window. If I pull the grid out of the GridView, it works fine and expands to the full window, so I know that it's a problem with GridView. Below is my code:

   <Page.Resources>
    <local:BoolToStringConverter x:Key="BoolToStringConverter" FalseValue="No" TrueValue="Yes" />
    <helpers:TimActivityTypeToStringConverter x:Key="TimActivityTypeToStringConverter" />
    <DataTemplate x:DataType="model:TimActivity" x:Key="TimDataTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="2*" />
                <ColumnDefinition Width="1*" />
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" Text="{x:Bind Path=Type, Converter={StaticResource TimActivityTypeToStringConverter}}" />
            <TextBlock Grid.Column="1" Text="{x:Bind StartTime}" />
            <TextBlock Grid.Column="2" Text="{x:Bind EndTime}" />
            <TextBlock Grid.Column="3" Text="{x:Bind From}" />
            <TextBlock Grid.Column="4" Text="{x:Bind To}" />
            <TextBlock Grid.Column="5" Text="{x:Bind Comment}" />
            <TextBlock Grid.Column="6" Text="{x:Bind Path=Chargeable, Converter={StaticResource BoolToStringConverter}}" />
        </Grid>
    </DataTemplate>
</Page.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="100" />
    </Grid.RowDefinitions>

    <GridView ItemsSource="{x:Bind Activities}" 
              IsItemClickEnabled="True" 
              ItemClick="GridView_ItemClick"
              ItemTemplate="{StaticResource TimDataTemplate}">
    </GridView>

</Grid>

Upvotes: 0

Views: 148

Answers (2)

Luca Lindholm
Luca Lindholm

Reputation: 821

If I am not mistaken, what you are talking about is the default behaviour of ListViewItem and GridViewItem.

You can modify it just by applying a simple Style to the GridView:

<GridView.Style>
    <Style TargetType="GridViewItem">
         <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
         <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    </Style>
</GridView.Style>

Best regards

Upvotes: 0

Little doe
Little doe

Reputation: 184

If you really just want to extend the gridview, then you can change Gridview's default ItemsPanel to use ItemsStackPanel instead of ItemsWrapGrid as this solution provided

<GridView ... >
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsStackPanel />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>

but your content will look like this instead.

Preview of the code Based on your code, I'm guessing you don't want it to be aligned like that. Just add this line will also fix the problem above

<GridView.ItemContainerStyle>
    <Style TargetType="GridViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>
</GridView.ItemContainerStyle>

Preview of the code

Upvotes: 1

Related Questions