How can I stretch my custom ListBox? - xaml

Question

I have this ListBox with custom elements and I want them to stretch to take all the available area. This is my code; currently the items only take the space that they need and I have some unused space on the left and the right side of the screen. Why?
<ListBox x:Name="listBox" Margin="0,6,0,0">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<local:ListTemplateSelector Content="{Binding}">
<local:ListTemplateSelector.bloccato>
<DataTemplate>
<StackPanel Grid.Row="1">
<Grid Background="Beige">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="/Assets/Images/locked.png" Width="40" Height="40" HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1" Text="{Binding nomePacchetto}" FontFamily="./Assets/neo-normal.ttf#NEOTERIC" FontSize="48" VerticalAlignment="Bottom" Foreground="#FF373737"/>
</Grid>
<Line Stroke="DarkGray" X2="400" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,6,0,6"/>
</StackPanel>
</DataTemplate>
</local:ListTemplateSelector.bloccato>
<local:ListTemplateSelector.sbloccato>
<DataTemplate>
<StackPanel Grid.Row="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="left" Foreground="#FF5B5B5B"><Run FontSize="32" Text="1/"/> <Run FontSize="20" Text="40"/></TextBlock>
<TextBlock Grid.Column="1" Text="{Binding nomePacchetto}" FontFamily="./Assets/neo-normal.ttf#NEOTERIC" FontSize="48" VerticalAlignment="Bottom" Foreground="#FF373737"/>
</Grid>
<Line Stroke="DarkGray" X2="400" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,6,0,6"/>
</StackPanel>
</DataTemplate>
</local:ListTemplateSelector.sbloccato>
</local:ListTemplateSelector>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Answer 1

There are two ways to solve this problem:
(1)
The easiest way is giving fixed width to your root grid in datatemplate. Though you'll provide fixed width, it will be resolution responsive.
Check this example:
// XAML page
<ListBox x:Name="lbxTest" Margin="12">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="Blue" Width="370" >
<TextBlock Text="{Binding}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
If you write your code behind like this:
List<string> lstString = new List<string>() { "string 1", "string 2", "string 3" };
lbxTest.ItemsSource = lstString;
Then in every resolution (480x800, 720x1280, 768x1280, 1080x1920), the size obtained by ListBox will be same.
check the screenshots for refference.
screenshot in 480x800
screenshot in 768x1280
(2)
The other way to solve this problem is adding one parameter in the ItemSource we'll be assigning to the ListBox.
<ListBox x:Name="lbxTest" Margin="12">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="Blue" Width="{Binding width}" >
<!--Width="370"-->
<TextBlock Text="{Binding text}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
// code behind
public class Model
{
public double width { get; set; }
public string text { get; set; }
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
Model m1 = new Model()
{
text = "string 1",
width = lbxTest.ActualWidth
};
Model m2 = new Model()
{
text = "string 2",
width = lbxTest.ActualWidth
};
List<Model> lstModel = new List<Model>();
lstModel.Add(m1);
lstModel.Add(m2);
lbxTest.ItemsSource = lstModel;
}
Hope this will help..!!

Answer 2

There are two properties that should work but they do not (HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch")
To solve that this example will help you with the witdh:
<ListBox x:Name="ListBoxInstance" HorizontalAlignment="Stretch" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="Green" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=ListBoxInstance, Mode=OneWay}" >
<Border Background="Red" >
<TextBlock Text="{Binding}"/>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.Items>
<x:String>This is a test</x:String>
<x:String>This is the second</x:String>
<x:String>This is the thidr</x:String>
<x:String>s</x:String>
</ListBox.Items>
</ListBox>
As you see with
Width="{Binding ActualWidth, ElementName=ListBoxInstance}"
You have the content to the full width.
In some others cases (depending on the platform)
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>