2017-01-06 12 views
1

XAMLとUWPを使用するImageViewboxに縦横に配置するにはどうすればよいですか?可変次元の画像が与えられたら、コンテナの幅に合わせて、特定のアスペクト比に切り取る必要があります。イメージをビューボックスにセンタリングする

イメージの幅と高さを希望のアスペクト比に設定し、イメージが上/左(中央にない)に整列されていることを除いて動作するViewbox半分が、他は切り取られていない。

<Viewbox> 
    <Image Source="{Binding ImageUrl}" 
      Width="16" 
      Height="9" 
      Stretch="UniformToFill" 
      HorizontalAlignment="Center" 
      VerticalAlignment="Center"/> 
</Viewbox> 

+0

スクリーンショットを追加できますか? – Prajwal

+1

'Stretch =" UniformToFill "は自然なアスペクト比に応じて画像の右または下の部分をカットします。それに加えて、ImageコントロールはViewboxを「塗りつぶし」て中央に配置する必要があります。 Horizo​​ntalAlignmentとVerticalAlignmentは効果がありません。 – Clemens

+0

私は、コンテナの内部にコンテナを置いていると思うのですが、必要な寸法にコンテナの中心を合わせ、イメージで塗りつぶしてください。 –

答えて

2

画像を中央に配置し、Stretch="UniformToFill"をアスペクト比を定義するコンテナの内側に配置します。

<Viewbox> 
    <Grid Width="16" Height="9"> 
     <Image Source="{Binding Path=ImageUrl}" Stretch="UniformToFill" VerticalAlignment="Center" HorizontalAlignment="Center"/> 
    </Grid> 
</Viewbox> 
+0

これはうまくいくと予想されますが、特にスケーリングの際に奇妙なアライメントの問題が発生します。私は+1します。 –

+0

@OwenJamesアラインメントの問題が発生した場合の例を挙げると、私はそれを調べることができます。あなたの質問は今では、私は十分な容器や周辺(画像、サイズ、レイアウトのリスト...?)について知りません – grek40

0

私は最終的に解決策を考え出しました。この問題を解決しようとした人に感謝します。

キーは、画像上にUseLayoutRounding="False"と設定し、以下に示すようにコンテナに置きます。

<Viewbox> 
    <Grid Width="{Binding AspectWidth}" 
      Height="{Binding AspectHeight}"> 
     <Image Source="{Binding ImageSource}" 
       HorizontalAlignment="Center" 
       VerticalAlignment="Center" 
       UseLayoutRounding="False" 
       Stretch="UniformToFill"/> 
    </Grid> 
</Viewbox> 

また、コンテナとしてBorderではなくGridを使用することもできます。

関連する問題