如何拉伸我的自定义 ListBox？

Question

我有这个带有自定义元素的 ListBox，我希望它们伸展以占据所有可用区域。这是我的代码；目前这些项目只占用他们需要的空间，我在屏幕的左侧和右侧有一些未使用的空间。为什么？

<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

有两种方法可以解决这个问题：

(1) 最简单的方法是在数据模板中为您的根网格提供固定宽度。虽然您将提供固定宽度，但它会响应分辨率。

检查这个例子：

       // XAML page
       <ListBox x:Name="lbxTest" Margin="12">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid Background="Blue" Width="370" >
                        <TextBlock Text="{Binding}" />
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

如果你这样写你的代码：

List<string> lstString = new List<string>() { "string 1", "string 2", "string 3" };
lbxTest.ItemsSource = lstString;

那么在每种分辨率下（480x800、720x1280、768x1280、1080x1920），ListBox得到的尺寸都是一样的。

查看截图以供参考。

480x800 屏幕截图

768x1280 屏幕截图

(2) 解决此问题的另一种方法是在我们将分配给 ListBox 的 ItemSource 中添加一个参数。

       <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;
    }

希望这会有所帮助..!!

Answer 2

有两个属性应该起作用，但它们不起作用（Horizo​​ntalContentAlignment="Stretch" VerticalContentAlignment="Stretch"）

为了解决这个问题，这个例子将帮助你理解：

 <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>

如你所见

Width="{Binding ActualWidth, ElementName=ListBoxInstance}"

你的内容是全宽的。

在其他一些情况下（取决于平台）

<ListBox.ItemContainerStyle>
  <Style TargetType="ListBoxItem">
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
  </Style>
  </ListBox.ItemContainerStyle>