Fatal编程技术网
  • silverlight/
  • Silverlight 3:ListBox数据模板水平对齐

Silverlight 3:ListBox数据模板水平对齐

silverlight

Silverlight 3:ListBox数据模板水平对齐,silverlight,listbox,datatemplate,controltemplate,Silverlight,Listbox,Datatemplate,Controltemplate,我有一个列表框，它的ItemTemplate绑定到DataTemplate。我的问题是我不能让模板中的元素拉伸到列表框的全宽 <ListBox x:Name="listPeople" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0,0,0,0" Background="{x:Null}" SelectionMode="Extended" Grid.Row="1" ItemTempla

我有一个列表框，它的ItemTemplate绑定到DataTemplate。我的问题是我不能让模板中的元素拉伸到列表框的全宽

<ListBox x:Name="listPeople" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
    Margin="0,0,0,0" Background="{x:Null}" SelectionMode="Extended" Grid.Row="1" 
    ItemTemplate="{StaticResource PersonViewModel.BrowserDataTemplate}" 
    ItemsSource="{Binding Mode=OneWay, Path=SearchResults}" >
</ListBox>

<DataTemplate x:Key="PersonViewModel.BrowserDataTemplate">
   <ListBoxItem HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
     <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5,5,5,5">
       <Border Opacity=".1" x:Name="itemBorder"  Background="#FF000000"   
         HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
         CornerRadius="5,5,5,5" MinWidth="100" Height="50"/>
      </Grid>
   </ListBoxItem>
</DataTemplate>
如您所见，我在网格中添加了一个边框，以指示模板的宽度。我的目标是看到这个边框扩展到列表框的全宽。目前，它的宽度是由它的内容或MinWidth决定的，这是目前唯一能让它保持可见的东西。

我在这里注意到了两件事，因为我遇到了同样的问题，无法以您尝试的方式解决它

首先，不需要在DataTemplate中显式放置ListBoxItem。这是为您自动创建的，因此实际上您的ListBoxItem位于为您创建的ListBoxItem中。我签了这个来确认

其次，我不知道确切的原因，但我也无法从对齐属性中获得拉伸行为。我将其更改为对包含ListBoxItem的ActualWidth属性的Width属性使用RelativeSource绑定。这对我有用

Width="{Binding RelativeSource={RelativeSource 
   AncestorType={x:Type ListBoxItem}}, Path=ActualWidth}"
如果需要在为您隐式创建的ListBoxItem上设置样式属性，请在ListBox.ItemContainerStyle元素内使用样式元素

希望这有助于…

在为ListBox创建数据模板时，您不应该包含
。DataTemplate的内容将放置在生成的容器中。您可以使用ItemContainerStyle控制容器的构造方式

默认情况下，ListBoxItem的默认控件样式用于定义ItemContainerStyle。此样式将ListBoxItem.HorizontalContentAlignment属性设置为“Left”。请注意ContentPresenter是如何将其HorizontalAlignment绑定到此属性的

您需要覆盖绑定到ListBox时生成的ListBoxItem容器的样式。这可以通过设置ItemContainerStyle来完成。将HorizontalContentAlignment属性设置为“拉伸”

下面是默认的ListBoxItem样式。包括以供参考

<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
            <Setter Property="Padding" Value="3"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="TabNavigation" Value="Local"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid Background="{TemplateBinding Background}">
                            <!-- VSM excluded for readability -->
                            <Rectangle x:Name="fillColor" Fill="#FFBADDE9" RadiusX="1" RadiusY="1" IsHitTestVisible="False" Opacity="0"/>
                            <Rectangle x:Name="fillColor2" Fill="#FFBADDE9" RadiusX="1" RadiusY="1" IsHitTestVisible="False" Opacity="0"/>
                            <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                            <Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="1" RadiusY="1" Visibility="Collapsed"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
