CODEWITHSUNDEEP
c#wpfdatagrid
Sagotharan
Sagotharan

Reputation: 2626

How to include listbox in wpf datagrid control

want to include listbox in wpf datagrid control when datgrid click the cell, as like as outlook calander..

see - this image

My Xaml Code

<DataGrid Name="Grid1" Height="550" Width="850" AutoGenerateColumns="False" CanUserResizeRows="False" CanUserDeleteRows="False" CanUserAddRows="False" AreRowDetailsFrozen="False" SelectionUnit="CellOrRowHeader" SelectedCellsChanged="Grid1_SelectedCellsChanged" CellEditEnding="Grid1_CellEditEnding" LoadingRow="Grid1_LoadingRow" SelectionMode="Extended">
            <DataGrid.RowHeaderTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">  
                        <TextBlock Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, 
                                      AncestorType={x:Type DataGridRow}}, 
                                      Path=Item.Time}" FontSize="16"  />
                        <TextBlock Text="00" Foreground="#9493CF"   />
                    </StackPanel>
                </DataTemplate>
            </DataGrid.RowHeaderTemplate>
            <DataGrid.Style>
                <Style TargetType="DataGrid">
                    <Setter Property="AlternatingRowBackground" Value="LightYellow"/>
                </Style>
            </DataGrid.Style>
            <DataGrid.Columns>
                <DataGridTextColumn Header="Sunday" Binding="{Binding Sunday}" />
                <DataGridTextColumn Header="Monday" Binding="{Binding Monday}" />
                <DataGridTextColumn Header="Tuesday" Binding="{Binding Tuesday}" />
                <DataGridTextColumn Header="Wednesday" Binding="{Binding Wednesday}" />
                <DataGridTextColumn Header="Thursday" Binding="{Binding Thursday}" />
                <DataGridTextColumn Header="Friday" Binding="{Binding Friday}" />
                <DataGridTextColumn Header="Saturday" Binding="{Binding Saturday}" />
            </DataGrid.Columns>
            <DataGrid.ContextMenu>
                <ContextMenu x:Name="LeftClickMenu">
                    <MenuItem Header="New Appointment" Click="MenuItem_Click"/>                  
                    <Separator/>
                    <MenuItem Header="Exit"/>
                </ContextMenu>
            </DataGrid.ContextMenu>
        </DataGrid>

enter image description here

Upvotes: 2

Views: 3999

Answers (1)

Mark Feldman
Mark Feldman

Reputation: 16118

I'd replace each of your DataGridTextColumns with a DataGridTemplateColumn like this:

<DataGridTemplateColumn Header="Sunday" CellEditingTemplate="{StaticResource ListboxCellTemplate}">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Sunday}" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>

And then you'll also need to add a resource for your editing mode where you switch to the listbox template:

<DataGrid.Resources>
        <DataTemplate x:Key="TextCellTemplate" >
            <TextBlock Text="Foo!" />
        </DataTemplate>
        <DataTemplate x:Key="ListboxCellTemplate" >
            <ComboBox>
                <ComboBoxItem>Foo</ComboBoxItem>
                <ComboBoxItem>Bar</ComboBoxItem>
                <ComboBoxItem>Baz</ComboBoxItem>
            </ComboBox>
        </DataTemplate>
    </DataGrid.Resources>

Obviously I'm cutting a lot of corners here, but it should give you the general idea. One problem with this code is that the user will need to click twice on a cell to bring up the list box i.e. once to give it focus and again to switch to edit mode, there's an article on the codeplex site showing how to get around that.

Upvotes: 3

Related Questions