ListView ItemTemplate Grid 100% Width

0
votes

I have made an ListView ItemTemplate and I want it to be responsive (when orientation changes, for example, the listView item changes in size). I am using a Grid as a control for the inner elements of the grid but it is not behaving. The ListView.ItemContainerStyle has property HorizontalAlignment="Stretch" which is the behaviour I want, and the ItemContainerStyle is the correct width. Inside the Border and Grid I have the same HorizontalAlignment="Stretch" and they are overflowing when the TextBox contained inside has lots of text, and when there is little or no text in the TextBox the Border element shrinks to be smaller than the ItemContainerStyle is showing.

<ListView ItemsSource="{Binding TileStories}" x:Name="cont" Margin="0,10,0,10" Background="{StaticResource CustomResourceBrush}" BorderBrush="{StaticResource CustomResourceBrush}" Foreground="{StaticResource CustomResourceBrush}">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="Margin" Value="20,10,20,10" />
                <Setter Property="Foreground" Value="{StaticResource BTVioletBrush}" />
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Border CornerRadius="20" BorderThickness="0" Width="{Binding ScrollViewerWidth}" Background="White" HorizontalAlignment="Stretch">
                    <StackPanel Height="160" Orientation="Horizontal">
                        <Grid Background="black">
                            <TextBox Text="Example">
                        </Grid>
                    </StackPanel>
                </Border>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
4
xamlresponsive-designuser-controlswindows-phone-8.1
Isn't this a duplicate of this question? Have you tried to set HorizontalContentAlignment? – Romasz
That fixed part of the problem - the white background for the "border" is now behaving properly but the grid (if I remove the fixed width) should be bound by the width of the border and it's overflowing to the right because of the textbox. – Josh Brass
I have just edited the code to simplify the problem but am still getting the same error. – Josh Brass
Can you share a sample minimal project with the issue? – Romasz

4 Answers

1
votes

Just do this

<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
    <DataTemplate>
        <Grid HorizontalAlignment="Stretch">
        </Grid>
    </DataTemplate>
</ListView.ItemTemplate>
0
votes

Define MinHeight as 0 for ItemContainerStyle

0
votes

Add to your ItemContainerStyle

            <Setter Property="HorizontalContentAlignment"
                    Value="Stretch" />

And I think Width="{Binding ScrollViewerWidth}" is not required. You can remove this.

0
votes

I didn't exactly find a solution but I did find a workaround. The Grid was being bound with Width="0" if I used {Binding ActualWidth, ElementName=StackPanel, Mode=OneWay} where StackPanel was the panel within the data template. I was poking around the designer in VS2013 and figured out that the Width was 0 because (I am assuming) the items in the data template are drawn one by one and therefore the Width was zero when the first template was drawn and so on and so forth. I haven't explained that very well I guess, but the important thing is the solution:

<PivotItem x:Name="Feed">
    ....
    <Border CornerRadius="20" BorderThickness="0" Background="White" HorizontalAlignment="Stretch">
        <StackPanel Height="160" Orientation="Horizontal">
            <Grid HorizontalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=Feed, Mode=OneWay}">
            ........
            </Grid>
        </StackPanel>
    </Border>
...
</PivotItem>

I think that the PivotItem having a non-variable Width meant the Grid had a concrete Width to inherit from.