添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below. I have a ListBox that shows a list of errors in a logfile. I am using an item template so I can show three things: an image (that shows whether this was an error, warning or just a message), the date/time and the message.
The XAML is:
xml Code:
  1. <ListBox Name="lstErrors" Grid.Row="1" Grid.Column="0" Margin="6">
  2.             <ListBox.ItemTemplate>
  3.                 <DataTemplate>
  4.                     <Border Margin="4" BorderThickness="1" BorderBrush="SteelBlue" CornerRadius="3">
  5.                         <StackPanel Orientation="Horizontal">
  6.                             <Image Name="imgError" Margin="6"
  7.                                 Source="/WpfLogfileReader;component/Images/109_AllAnnotations_Error_256x256.png"
  8.                                 Width="24" Height="24" />
  9.  
  10.                             <StackPanel>
  11.                                 <TextBlock FontWeight="Bold" Text="{Binding Path=Date}" />
  12.                                 <TextBlock Text="{Binding Path=Message}" />
  13.                             </StackPanel>                                
  14.                         </StackPanel>
  15.                     </Border>
  16.                 </DataTemplate>
  17.             </ListBox.ItemTemplate>
  18.         </ListBox>
For now I am hardcoding the image, doesn't matter for my question.
The problem now is when the Message is long. The items with long messages are stretched (while the smaller items remain small), and the entire ListBox (actually, the entire grid cell the listbox is in) is stretched:
This is not what I wanted. I want my ListBox to stay the same size regardless of the size of the items.
I can 'hardcode' this behavior by simply setting the Width property of the listbox to, say, 200. I don't want to do this however, because the ListBox should be able to stretch when the window is stretched (but not when the items are too large). And anyway, the book I'm reading suggests never to hardcode sizes like this and always use the appropriate layout controls so that my windows can be resized properly.
In each case, even if I do simply set the width to 200, the items still don't match up. They now simply hide behind the listbox boundary:
What I really want is this: the items are all equal size (the size of the listbox minus some margin) even if their content is smaller or larger. If it is larger the text should be 'cut off', if possible with some ellipsis at the end (as I drew) but if it just stops mid sentence that would be fine too I guess.
Note this is a photoshop, as I can't manage VS to do it this way...
How do I make my ListBox behave this way?
Thanks!
Controls:
*NEW* OptionsView control with rich design-time support - MonthPicker - Validators for Winforms - Double TrackBar - Editable ListBox - Outlook Navigation Bar - ColorListBox with images - Advanced ToolStripContainer - RadioButtonGroup Control - Expandable Groupbox - Wizard Template Usercontrol (full Design-time support!) ... Now with Aero Glass support! - 3D Separator - ListView Options Screen - TabControl with tab-specific ContextMenuStrips and Tab-Dragging
Menustrip and Toolstrip Renderers:
Visual Studio 2010 - Customizable Menu/ToolStrip (incl Office 2007 + all Office 2003 styles) - Office 2007 - Visual Studio 2008 - [WIP]Vista Toolstrip
Misc:
*NEW* Thread safe property setting extension - Cup(Of T) - Snapping windows - *UPDATED* Advanced Shape Editor like Visual Studio - ByVal vs ByRef and value types vs reference types - Game Of Life - OOP Tic Tac Toe game example - Moving and Resizing a Control or a Borderless Form, using SendMessage (smooth) - Manual 'MDI Window List' menu - Tabbed MDI Text Editor - Very Extensive MDI text editor - Real Synchronized RichTextBox scrolling - Notepad-like New/Open/Save/SaveAs/Exit behaviour
HorizontalContentAlignment on the ListBox must be set to "Stretch." By default it is "Left." This will cause your content to stretch to the parent control size. Next, you have to disable horizontal scrolling. Otherwise, the content can grow indefinitely in the horizontal direction. Also, you can't use a horizontal StackPanel if you want to limit the size of an element in the horizontal direction. I replaced that StackPanel with a Grid. Finally, to enable text trimming with the ellipsis effect, the TextTrimming property is set to CharacterEllipsis on the message TextBlock.
Here is the final resultant xaml:
Code:
<ListBox Name="lstErrors"
                 Grid.Row="1"
                 Grid.Column="0"
                 Margin="6"
                 HorizontalContentAlignment="Stretch"
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border Margin="4"
                            BorderThickness="1"
                            BorderBrush="SteelBlue"
                            CornerRadius="3">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Image Name="imgError"
                                   Margin="6"
                                   Source="/WpfLogfileReader;component/Images/109_AllAnnotations_Error_256x256.png"
                                   Width="24"
                                   Height="24" />
                            <StackPanel Grid.Column="1">
                                <TextBlock FontWeight="Bold"
                                           Text="{Binding Path=Date}" />
                                <TextBlock Text="{Binding Path=Message}"
                                           TextTrimming="CharacterEllipsis" />
                            </StackPanel>
                        </Grid>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.