User Control in DataGridTemplateColumn - wpf

Question

I have a datagrid in which I rotated everything 90 degrees to show my info vertically. Not that that has to do with anything I don't think. I'm trying to add a UserControl which is basically an Expander into a DataGridTemplateColumn. The problem I'm having is when I go to open my expander(usercontrol), it is opening up behind the cells that are below it. I need to bring it to front to overlap it basically. I have it within a canvas so that the usercontrol won't open up within the cell and expand. I want the cell to stay the same size and upon opening the expander, it will overlap and display covering the datacells below it. Any ideas what I'm doing wrong?
<DataGridTemplateColumn Header="Expander" CanUserResize="False" Width="Auto">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate DataType="UserControl">
<Grid Width="Auto" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" SnapsToDevicePixels="True" OverridesDefaultStyle="True">
<Canvas>
<local:DescriptionUserControl DataContext="{Binding Path=DescriptionViewModel}" x:Name="Description" Height="Auto" Width="Auto" Focusable="True" Margin="0,-2">
</local:DescriptionUserControl>
</Canvas>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Worksheet" Width="Auto">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Content="View Worksheet" HorizontalAlignment="Center" VerticalAlignment="Center" Height="26" Width="110" ></Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="Veeps" width="Auto"></DataGridTextColumn>
</DataGrid.Columns>

Answer 1

The Canvas is a problem here. It never tries to enlarge it's parent, that's why the cells don't expand.
But, it's still part of the visual tree and there are other elements with higher ZIndex. You could try to fix ZIndex for when the expander is expanded, but I believe it will take too much work and will have bugs that will be difficult to find and fix.
I'd go down the "custom control" route. Build a control that inherits from HeaderdContentControl and has one additional property: IsPopupShowing. The content will be in a popup and that will be outside of the visual tree.
Actually, it could be achieved with a template only (although, I still recommend custom control). Something like this:
<Style x:Key="PoppingExpander" TargetType="{x:Type HeaderedContentControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type HeaderedContentControl}">
<Grid>
<ToggleButton x:Name="HeaderHolder"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
ContentStringFormat="{TemplateBinding HeaderStringFormat}"/>
<Popup x:Name="ContentHolder"
Placement="Bottom">
<Border Background="Aqua"
BorderBrush="LightBlue"
BorderThickness="1">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBiding Padding}" />
</Border>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="HeaderHolder" Property="IsChecked" Value="True">
<Setter TargetName="ContentHolder" Property="IsOpen" Value="True"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
[I could have bound IsOpen property of the popup to IsChecked property of the toggle button, but I really don't like using ElementName syntax since it's very particular about it's scope and creates bugs that are very difficult to hunt down. I prefer any other way than ElementName]
This will give you a HeaderedContentControl that has it's content in a popup. You'd need to style the toggle button to look like the one used in the expander (you can extract the style for expander via blend and it will have the style for the button).
Change your use of Expander to HeaderedContentControl, remove setters of properties that are specific to Expander (like IsExpanded) and you should be done.
P.S. - you can change the Placement property of the popup if you want it to open in another direction.