Question

您好，

我在边框内有一个图像，我会提供一个角度。目前我只是将其编码为45。

我的问题是图像显示在边框的左侧。我希望它在中心并适合边界。当我提供一个角度时，我希望它在边框内旋转。

        <Grid Background="gray" HorizontalAlignment="Right" Width="36" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="auto"></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <Line Grid.Column="0" X1="0" X2="0" Y1="0" Y2="500" Fill="Black" Stroke="Black" StrokeThickness="7" StrokeDashArray="0.5 0.5"
                />
            <Border  Grid.Column="1" Background="DarkGreen"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"   >


                <Image Source="pack://application:,,,/WpfApplication3;component/Resources/MyImage.png">
                    <Image.RenderTransform >
                        <RotateTransform Angle="45" />
                    </Image.RenderTransform>
                </Image >



            </Border>
            <Line  Grid.Column="2" X1="0" X2="0" Y1="0" Y2="5000" Fill="Black" Stroke="Black" StrokeThickness="7" StrokeDashArray="0.5 0.5"
                />

        </Grid>

请帮忙

Answer 1

将RenderTransformOrigin属性设置为图像的中心。 RenderTransformOrigin使用相对坐标，因此中心位于0.5,0.5：

<Border ClipToBounds="True">
    <Image ... RenderTransformOrigin="0.5,0.5">
        <Image.RenderTransform>
            <RotateTransform Angle="45"/>
        </Image.RenderTransform>
    </Image>
</Border>

为了使旋转的图像适合边框控件，您可以设置其LayoutTransform：

<Border>
    <Image ...>
        <Image.LayoutTransform>
            <RotateTransform Angle="45"/>
        </Image.LayoutTransform>
    </Image>
</Border>

Answer 2

您可以使用RotateTransform的CenterX和CenterY属性来设置旋转中心。如果在旋转时需要图像扩展边框大小，则需要使用LayoutTransform。

例如，它可以完成：

        <Border>
            <Image Source="pack://application:,,,/WpfApplication3;component/Resources/MyImage.png" x:Name="image">
                <Image.RenderTransform >
                    <RotateTransform 
                        Angle="45" 
                        CenterX="{Binding ElementName=image, Path=ActualWidth, Converter={StaticResource ResourceKey=DivideBy2Converter}}"
                        CenterY="{Binding ElementName=image, Path=ActualHeight, Converter={StaticResource ResourceKey=DivideBy2Converter}}"
                        />
                </Image.RenderTransform>
            </Image >
        </Border>

修改取图像的ActualSize，而不是边框

Answer 3

我想制作一个类似钟针的图像。鉴于角度，它只会显示它。问题是图像没有在120或160伸展，手臂会变短。

我最终通过制作一个矩形并计算其边距和CenterY

来实现

        <Rectangle 
    Stroke="yellow" Fill="Yellow">
            <Rectangle.Margin>
                <MultiBinding Converter="{StaticResource MarginConverter}">
                    <MultiBinding.Bindings>
                        <Binding ElementName="border" Path="ActualWidth"/>
                        <Binding ElementName="border" Path="ActualHeight"/>
                    </MultiBinding.Bindings>
                </MultiBinding>
            </Rectangle.Margin>
            <Rectangle.RenderTransform>
                <RotateTransform CenterX="0" 
            CenterY="{Binding ElementName=border, Path=ActualHeight, Converter={StaticResource CalculateRectCenterY}}" Angle="120" />
            </Rectangle.RenderTransform>
        </Rectangle>

MichałŻochowski的帖子给了我这个想法，虽然他的答案并没有完全解决我的问题

在边框内旋转图像

3 个答案: