CODEWITHSUNDEEP
c#wpfxamllistbox
user7157732
user7157732

Reputation: 347

Display multiple column data in C# WPF

I need to display two columns of dataset; first column is the Checkbox items and second column would be just a list<string> I am able to build first column (grid.column=0) using Listbox with Checkbox in XAML as:

 <Grid Grid.Row="0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <ListBox x:Name="Listitems"  Grid.Column="0" SelectionMode="Multiple" ItemsSource="{Binding MonthlyResults}" >
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <CheckBox  Content="{Binding logdate}" IsChecked="{Binding Checked ,Mode=TwoWay}"
                                             Click="CheckBox_Click"/>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>

                        </Grid>

User interface is displayed correctly as:

enter image description here

For the second column, I thought of using a ListView(grid.colum=1) and updated the above XAML as:

 <Grid Grid.Row="0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <ListBox x:Name="Listitems"  Grid.Column="0" SelectionMode="Multiple" ItemsSource="{Binding MonthlyResults}" >
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <CheckBox  Content="{Binding logdate}" IsChecked="{Binding Checked ,Mode=TwoWay}"
                                             Click="CheckBox_Click"/>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                             </ListBox>
                            <ListView Grid.Column="1" Name="CatNames" FontSize="13" SelectionMode="Extended" 
                                 ItemsSource="{Binding Path=OFMCategoriesNames}" IsSynchronizedWithCurrentItem="False" >
                        </ListView>
                        </Grid>

But the user interface is messed up. Both columns have their own scrollbars. enter image description here

How to display the columns in the same listbox ?

*************Update based on the answer provided*************** I updated the XAML as:

 <Grid Grid.Row="0">
                               <ListBox x:Name="Listitems"  SelectionMode="Multiple" ItemsSource="{Binding MonthlyResults}" >
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*" SharedSizeGroup="A1"/>
                                                <ColumnDefinition Width="*" SharedSizeGroup="A2"/>
                                            </Grid.ColumnDefinitions>
                                            <CheckBox Grid.Column="0" Content="{Binding logdate}" IsChecked="{Binding Checked ,Mode=TwoWay}" Click="CheckBox_Click"/>
                                            <ListView Grid.Column="1" Name="CatNames" FontSize="13" SelectionMode="Extended" 
                                             ItemsSource="{Binding MeasureMethod}" IsSynchronizedWithCurrentItem="False" >
                                            </ListView>
                                        </Grid>

                                    </DataTemplate>
                               </ListBox.ItemTemplate>

                             </ListBox>

                        </Grid>

Even after adding "sharedsizegroup", the columns are not aligned properly..

enter image description here

Upvotes: 0

Views: 3032

Answers (1)

Steve
Steve

Reputation: 11963

You can either use a Grid view inside the ListView like

<ListView.View>
    <GridView>
        ....
    </GridView>
</ListView.View>

or you can use a grid inside your template

<ListBox.ItemTemplate>
     <DataTemplate>
          <Grid Grid.IsSharedSizeScope="True">
              <Grid.ColumnDefinitions>
                   <ColumnDefinition SharedSizeGroup="A"/>
                   <ColumnDefinition SharedSizeGroup="B"/>
                   <ColumnDefinition SharedSizeGroup="C"/>
              </Grid.ColumnDefinitions>
              <CheckBox Grid.Column="0"/>
              <TextBlock Grid.Column="1"/>
              <TextBlock Grid.Column="2"/>
          </Grid>
      </DataTemplate>
</ListBox.ItemTemplate>

Upvotes: 2

Related Questions