我花了一个小时试图解决这个问题。非常非常沮丧。不必覆盖ListBoxItem的整个默认样式。我没法让它工作。最后，我解决了这个问题，只需覆盖我的列表框中的HorizontalContentAlignment属性。ItemContainerStyle部分，例如：

            <ListBox x:Name="ClassList" ItemsSource="{Binding LineClasses}"
                     ScrollViewer.VerticalScrollBarVisibility="Visible"
                     SelectionMode="Extended"
                     ScrollViewer.HorizontalScrollBarVisibility="Hidden" HorizontalContentAlignment="Stretch"
                     HorizontalAlignment="Stretch" Loaded="ClassList_Loaded"
                     VerticalAlignment="Stretch" Grid.Row="0">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                    </Style>
                </ListBox.ItemContainerStyle>
                    <ListBox.ItemTemplate>

                    <DataTemplate>
                        <Border BorderBrush="Black" CornerRadius="3" Background="#FFE88D34"
                            BorderThickness="1" HorizontalAlignment="Stretch" >
                            <Grid Background="Transparent" HorizontalAlignment="Stretch" >
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <TextBlock 
                                    Grid.Column="0" HorizontalAlignment="Stretch"
                                    Margin="2"                                   
                                    FontSize="10"
                                    Text="{Binding DisplayClassNm}"/>
                            </Grid>

                        </Border>
                    </DataTemplate>
                </ListBox.ItemTemplate>
这对我来说是一种享受

Myles是将控件模板和数据模板用于listbox控件的一个示例。请参阅显示listbox项边框的XAML标记。

我的ListBoxItem包含一个复选框，而上述解决方案对我不起作用（很可能是由于复选框的性质，而不是那些解决方案），我可以通过不绑定复选框的“内容”属性强制此功能，但明确定义XAML内联：

<CheckBox HorizontalAlignment="Stretch" IsChecked="{Binding Path=IsSelected, Mode=TwoWay}">
    <TextBlock
        MinWidth="130"
        Margin="0,-2,0,0"
        HorizontalAlignment="Stretch"
        Text="{Binding Path=DisplayText}" />
</CheckBox>
需要边距，因为文本框文本未与复选框的复选标记对齐。MinWidth也是必要的。

我正在使用VS 2012的Silverlight 5。我也有同样的问题。我有一个水平列表框，其中有我自己的自定义对象作为ItemsSource。我希望列表框项目展开。但它们并没有扩张。我不想为每个列表框项目提供任何硬编码宽度。我在这里尝试了所有的答案，但都不起作用。我刚刚给了ItemsSource={Binding Persons}DisplayMemberPath=“First Name”。仅此而已

我确信这之前已经出现过，因此我应该知道答案，但是：Silverlight的列表框是否具有HorizontalContentAlignment属性？如果是这样，那就是您要设置为“拉伸”的。您需要将ListBoxItem而不是ListBox上的HorizontalContentAlignment属性设置为“拉伸”。我不相信在Silverlight中可以使用RelativeSource。您是对的……我没有想到这一点。不过，您可以在SL3中进行元素到元素的绑定，所以只需将网格的宽度绑定到列表框的实际宽度，等等。如果由于填充或类似的原因，网格的宽度有点过大，您可以使用IValueConverter来修复它。您有更多的示例代码吗。我使用的是WPF，我有一个列表框设置，其中DataTemplate配置了网格。我还有一个ListBox.ItemContainerStyle设置，模板和HorizontalContentAlignment设置为Stretch，但是这并不能解决这个问题。我希望我可以像上面的示例代码一样将相对绑定放置到实际宽度。我尝试使用ListBox.ItemContainerStyle设置宽度，但没有成功。谢谢！这正是我需要的！台词：。。。为我工作，干净简单…我不主张覆盖ListBoxItem的整个控件模板。在我的回答中，我给出了与您完全相同的指导：“在列表框的ItemContainerStyle上设置HorizontalContentAlignment属性”。我只是提供了更多关于为什么和H的机制的信息