2016-07-01 17 views
2

ich letzte Tagen habe Schwierigkeiten folgendes Layout zu erreichen:ListBox Artikel Layout in XAML/WPF

sketch

Ich habe eine ListBox mit Vorlage für jeden Artikel:

  • Etikett immer auf links verankert Seite
  • Etikett immer auf der rechten Seite verankert
  • Label (TextBlock) in der Mitte mit flexibler Größe
  • 3. Etikett unten, so weit dies zu setzen einfachste :)

Hauptproblem in meinem Beispiel ist, dass ich nicht der mittleren Text gemacht kann (das lang sein kann) einzustellen, aber nicht Suffix schieben (rot) beschriften, während ich die Größe von ListBox ändere.

Ich hoffe, dass dieses Layout möglich ist, und dass mir etwas Triviales fehlt.

Interessant ist, dass das erste Beispiel (unten) funktioniert gut "außerhalb" Listbox. Muss ich die Neuausrichtung der Listbox bei der Größenänderung irgendwie erzwingen?

Danke für jede Hilfe.

Ich habe angebracht Balg 2 Beispiele I (neben vielen anderen) versucht:

XAML:

<Window x:Class="WPF_Experiments.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:local="clr-namespace:WPF_Experiments" 
     mc:Ignorable="d" 
     Title="MainWindow" Height="400" Width="400"> 
    <Window.Resources> 
     <DataTemplate x:Key="Template1"> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition /> 
        <ColumnDefinition Width="auto" /> 
        <ColumnDefinition /> 
       </Grid.ColumnDefinitions> 
       <Label Grid.Column="0" Foreground="Blue" Background="Aqua" Content="{Binding Prefix}" /> 
       <Label Grid.Column="1" Content="{Binding Description}" /> 
       <Label Grid.Column="2" Foreground="Magenta" Background="Beige" Content="{Binding Suffix}" /> 
      </Grid> 
     </DataTemplate> 

     <DataTemplate x:Key="Template2"> 
      <DockPanel LastChildFill="True"> 
       <Label Grid.Column="0" Foreground="Blue" Background="Aqua" Content="{Binding Prefix}" /> 
       <Label Grid.Column="2" DockPanel.Dock="Right" Foreground="Magenta" Background="Beige" Content="{Binding Suffix}" /> 
       <TextBlock Grid.Column="1" Text="{Binding Description}" TextTrimming="CharacterEllipsis" /> 
      </DockPanel> 
     </DataTemplate> 
    </Window.Resources> 
    <StackPanel> 
     <ListBox Name="MyListBox" 
       ItemTemplate="{DynamicResource Template2}"/> 
    </StackPanel> 
</Window> 

C#:

namespace WPF_Experiments 
{ 
    class Item 
    { 
     public string Prefix { get; set; } 
     public string Description { get; set; } 
     public string Suffix { get; set; } 
    } 

    /// <summary> 
    /// Interaction logic for MainWindow.xaml 
    /// </summary> 
    public partial class MainWindow : Window 
    { 
     public MainWindow() 
     { 
      InitializeComponent(); 
      List<Item> items = new List<Item>(); 
      items.Add(new Item() { Prefix = "001", Description = "Item 0", Suffix = "cm" }); 
      items.Add(new Item() { Prefix = "002", Description = "This is very long item that maybe will not fit", Suffix = "in" }); 
      items.Add(new Item() { Prefix = "003", Description = "Item 2", Suffix = "m" }); 
      MyListBox.ItemsSource = items; 
     } 
    } 
} 

(Edit) noch einen Versuch mit Stackpanel:

<DataTemplate x:Key="Template3"> 
     <StackPanel Orientation="Horizontal"> 
      <Label Foreground="Blue" Background="Aqua" Content="{Binding Prefix}" /> 
      <TextBlock Text="{Binding Description}" TextTrimming="CharacterEllipsis" /> 
      <Label Foreground="Magenta" Background="Beige" Content="{Binding Suffix}" HorizontalAlignment="Right" /> 
     </StackPanel> 
    </DataTemplate> 
+0

Statt ein Gitter in Ihrem Listbox verwenden versuchen, ein Stackpanel mit –

+0

leider nicht funktioniert (ich habe hinzugefügt Template3 oben). – Bojan

Antwort

3

Sie können dies erreichen, indem das horizontale Scrollen für ListBox zu deaktivieren:

<ListBox Name="MyListBox" ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
     ItemTemplate="{DynamicResource Template2}"/> 
+0

Vielen Dank. Das ist es. – Bojan

Verwandte Themen