2016-06-24 8 views
0

こんにちは、国境の内側の回転イメージ

私は角度を付けたいと思うボーダーの中にイメージを持っています。現在、私は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> 

助けてください

答えて

0

あなたは回転の中心を設定する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> 

編集: が画像の中央にRenderTransformOriginプロパティを設定し

+0

私を解決していないものののMichałŻochowskiのポストは、はい私のアイデアを与えたが、私の境界線が自動である

四角形を作り、そのマージンを計算することにより達成と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> 
したがって、私はcenterxとcenteryでどのような値を与えるべきか分かりません – user2837961

+0

おそらくバインディングと適切なコンバータを使うことができます – michauzo

+0

RenderTransformOriginがデフォルトで中央にある場合。単にClipToBounds = TrueをBorderに追加し、「UniformToFill」のStretch列挙を追加します。 ....それは私が意図した結果を正しく理解しているかどうかです。 –

1

に接するない、画像のActualSizeを取る

例えばそれはとして行うことができます。 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> 
+0

しかし、境界線の幅と高さが不明なため、イメージのサイズがどのように変更されるのですか – user2837961

+0

RenderTransformではなくLayoutTransformを設定できます。私の編集を参照してください。 – Clemens

+0

LayoutTransformは画像を伸ばしません。 120または160のような角度を試してください – user2837961

0

私がイメージを作りたかったですクロックアームに似ています。角度が与えられれば、表示されます。問題は、画像が120または160で伸びていないことと、アームが短くなることでした。

私は最終的に彼の答えは、問題を正確に