2

I am struggling last days to achieve following layout:

sketch

I have a ListBox with template for each Item:

  • Label always anchored on left side
  • Label always anchored on right side
  • Label (TextBlock) in middle with flexible size
  • 3rd label bellow, so far this is easiest to set :)

Main problem in my example is that I can't made middle text (that can be long) to adjust, but not push suffix (red) label while I am resizing ListBox.

I hope that this layout is possible, and that I am missing something trivial.

What's interesting is that 1st example (bellow) work well "outside" listbox. Do I need somehow force realign of listbox while resizing?

Thanks for any help.

I have attached bellow 2 examples I tried (beside many other):

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) One more try with 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>
2
  • Instead of using a grid inside your listbox try using a stackpanel Commented Jul 1, 2016 at 11:22
  • Unfortunately not worked (I have added Template3 above). Commented Jul 1, 2016 at 11:30

1 Answer 1

3

You can achieve this by disabling horizontal scrolling for ListBox:

<ListBox Name="MyListBox" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
         ItemTemplate="{DynamicResource Template2}"/>
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you very much. This is it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.