How to display a new control through trigger in WPF - wpf

Question

Now I got a Grid and I'm trying to display a control, lets say a StackPanel in the grid to cover the origin content when the mouse enters. I put the StackPanel in the first row, made its ZIndex=10(greater than Grid) and property Visibility binding to the Grid's IsMouseOver property. This trick just has one defect: the StackPanel will influence the grid's layout. For example, if the StackPanel's width is up to 500 and the original Grid only 100, the Grid expands quietly annoyingly. Here is the XAML snippet
<Grid x:Name="FileControlGrid">
!--The StackPanel to display when mouse enters--!
<StackPanel Orientation="Vertical" ZIndex="10" Grid.Row="0"
Visibility="{Binding ElementName=FileControlGrid, Path=IsMouseOver, Converter={StaticResource MouseoverToVisibilityCvt}}">
<...>
</StackPanel>
!--Origin Content below, I need the stackpanel to cover the Image--!
<Image Grid.Row="0" Source="{Binding FilePath, Converter={StaticResource FileiconCvt}}" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Center" MaxWidth="100" MaxHeight="100" Margin="5"/>
<TextBlock Grid.Row="1" Margin="0,5" Text="{Binding FileName, Mode=TwoWay}" FontFamily="Times New Roman" HorizontalAlignment="Left" FontWeight="SemiBold" MaxWidth="150" TextTrimming="WordEllipsis" FontSize="14"/>
</Grid>
I attempted using the Trigger, but instead of setting simple properties, I've no idea how to generate a grandly new control in triggers. Anyone can help?
Images here

Answer 1

Didn't understand the reason why you want to display the StackPanel in MouseOver but here is a simple solution that should work :
Create two properties of Visibility ImageVisiable and StackPanelVisiable.
Connect both properties to the Controls
MouseEnter event Switch between them
Example :
Xaml Side :
<Grid x:Name="Mouse" MouseEnter="Mouse_MouseEnter" MouseLeave="Mouse_MouseLeave">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<!--The StackPanel to display when mouse enters-->
<StackPanel Orientation="Vertical" Visibility="{Binding StackPanelVisiable}" Grid.Row="0">
</StackPanel>
<!--Origin Content below, I need the stackpanel to cover the Image-->
<Image Grid.Row="0" Source="/Superman.jpg" Visibility="{Binding ImageVisiable}" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Center" MaxWidth="100" MaxHeight="100" Margin="5"/>
<TextBlock Grid.Row="1" Margin="0,5" Text="{Binding FileName, Mode=TwoWay}" FontFamily="Times New Roman" HorizontalAlignment="Left" FontWeight="SemiBold" MaxWidth="150" TextTrimming="WordEllipsis" FontSize="14"/>
</Grid>
View Model :
private Visibility m_stackVisibility;
private Visibility m_imageVisibility;
public MainVM()
{
m_stackVisibility = Visibility.Visible;
m_imageVisibility = Visibility.Hidden;
}
public Visibility StackPanelVisiable
{
get { return m_stackVisibility; }
set { SetProperty(ref m_stackVisibility , value); }
}
public Visibility ImageVisiable
{
get { return m_imageVisibility; }
set { SetProperty(ref m_imageVisibility, value); }
}
private void Mouse_MouseEnter(object sender, MouseEventArgs e)
{
((MainVM)this.DataContext).StackPanelVisiable = Visibility.Hidden;
((MainVM)this.DataContext).ImageVisiable = Visibility.Visible;
}
private void Mouse_MouseLeave(object sender, MouseEventArgs e)
{
((MainVM)this.DataContext).ImageVisiable = Visibility.Hidden;
((MainVM)this.DataContext).StackPanelVisiable = Visibility.Visible;
}
Hope it helped
Asaf