WPF DataGrid CellEditingTemplate with floating control

Question

Hello, I'm using the WPF DataGrid and want to make my own CellEditingTemplate. I want to replicate something like the DatePicker that doesn't replace the whole contents of the cell when its being edited, but instead just floats Like this: http://i3.windowsclient.net/SiteFiles/1000/wpfsp1/wpf-35sp1-toolkit/107-2.png?cdn_id={b4d0570c}

I tried this:

<tk:DataGridTemplateColumn.CellEditingTemplate>
    <DataTemplate>
        <Popup AllowDrop="False" StaysOpen="False" >
            <Canvas Width="100" Height="100" Background="Aqua"/>
        </Popup>
    </DataTemplate>
</tk:DataGridTemplateColumn.CellEditingTemplate>

but that doesn't seem to do the trick. I was wondering how I could go about making my own control that can be used for a cell editing template.

Thanks, Raul

Answer:

<tk:DataGridTemplateColumn.CellEditingTemplate>
    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <TextBlock x:Name="PART_TextBox" 
                    Grid.Row="0" Grid.Column="0" 
                    Text="{Binding User.Name}"   />
            <Popup x:Name="PART_Popup" 
                   PlacementTarget="{Binding ElementName=PART_TextBox}"
                   Placement="Bottom" 
                   StaysOpen="True"
                   AllowsTransparency="True"
                   IsOpen="True">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <TextBox Grid.Column="0" Grid.Row="0" Text="(Enter a last, first)"/>
                    <Button Grid.Column="1" Grid.Row="0" Content="Search" />
                    <TreeView Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Height="200" Width="200" />
                </Grid>
            </Popup>
        </Grid>
    </DataTemplate>
</tk:DataGridTemplateColumn.CellEditingTemplate>

Answer 1

put a button in your CellTemplate that will respond to your click event and in the click handler you can show some popup from where you will select your values.

Answer 2

The default value for the Popup.IsOpen property is False, so that's at least one reason you aren't seeing the popup. Perhaps this will solve your problem:

<DataTemplate>
  <Popup AllowDrop="False" StaysOpen="False" IsOpen="True">
    <Canvas Width="100" Height="100" Background="Aqua"/>
  </Popup>
</DataTemplate>