displaying listbox in grid

Question

This might be a stupid question, but i'm stuck doing it :(. I have a grid and have 3 columns. I have a textbox and a listbox in each of these 3 columns as shown:

<Grid.ColumnDefinitions>
                <ColumnDefinition Width="130"></ColumnDefinition>
                <ColumnDefinition Width="380"></ColumnDefinition>
                <ColumnDefinition Width="146"></ColumnDefinition>
             </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="30"></RowDefinition>
            </Grid.RowDefinitions>
            <StackPanel Grid.Column="0" Grid.Row="0">
                <TextBox Text="File Name" Height="30"></TextBox>
            </StackPanel>
            <StackPanel Grid.Column="1" Grid.Row="0">
                <TextBox Text="File Path" Height="30"></TextBox>
            </StackPanel>
            <StackPanel Grid.Column="2" Grid.Row="0">
                <TextBox Text="File Size" Height="30"></TextBox>
            </StackPanel>

            <StackPanel Grid.Column="0">
                <ListBox Name="listbox_name" Margin="1,30" Height="276" />
             </StackPanel>
            <StackPanel Grid.Column="1">
                <ListBox Name="listbox_path" Margin="1,30" Height="276" />
            </StackPanel>
            <StackPanel Grid.Column="2">
                <ListBox Name="listbox_size" Margin="1,30" Height="276" />
            </StackPanel>

and the code behind it:

public Window1()
        {
        InitializeComponent();

        list.Add("D:\\a\\hy");
        list.Add("D:\\a\\hy1");
        list.Sort();           
    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        listbox_name.ItemsSource = list;
        grid1.Visibility = Visibility.Hidden;
    }


    private void button1_Click(object sender, RoutedEventArgs e)
    {
        grid1.Visibility = Visibility.Visible;
    }

But on the click of the button, im not able to see the listboxes, with the list displayed. Please guide me as to where im going wrong. Thanks!

Answer 1

The reason is that your stackPanel is in Grid.Col="0" and it is very small. But ListBox is inside of your stackPanel. It has a margin and it goes down. Is you can't see your listBox.

If you will do something like this:

<StackPanel Margin="0,0,0,-279">
            <ListBox Name="listbox_name" Margin="1,30" Height="276" />
        </StackPanel>

you will see your listBox and it will work.
NOTE: this code is only example. You need to make a better layout for your window.

Here is how i made a window loyout:

<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" Height="350" Width="678" Loaded="Window_Loaded">
    <Grid Name="grid1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="130"></ColumnDefinition>
            <ColumnDefinition Width="380"></ColumnDefinition>
            <ColumnDefinition Width="146"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>

        <TextBlock Text="File Name"  Grid.Row="0" Grid.Column="0" Margin="5" />
        <TextBlock Text="File Path"  Grid.Row="0" Grid.Column="1" Margin="5" />
        <TextBlock Text="File Size" Grid.Row="0" Grid.Column="2" Margin="5" />

        <ListBox Name="listbox_name" Grid.Row="1" Grid.Column="0" BorderBrush="Black" />
        <ListBox Name="listbox_path" Grid.Row="1" Grid.Column="1" BorderBrush="Black" />
        <ListBox Name="listbox_size" Grid.Row="1" Grid.Column="2" BorderBrush="Black" />
    </Grid>
</Window>

Answer 2

    <ListView Name="list"
              Grid.Row="1" 
              ItemsSource={Binding Path=Files}                
              >
    <ListView.View>        
     <GridView>
        <GridViewColumn Header="Name">
            <GridViewColumn.CellTemplate>
                <DataTemplate>
                    <Button>
                     <TextBlock Text="{BindingPath=Name}"/>                            
                    </Button>
                </DataTemplate>
            </GridViewColumn.CellTemplate>
        </GridViewColumn>
        <GridViewColumn Header="Size">
            <GridViewColumn.CellTemplate>
                <DataTemplate>
                    <Button>
                     <TextBlock Text="{BindingPath=Size}"/>                            
                    </Button>
                </DataTemplate>
            </GridViewColumn.CellTemplate>
        </GridViewColumn>
        <GridViewColumn Header="Path">
            <GridViewColumn.CellTemplate>
                <DataTemplate>
                    <Button>
                     <TextBlock Text="{BindingPath=Path}"/>                            
                    </Button>
                </DataTemplate>
            </GridViewColumn.CellTemplate>
        </GridViewColumn>
    </GridView>
     </ListView.View>  
    </ListView>

My your ViewModel will be

public class FileListViewModel : INotifyPropertyChanged
{
    /// <summary>
    /// 
    /// </summary>
    public ObservableCollection<Fileinfo> Files{ get; set; }

    private Fileinfo selectedFile;

    public Fileinfo SelectedFile
    {
        get { return selectedFile; }
        set
        {
            selectedFile= value;
            InvokePropertyChanged(new PropertyChangedEventArgs("SelectedFile"));
        }
    }

    public PersonListViewModel()
    {
                //Loading List
                   Files= new ObservableCollection<Fileinfo>()
              {    //This is temp list you modify accordinh to you logic
                                   new FileInfo{Name = "File32"},
                                   new FileInfo{Name = "File33"},
                                   new FileInfo{Name = "File373"},
                                   new FileInfo{Name = "File393"},
                                   new FileInfo{Name = "File345"},
                                   new FileInfo{Name = "File375"},
                                   new FileInfo{Name = "File395"},
                                   new FileInfo{Name = "File387"},
                                   new FileInfo{Name = "File387"}
                               };
    }

    #region Implementation of INotifyPropertyChanged

    /// <summary>
    /// 
    /// </summary>
    public event PropertyChangedEventHandler PropertyChanged;

    /// <summary>
    /// 
    /// </summary>
    /// <param name="e"></param>
    public void InvokePropertyChanged(PropertyChangedEventArgs e)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
            handler(this, e);
    }

    #endregion
}

Your Model should be like

public class FileinFo: INotifyPropertyChanged
{
    private string size;
    public event PropertyChangedEventHandler PropertyChanged;
    private string name;
    private bool isSelected;

    public string Size
    {
        get { return size; }
        set
        {
            size= value;
            InvokePropertyChanged(new PropertyChangedEventArgs("size"));
        }
    }

    public string Name
    {
        get { return name; }
        set
        {
            name = value;
            InvokePropertyChanged(new PropertyChangedEventArgs("Name"));
        }
    }



    public bool IsSelected
    {
        get { return isSelected; }
        set
        {
            isSelected = value;
            InvokePropertyChanged(new PropertyChangedEventArgs("IsSelected"));
        }
    }

    public void InvokePropertyChanged(PropertyChangedEventArgs e)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null) handler(this, e);
    }
}  

You need to set the datacontext of yor View to ViewModel

so lets say your view is named as FileListView.xaml

Then in code behind in the Constructor you can write

this.DataContext= new FileListViewModel();