在MouseOver上，不使用xaml調整圖像大小以適合給定的高度和寬度wpf窗口

Question

我需要增加圖像OnMouseOver的Height和Width ，這些圖像以水平方向放置在StackPanel ，以便在WPF window以給定大小將圖像跨過整個面板，而這是無法實現的。 如果我缺少xaml屬性中的任何數學運算或方法中的任何錯誤，請告知我。 提前致謝。

以下是我的xaml，后來是我的輸出圖像。

<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

嘗試將樣式放入堆棧面板或網格的資源中。

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