On MouseOver does not resize image to fit the given height and width wpf window using xaml

Question

I need to increase the Height and Width of my images OnMouseOver which are placed in a StackPanel with orientation as horizontal so that the images span over my entire panel with a given size in my WPF window and that is what am unable to achieve. Please let me know if I am missing any math in my xaml attributes or anything wrong with my approach. Thanks in advance.

The following is my xaml and later are my output images.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="245"/>
    </Grid.RowDefinitions>

    <StackPanel x:Name="TitleSlidesPanel" Grid.Row="0" 
                Orientation="Horizontal">
        <StackPanel Orientation="Vertical"
            Height="245"
                Width="400"   >

            <Image x:Name="img1" VerticalAlignment="Top" 
               HorizontalAlignment="Left"
              RenderOptions.BitmapScalingMode="HighQuality"
               Style="{StaticResource imageStyle}"
               MouseDown="Img1_OnMouseDown"
               MouseUp="Img1_OnMouseUp">
            </Image>
            <CheckBox x:Name="Chkbox1"
                Content="Image1"
                      Width="100"
                       HorizontalContentAlignment="Left"
                HorizontalAlignment="Left"
                VerticalContentAlignment="Center"
                FontSize="12" 
                Margin="0,5,0,0"
                Foreground="Black"
                Height="20">
            </CheckBox>
        </StackPanel>
        <StackPanel Orientation="Vertical"
                  Height="245"
                Width="400" 
                   Margin="-400,0,0,0" >

            <Image x:Name="Img2" VerticalAlignment="Top" 
               HorizontalAlignment="Right"
               RenderOptions.BitmapScalingMode="HighQuality"
               Style="{StaticResource imageStyle}"
               MouseDown="Img2_OnMouseDown"
               MouseUp="Img2_OnMouseUp"    >
            </Image>
            <CheckBox x:Name="Chkbox2"
                Content="Image2"
                FontSize="12" 
                Margin="0,5,135,0"
                HorizontalContentAlignment="Right"
                HorizontalAlignment="Right"
                VerticalContentAlignment="Center"
                Foreground="Black"
                Height="20">
            </CheckBox>
        </StackPanel>
  </StackPanel>
</Grid>


 <Style x:Key="imageStyle" TargetType="{x:Type Image}">
    <Setter Property="Height" Value="100" />
    <Setter Property="Width" Value="200" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Height" Value="245" />
            <Setter Property="Width" Value="400" />
         </Trigger>
    </Style.Triggers>
</Style>

Answer 1

Try putting your style in the resources of either the stackpanel or the grid.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="245"/>
    </Grid.RowDefinitions>
<Grid.Resources>
    <Style x:Key="imageStyle" TargetType="{x:Type Image}">
        <Setter Property="Height" Value="100" />
        <Setter Property="Width" Value="200" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Height" Value="245" />
                <Setter Property="Width" Value="400" />
             </Trigger>
        </Style.Triggers>
    </Style>
</Grid.Resources>
   <StackPanel x:Name="TitleSlidesPanel" Grid.Row="0" 
                Orientation="Horizontal">
        <StackPanel Orientation="Vertical"
            Height="245"
                Width="400"   >

            <Image x:Name="img1" VerticalAlignment="Top" 
               HorizontalAlignment="Left"
              RenderOptions.BitmapScalingMode="HighQuality"
               Style="{StaticResource imageStyle}"
               MouseDown="Img1_OnMouseDown"
               MouseUp="Img1_OnMouseUp">
            </Image>
            <CheckBox x:Name="Chkbox1"
                Content="Image1"
                      Width="100"
                       HorizontalContentAlignment="Left"
                HorizontalAlignment="Left"
                VerticalContentAlignment="Center"
                FontSize="12" 
                Margin="0,5,0,0"
                Foreground="Black"
                Height="20">
            </CheckBox>
        </StackPanel>
        <StackPanel Orientation="Vertical"
                  Height="245"
                Width="400" 
                   Margin="-400,0,0,0" >

            <Image x:Name="Img2" VerticalAlignment="Top" 
               HorizontalAlignment="Right"
               RenderOptions.BitmapScalingMode="HighQuality"
               Style="{StaticResource imageStyle}"
               MouseDown="Img2_OnMouseDown"
               MouseUp="Img2_OnMouseUp"    >
            </Image>
            <CheckBox x:Name="Chkbox2"
                Content="Image2"
                FontSize="12" 
                Margin="0,5,135,0"
                HorizontalContentAlignment="Right"
                HorizontalAlignment="Right"
                VerticalContentAlignment="Center"
                Foreground="Black"
                Height="20">
            </CheckBox>
        </StackPanel>
  </StackPanel>
</Grid>