在邊框內旋轉圖像

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>

為了使旋轉的圖像適合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的帖子給了我這個主意，盡管他的回答並不能完全解決我的問題