How to remove collapsed space in a listbox with items type wrappanel, full source + pic included

问题

I have a ListBox with ItemsPanelTemplate of WrapPanel. There's some left & right padding of the collapsed elements, which I want to get rid of... When the elements are visible, the image is a nice square with five buttons per row. Here is an image: http://iterationx.posterous.com/71739342

How can I get rid of the padding at the beginning of the first button when my A-E buttons are collapsed?

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" SizeToContent="WidthAndHeight"
        >
        <Grid Margin="100,100,100,100">
        <StackPanel>
            <ListBox Name="MainButtonListBox" HorizontalContentAlignment="Stretch" BorderThickness="0" ScrollViewer.HorizontalScrollBarVisibility="Disabled" Padding="0" Width="550">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate >
                        <WrapPanel />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate >
                    <DataTemplate>
                        <Button  Content="{Binding Path=ButtonName}"  Click="Button_Click" DataContext="{Binding}" Width="100"  Height="75"   Visibility="{Binding Path=Visibility}" />
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </StackPanel>
    </Grid>
</Window>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication2
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public class ButtonObj
        {
            public string ButtonName { get; set; }
            public Visibility Visibility { get; set; }
        }

        List<ButtonObj> AEList = new List<ButtonObj>();
        List<ButtonObj> MainButtonList = new List<ButtonObj>();
        public MainWindow()
        {
            InitializeComponent();

            AEList.Add(new ButtonObj() { ButtonName = "A", Visibility = Visibility.Collapsed });
            AEList.Add(new ButtonObj() { ButtonName = "B", Visibility = Visibility.Collapsed });
            AEList.Add(new ButtonObj() { ButtonName = "C", Visibility = Visibility.Collapsed });
            AEList.Add(new ButtonObj() { ButtonName = "D", Visibility = Visibility.Collapsed });
            AEList.Add(new ButtonObj() { ButtonName = "E", Visibility = Visibility.Collapsed });

            foreach (ButtonObj b1 in AEList) MainButtonList.Add(b1);

            MainButtonList.Add(new ButtonObj() { ButtonName = "Expand A-E", Visibility = Visibility.Visible });
            MainButtonList.Add(new ButtonObj() { ButtonName = "G", Visibility = Visibility.Visible });
            MainButtonList.Add(new ButtonObj() { ButtonName = "H", Visibility = Visibility.Visible });
            MainButtonList.Add(new ButtonObj() { ButtonName = "I", Visibility = Visibility.Visible });
            MainButtonList.Add(new ButtonObj() { ButtonName = "Collapse A-E", Visibility = Visibility.Visible });

            MainButtonList.Add(new ButtonObj() { ButtonName = "K", Visibility = Visibility.Visible });
            MainButtonList.Add(new ButtonObj() { ButtonName = "L", Visibility = Visibility.Visible });
            MainButtonList.Add(new ButtonObj() { ButtonName = "M", Visibility = Visibility.Visible });
            MainButtonList.Add(new ButtonObj() { ButtonName = "N", Visibility = Visibility.Visible });
            MainButtonList.Add(new ButtonObj() { ButtonName = "O", Visibility = Visibility.Visible });

            MainButtonListBox.ItemsSource = MainButtonList;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Button btn = sender as Button;
            ButtonObj obj = btn.DataContext as ButtonObj;

            if (obj.ButtonName == "Expand A-E")
            {
                foreach (ButtonObj b1 in AEList) b1.Visibility = System.Windows.Visibility.Visible; 
            }
            if (obj.ButtonName == "Collapse A-E")
            {
                foreach (ButtonObj b1 in AEList) b1.Visibility = System.Windows.Visibility.Collapsed; 
            }

            MainButtonListBox.ItemsSource = null;
            MainButtonListBox.ItemsSource = MainButtonList;
        }
    }
}

回答1:

you just collapse the content of the listbox item. You have to style the ListBoxItem (which is not removed).

<ListBox Name="MainButtonListBox" HorizontalContentAlignment="Stretch" BorderThickness="0" ScrollViewer.HorizontalScrollBarVisibility="Disabled" Padding="0" Width="550" >
     <ListBox.ItemContainerStyle>
          <Style TargetType="{x:Type ListBoxItem}">
              <Setter Property="Padding" Value="0,0,0,0"/>
          </Style>
     </ListBox.ItemContainerStyle>
     <ListBox.ItemsPanel>
          <ItemsPanelTemplate >
               <WrapPanel />
           </ItemsPanelTemplate>
     ...

generally it would be better to use the filter possibilities, so that the items are realy removed from the listbox and not just the content hidden (the items are still selectable with the keyboard)

you also can (better than first style) collapse the whole item:

<ListBox.ItemContainerStyle>
    <Style TargetType="{x:Type ListBoxItem}">                        
        <Setter Property="Visibility" Value="{Binding Path=Visibility}"/>
    </Style>
</ListBox.ItemContainerStyle>

来源：https://stackoverflow.com/questions/7521157/how-to-remove-collapsed-space-in-a-listbox-with-items-type-wrappanel-full-sourc

标签

wpf

xaml

listbox

wrappanel