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>