如何在wpf数据网格控件中包含列表框

时间:2014-01-02 12:05:44

标签: c# wpf datagrid

当datagrid点击单元格时,想要在wpf datagrid控件中包含listbox,就像outlook calendar ..

请参阅 - this image

我的Xaml代码

<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

1 个答案:

答案 0 :(得分:2)

我会用DataGridTemplateColumn替换每个DataGridTextColumns,如下所示:

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

然后您还需要为切换到列表框模板的编辑模式添加资源:

<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>

显然我在这里削减了很多角落,但它应该给你一般的想法。这段代码的一个问题是,用户需要在单元格上单击两次以显示列表框,即一次为了给焦点并再次切换到编辑模式,有an article on the codeplex site显示如何解决这个问题。