如何拉伸自定义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

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

要解决此示例将帮助您使用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>

正如您所见

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

您的内容为全宽。

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

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

Answer 2

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

<强>（1） 最简单的方法是在datatemplate中为根网格提供固定宽度。虽然您将提供固定宽度，但它将具有分辨率响应。

检查此示例：

       // 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） 解决此问题的另一种方法是在ItemSource中添加一个参数，我们将分配给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;
    }

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