列表框中的 ListBoxItem 未完全拉伸到屏幕宽度

Posted 2023-04-12

【中文标题】列表框中的 ListBoxItem 未完全拉伸到屏幕宽度

【英文标题】：ListBoxItem inside a listbox not stretching completly to screen width

【发布时间】：2017-02-14 21:48:00

【问题描述】：

 <Grid Name="FavouriteStations" Visibility="Visible" >
    <ListBox  Name="FavouriteStationsListBox"   ItemsSource="Binding" Loaded="FavouriteStationsListBoxLoaded"  >
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            </Style>
        </ListBox.ItemContainerStyle>

        <ListBox.ItemTemplate>
            <DataTemplate>
                <local:StationTemplateSelector Content="Binding">
                    <local:StationTemplateSelector.St>
                        <DataTemplate>
                            <Grid  MinHeight="150" MinWidth="480" Background="#242224"  >

                            </Grid>
                        </DataTemplate>
                    </local:StationTemplateSelector.St>
                    <local:StationTemplateSelector.Ad>
                        <DataTemplate>
                            <Grid  MinHeight="150" MinWidth="480" Background="#FFFFFF"  >

                            </Grid>
                        </DataTemplate>
                    </local:StationTemplateSelector.Ad>
                </local:StationTemplateSelector>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

我有一个带有多个数据模板的listbox。纵向方向很好，但是当我将其更改为横向时，listboxitem 高度自动设置为MinHeight，宽度自动设置为MinWidth，但我想要宽度与屏幕宽度相同我尝试了以下

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

但是ListBoxItem 具有相同的宽度和高度，我看到的唯一区别是它与屏幕中心对齐。我该如何解决这个问题？

【参考方案1】：

好的，我找到了解决方案。该问题是由DataTemplateSelector 引起的，您必须在<phone:PhoneApplicationPage.Resources> 部分中为您正在使用的DataTemplateSelector(StationTemplateSelector) 设置Template 值才能使其正常工作。

<phone:PhoneApplicationPage.Resources>
<Style TargetType="local:StationTemplateSelector">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="local:StationTemplateSelector">
                        <ContentPresenter ContentTemplate="TemplateBinding ContentTemplate" Content="TemplateBinding Content" Margin="TemplateBinding Padding" VerticalAlignment="TemplateBinding VerticalContentAlignment"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
</Style>

还需要在ListBox 控件中设置ItemContainerStyle

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