Ajustement du template ListBox nécessaire pour l'étirement horizontal des éléments de la listbox

Question

J'essaye d'utiliser un DataTemplate pour ListBox.ItemTemplate pour une simple liste TODO.

Le modèle de chaque ListBoxItem est une grille et je souhaite que le contenu de ma 2ème colonne étire la largeur restante de la zone de liste. Aucune quantité de HorizontalAlignment="Stretch" etc. semble faire l'affaire et je pense que je dois modifier le modèle. J'ai regardé le modèle Xaml extrait ListBox mais je ne vois pas ce que j'ai besoin de changer.

Dans cet exemple XAML, vous pouvez voir une boîte verte censée étirer la largeur restante de l'élément listbox, mais ce n'est pas le cas.

Dans XamlPad/WPF, ce code est rendu comme prévu.
Dans Silverlight, la boîte ne s'étire pas.

<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

Le premier ColumnDefinition est défini comme automatique, mais la propriété largeur de la première TextBlock (URGENT) ne soit pas affecté. Que se passe-t-il lorsque vous affectez une valeur ou que vous modifiez ColumnDefinition.Width en une valeur fixe?

Answer 2

Vous pouvez obtenir ce que vous voulez en définissant un ItemContainerStyle pour votre ListBox:

<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> 

Et puis utilisez ce style dans votre zone de liste comme ceci:

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

Dans ce que vous essayez de faire , le problème est que la largeur de votre grille n'est pas équivalente à l'élément de la liste.

Answer 3

Le problème est la grille dans le DataTemplate, si vous augmentez sa taille, vous commencerez à voir que la frontière se développe avec lui.