c# - MouseOver では、xaml を使用して指定された高さと幅の wpf ウィンドウに合わせて画像のサイズを変更しません

Question

水平方向に配置された画像のサイズを大きくしHeightて、画像が特定のサイズでパネル全体にまたがるようにする必要がありますが、これは達成できません。xaml 属性の計算が不足している場合や、アプローチに問題がある場合はお知らせください。前もって感謝します。WidthOnMouseOverStackPanelWPF window

以下は私の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>