Shrink ListBox sur la sélection d'articles

Question

J'ai une liste qui utilise un datatemplate. Ce dont j'ai besoin, c'est d'un moyen après la sélection de l'élément Je veux rétrécir la listbox elle-même, pas la listitem à l'intérieur. J'ai essayé le eventtrigger sur le selector.selected et non sélectionné mais il ne se déclenche pas. Je mets aussi un datatrigger sur le datatemplate mais je ne peux pas accéder à la listbox d'ici. Des idées?

Answer 1

Ceci est une solution légèrement indirecte, mais ... vous pouvez gérer cela en plaçant un DataTrigger sur le ListBox lui-même, et en le liant au SelectedItems.Count. Vous devrez avoir le ListBox par défaut à son aspect "plus petit". Ensuite, le déclencheur va vérifier si SelectedItems.Count est 0, et si c'est le cas, il doit faire le ListBox plus grand. Dans l'exemple suivant, je définis le ListBox.Background pour plus de simplicité, mais vous devriez pouvoir l'adapter pour opérer sur LayoutTransform ou RenderTransform ou Width/Height ou tout ce que vous utilisez pour "réduire" le ListBox:

<ListBox.Style> 
    <Style TargetType="ListBox"> 
    <Style.Triggers> 
     <DataTrigger Binding="{Binding SelectedItems.Count, RelativeSource={RelativeSource Self}}" Value="0"> 
     <Setter Property="Background" Value="Orange" /> 
     </DataTrigger> 
    </Style.Triggers> 
    </Style> 
</ListBox.Style> 

Évidemment, cela rétrécira (ou, dans mon exemple simplifié, deviendra blanc) toute la ListBox quand quelque chose est sélectionné. Pour que le ListBoxItem sélectionné reste en taille réelle, utilisez le ListBox.ItemContainerStyle. Dans ce cas, vous pouvez déclencher sur IsSelected et appliquer un setter approprié pour inverser la transformation "shrinking" - par ex. appliquer une marge négative, ou l'inverse ScaleTransform. (Un déclencheur normal faire pour cela.)

Answer 2

Tout d'abord, l'événement correct crochet est SelectionChanged pas Selected, d'autre part, vous pouvez utiliser un Storyboard au niveau de la fenêtre:

Le Storyboard:

<Storyboard x:Key="Storyboard1"> 
    <DoubleAnimationUsingKeyFrames 
     BeginTime="00:00:00" 
     Storyboard.TargetName="grid" 
     Storyboard.TargetProperty="(FrameworkElement.Height)"> 
     <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/> 
    </DoubleAnimationUsingKeyFrames> 
</Storyboard> 

le déclencheur de la fenêtre:

<Window.Triggers> 
    <EventTrigger RoutedEvent="Selector.SelectionChanged" SourceName="listBox"> 
     <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/> 
    </EventTrigger> 
</Window.Triggers> 

Et le ListBox (avec quelques decorati ons for effect):

<Border 
    BorderThickness="2" 
    CornerRadius="3" 
    BorderBrush="#FF000000" 
    Padding="3" 
    VerticalAlignment="Top"> 
    <Grid Height="200" x:Name="grid"> 
     <ListBox x:Name="listBox" Height="200"> 
      <ListBoxItem Content="ListBoxItem"/> 
      <ListBoxItem Content="ListBoxItem"/> 
      <ListBoxItem Content="ListBoxItem"/> 
      <ListBoxItem Content="ListBoxItem"/> 
     </ListBox> 
    </Grid> 
</Border>