locked
Grid not taking full width in Listbox in large device

    Question

  • I am trying to create a listbox in which grid takes the full width of the device automatically and adjusts accordingly. But earlier it was not taking the full width and now it has stopped viewing items.

    Here is my code

    <ListBox Name="costList" HorizontalContentAlignment="Stretch" Grid.Row="2" Height="400" ItemContainerStyle="{StaticResource ListBoxItemStyle1}">
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <Grid HorizontalAlignment="Stretch" Background="Black">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="1*"/>
                                                    <ColumnDefinition Width="1*"/>
                                                    <ColumnDefinition Width="0.3*"/>
                                                    <ColumnDefinition Width="1*"/>
                                                    <ColumnDefinition Width="1*"/>
                                                </Grid.ColumnDefinitions>
                                                <TextBlock Grid.Row="1" Grid.Column="0" Text="Groceries" Style="{StaticResource Content_Text}" Padding="2,0" Foreground="Black" Width="Auto" Height="Auto" HorizontalAlignment="Center" FontSize="16" VerticalAlignment="Center" Margin="2"/>
                                                <Image Grid.Row="1" Grid.Column="1" MaxHeight="35" MaxWidth="100" Stretch="Fill" Source="/Images/around_me_btm_img.png"/>
                                                <TextBlock Grid.Row="1" Grid.Column="1" Text="$" Style="{StaticResource Content_Text}" Padding="2,0" Foreground="Black" Width="15" Height="24" HorizontalAlignment="Left" FontSize="22" Margin="2,4,0,10"/>
                                                <TextBox Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" InputScope="Number" MaxLength="6" PlaceholderText="0.0" Background="Transparent" BorderBrush="Transparent" Padding="0,0,2,0" Width="60" Height="10" VerticalAlignment="Center" FlowDirection="RightToLeft" Foreground="Black" Margin="20,0,0,0" BorderThickness="0"/>
                                                <TextBlock Grid.Row="1" Grid.Column="2" Text="2%" VerticalAlignment="Center" Foreground="Black" TextAlignment="Center" Padding="0" Width="Auto" FontSize="16"/>
                                                <Image Grid.Row="1" Grid.Column="3" MaxHeight="35" MaxWidth="100" Stretch="Fill" Source="/Images/around_me_btm_img.png"/>
                                                <TextBlock Grid.Row="1" IsHitTestVisible="False" Grid.Column="3" Text="$" Style="{StaticResource Content_Text}" Padding="2,0" Foreground="Black" Width="15" Height="24" HorizontalAlignment="Left" FontSize="22" Margin="2,4,0,10"/>
                                                <TextBox Grid.Row="1" Grid.Column="3" IsHitTestVisible="False" HorizontalAlignment="Left" InputScope="Number" MaxLength="6"  PlaceholderText="0.0" Background="Transparent" BorderBrush="Transparent" Padding="0,0,2,0" Width="60" Height="10" VerticalAlignment="Center" FlowDirection="RightToLeft" Foreground="Black" Margin="20,0,0,0" BorderThickness="0"/>
                                                <Image Grid.Row="1" Grid.Column="4" MaxHeight="35" MaxWidth="100" Stretch="Fill" Source="/Images/around_me_btm_img.png"/>
                                                <TextBlock Grid.Row="1" Grid.Column="4" Text="$" Style="{StaticResource Content_Text}" Padding="2,0" Foreground="Black" Width="15" Height="24" HorizontalAlignment="Left" FontSize="22" Margin="2,4,0,10"/>
                                                <TextBox Grid.Row="1" IsHitTestVisible="False" Grid.Column="4" HorizontalAlignment="Left" InputScope="Number" MaxLength="6"  PlaceholderText="0.0" Background="Transparent" BorderBrush="Transparent" Padding="0,0,2,0" Width="60" Height="10" VerticalAlignment="Center" FlowDirection="RightToLeft" Foreground="Black" Margin="20,0,0,0" BorderThickness="0"/>
                                            </Grid>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>                            
                                </ListBox>

    List<string> demoList = new List<string>();
                for (int i = 0; i < 5; i++)
                {
                    demoList.Add("Hello");
                }
                costList.ItemsSource = demoList;

    Here demolist is just for testing purpose because I want to bind the textblock on leftmost column to it. Can somebody help?

    Tuesday, February 24, 2015 1:15 PM

Answers

  • Hi RohitrkKumar,

    You’ve not posted the definition of ItemContainerStyle, so I used the default one with your code. I could see the item of ListBox control taking the full width of screen. I tested using snapped view and it worked fine.

    Please try and let me know the result. If you still cannot make it working, please post more information about your scenario.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

    • Marked as answer by RohitrkKUmar Wednesday, February 25, 2015 6:30 AM
    Wednesday, February 25, 2015 3:34 AM
    Moderator