列表框項目的水平拉伸所需的模板調整

Question

我想爲ListBox.ItemTemplate使用DataTemplate作爲簡單的待辦事項列表。

每個ListBoxItem的模板是一個網格，我希望我的第二列的內容能夠展開列表框的剩餘寬度。沒有數額HorizontalAlignment="Stretch"等等似乎做了詭計，我想我需要修改模板。我看過提取的Xaml模板的ListBox，但看不到我需要更改的內容。

在這個XAML示例中，您可以看到一個應該展開listboxitem的剩餘寬度的綠框，但沒有。

在XamlPad/WPF中，此代碼實際上按預期呈現。
在Silverlight中，儘管盒子不會伸展。

<ListBox Width="360" Height="150" HorizontalContentAlignment="Stretch"> 
      <ListBox.ItemTemplate> 
       <DataTemplate> 
          <Grid Margin="3,0,3,0" HorizontalAlignment="Stretch"> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="Auto" /> 
            <ColumnDefinition Width="*" /> 
           </Grid.ColumnDefinitions> 
           <TextBlock Text="URGENT" Foreground="Red" Margin="5,0,10,0" Grid.Column="0" VerticalAlignment="Center"/> 
           <Border BorderBrush="Green" BorderThickness="1" Grid.Column="1" HorizontalAlignment="Stretch" Margin="0,2"> 
            <TextBlock Margin="5,2" Text="{Binding}" FontWeight="Bold" /> 
           </Border> 
          </Grid> 
       </DataTemplate> 
     </ListBox.ItemTemplate> 

      <s:String>Take out trash</s:String> 
      <s:String>Clean car</s:String> 
      <s:String>Finish TODO list program</s:String> 
      <s:String>Sleep</s:String> 

     </ListBox> 

Answer 1

第一個ColumnDefinition被定義爲Auto，但第一個TextBlock（URGENT）的Width屬性未被賦值。當您分配一個值或將ColumnDefinition.Width更改爲固定值時會發生什麼？

Answer 2

你可以達到你想要的東西通過定義ItemContainerStyle爲您的列表框：

<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}"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="MouseOver"> 
            <Storyboard> 
             <DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="SelectionStates"> 
           <VisualState x:Name="Unselected"/> 
           <VisualState x:Name="Selected"> 
            <Storyboard> 
             <DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="FocusStates"> 
           <VisualState x:Name="Focused"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement"> 
              <DiscreteObjectKeyFrame KeyTime="0"> 
               <DiscreteObjectKeyFrame.Value> 
                <Visibility>Visible</Visibility> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Unfocused"/> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
          <Grid HorizontalAlignment="Stretch" Margin="3,0,3,0"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="Auto" /> 
          <ColumnDefinition Width="*" /> 
         </Grid.ColumnDefinitions> 
         <TextBlock Text="URGENT" Foreground="Red" Margin="5,0,10,0" Grid.Column="0" VerticalAlignment="Center"/> 
         <Border BorderBrush="Green" BorderThickness="1" Grid.Column="1" HorizontalAlignment="Stretch" Margin="0,2"> 
          <TextBlock Margin="5,2" Text="{Binding}" FontWeight="Bold" /> 
         </Border> 
        </Grid> 
         <Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/> 
         <Rectangle x:Name="fillColor2" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/> 

         <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

然後使用這種風格在你的列表框這樣的：

<ListBox Width="360" Height="150" x:Name="lb" HorizontalContentAlignment="Stretch" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" /> 

在你正在嘗試做的，問題是您的網格寬度不等於列表框項目。

Answer 3

問題是DataTemplate中的網格，如果你增加它的大小，你會開始看到邊框隨它增長。