difficultés de mise en page dans ListBoxItem ContentPresenter Modèle

Question

Bonjour,

Je suis un peuplant objets withe ListBox de port et j'utilise un ItemContainerStyle pour définir la façon dont je veux que les éléments affichés. Tout fonctionne bien à une exception près.

Le modèle utilise une grille à l'intérieur de deux bordures. La grille a 7 colonnes, la dernière est spécifiée pour contenir une bordure qui finira par être une gemme brillante pour désigner l'actif (pas nécessairement le paquet sélectionné). Le modèle est défini pour s'étendre à la largeur de la zone de liste. Et je ne peux pas comprendre comment obtenir la gemme à aligner sur le côté droit du conteneur. Ci-dessous le XAML:

<Border Background="#FFFFB78F" Margin="-2,0,0,0"> 
<Border BorderBrush="#FF636363" BorderThickness="1" CornerRadius="8" Margin="0,2"> 
    <Border.Background> 
     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
      <GradientStop Color="#FFFFCCB0" Offset="0"/> 
      <GradientStop Color="#FFFFCCB0" Offset="1"/> 
      <GradientStop Color="#FFFCE8DD" Offset="0.5"/> 
     </LinearGradientBrush> 
    </Border.Background> 
    <Grid Margin="6,0,0,0" ScrollViewer.VerticalScrollBarVisibility="Disabled" ShowGridLines="True"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="60" x:Name="Image"/> 
      <ColumnDefinition Width="150" x:Name="Names"/> 
      <ColumnDefinition Width="120" x:Name="Address"/> 
      <ColumnDefinition Width="120" x:Name="Dates"/> 
      <ColumnDefinition Width="200" x:Name="OtherInfo"/> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="30"/> 
     </Grid.ColumnDefinitions> 
     <Image x:Name="CarrierImage" Grid.Column="0" Margin="7,0" Height="45" Width="50"/> 
     <StackPanel Grid.Column="1" Margin="4,4,4,0"> 
     </StackPanel> 
     <StackPanel Grid.Column="2" Margin="4,4,4,0"> 
      <StackPanel Orientation="Horizontal"> 
      </StackPanel> 
     </StackPanel> 
     <StackPanel Grid.Column="3" Margin="4,4,4,0"> 
     </StackPanel> 
     <StackPanel Grid.Column="4" Margin="4,4,4,0"> 
     </StackPanel> 
      <!-- Gem --> 
     <Border HorizontalAlignment="Right" Margin="0,8,5,7" Width="15" Height="Auto" BorderBrush="Black" BorderThickness="1" CornerRadius="5" Grid.Column="6" d:LayoutOverrides="GridBox"> 
      <Border.Background> 
       <RadialGradientBrush> 
        <GradientStop Color="#FF760000" Offset="1"/> 
        <GradientStop Color="Red"/> 
        <GradientStop Color="#FEFF0000" Offset="0.15"/> 
       </RadialGradientBrush> 
      </Border.Background> 
     </Border> 
     <Grid Margin="0,0,-298.067,0" VerticalAlignment="Top" Height="13.277" Grid.Column="6" > 
     </Grid> 
    </Grid> 
</Border> 

La frontière Gem est vers le bas. Initialement, j'ai créé la grille contenant avec une colonne définie sur Auto dans l'espoir qu'elle remplisse l'espace restant, en poussant la dernière colonne sur le bord droit, mais les colonnes de la grille ne fonctionnent pas vraiment de cette façon. J'ai également essayé de mettre un bloc de texte caché rempli de caractères espace là-dedans pour essayer de l'agrandir (en espérant qu'il continuerait à se contraindre à la largeur des listes, également en vain.)

Je suis à perte. toute aide serait grandement appréciée.

Cory

Answer 1

étendre à l'espace restant, vous avez besoin d'une colonne définie à la largeur = « * ». Auto indique que la colonne doit taille pour adapter son contenu, où * indique que

Sans voir le reste de votre XAML, je m'attends à ce que vous L'alignement gauche par défaut pour vos ListBoxItems, donc juste la largeur * vous donnera le même comportement. Vous pouvez corriger cela en définissant HorizontalContentAlignment = "Stretch" sur le ListBox parent (sauf si vous avez d'autres choses en cours avec votre mise en page ListBox pas montré ici).

Answer 2

Eh bien, vous pouvez mettre la grille dans une autre grille, et ajouter Gem à la grille extérieure, avec HorizontalAlignment="Right". E.g .:

<Border Background="#FFFFB78F" Margin="-2,0,0,0"> 
    <Border BorderBrush="#FF636363" BorderThickness="1" CornerRadius="8" Margin="0,2"> 
    <Border.Background> 
     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
      <GradientStop Color="#FFFFCCB0" Offset="0"/> 
      <GradientStop Color="#FFFFCCB0" Offset="1"/> 
      <GradientStop Color="#FFFCE8DD" Offset="0.5"/> 
     </LinearGradientBrush> 
    </Border.Background> 
    <Grid> 
    <Grid Margin="6,0,0,0" ScrollViewer.VerticalScrollBarVisibility="Disabled" ShowGridLines="True"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="60" x:Name="Image"/> 
      <ColumnDefinition Width="150" x:Name="Names"/> 
      <ColumnDefinition Width="120" x:Name="Address"/> 
      <ColumnDefinition Width="120" x:Name="Dates"/> 
      <ColumnDefinition Width="200" x:Name="OtherInfo"/> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="30"/> 
     </Grid.ColumnDefinitions> 
     <Image x:Name="CarrierImage" Grid.Column="0" Margin="7,0" Height="45" Width="50"/> 
     <StackPanel Grid.Column="1" Margin="4,4,4,0"> 
     </StackPanel> 
     <StackPanel Grid.Column="2" Margin="4,4,4,0"> 
      <StackPanel Orientation="Horizontal"> 
      </StackPanel> 
     </StackPanel> 
     <StackPanel Grid.Column="3" Margin="4,4,4,0"> 
     </StackPanel> 
     <StackPanel Grid.Column="4" Margin="4,4,4,0"> 
     </StackPanel> 
     </Grid> 
        <!-- Gem --> 
     <Border HorizontalAlignment="Right" Margin="0,8,5,7" Width="15" Height="Auto" BorderBrush="Black" BorderThickness="1" CornerRadius="5" Grid.Column="6" > 
      <Border.Background> 
       <RadialGradientBrush> 
        <GradientStop Color="#FF760000" Offset="1"/> 
        <GradientStop Color="Red"/> 
        <GradientStop Color="#FEFF0000" Offset="0.15"/> 
       </RadialGradientBrush> 
      </Border.Background> 
     </Border> 
    </Grid> 
</Border> 
</Border> 

Mais je suis sûr qu'il existe de nombreuses autres façons d'améliorer ce XAML. Peut-être que si vous nous donnez une image, nous pourrions donner une meilleure solution? Une image vaut cent mots, vous savez:) ...

Cheers, Anvaka.