【问题标题】:How can I stretch my custom ListBox?如何拉伸我的自定义 ListBox?
【发布时间】:2015-04-13 08:20:44
【问题描述】:

我有这个带有自定义元素的 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>

【问题讨论】:

  • 您可以阅读此答案寻求帮助:stackoverflow.com/questions/2927785/…
  • @xmashallax 这与停靠面板“填充剩余空间”功能无关,操作已明确表示剩余空间位于列表框项目的左侧和右侧。

标签: xaml windows-phone-8 listbox


【解决方案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;
    }

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

【讨论】:

  • 在每个解决方案中使用固定大小解决了我的问题!比我想象的要容易!谢谢!!
【解决方案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>

【讨论】:

  • 当我将此属性应用于列表元素时,它变为空白......也许在那一刻 ActualWidth 设置为零。
  • 是的,您需要将 StackPanel 替换为 Grid over
  • 这不起作用,没有 StackPanel,这是我的 DataTemplate:网格>这有什么问题? :\
  • ListBox Horizo​​ntalAlignment="Stretch" 你改了吗?
  • 您可以在此处添加该背景,看看效果如何?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-02-27
  • 2017-02-26
  • 2010-10-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多