Visual Studio | WPF > 実装: デザイン時と実行時のウィンドウサイズの違いの対策 > XAML対応

4534 ワード
myVisualStudioStudy geometry WPF difference WPF テキストリンク
動作環境
Windows 8.1 Pro (64bit)
Microsoft Visual Studio 2017 Community
Sublime Text 2

関連

WPF特有の問題なのか、デザイン時と実行時にウィンドウサイズが異なる。
一方で、コントロールの配置は保持されるようで、コントロール右と下のマージンがおかしくなったソフトになる。

対策

Visual Studio | WPF > SizeToContent="WidthAndHeight" > 内容に応じてウィンドウサイズを変更してくれる
を使う。

XAMLで以下のように記載する。

  1. Gridの中にGridを作る

    • 元にあるGridと同じデザイン時のサイズにするが、
    • GUIで元のGridと同じサイズにするとWidthとHeight属性の表記が消失するため手入力する。
    • デザイン時のサイズに合うように目視しながらWidthとHeightの値を決める
      • 適当なサイズのGridを配置した上で、表示されるマージン値を参考に再度サイズを手入力してもよい

  2. コントロールを配置していく

コード例

MainWindow.xaml
<Window x:Class="_171207_t0936_controlLocation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_171207_t0936_controlLocation"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525"
        SizeToContent="WidthAndHeight">
    <Grid>
        <!-- 実行時とデザイン時のウィンドウサイズの違い回避のため、-->
        <!-- SizeToContent=WidthAndHeightと合わせて -->
        <!-- 下記のGrid内でコントロールを配置すること -->
        <Grid Height="320" Width="515" Margin="0,0,0,0">
            <Button Content="Button" HorizontalAlignment="Left" 
                    Margin="430,10,0,0" VerticalAlignment="Top" Width="75"/>
        </Grid>
    </Grid>
</Window>

デザイン時

実行時

備考

日々様々なデザイン資料を作っているような人たちはピクセル単位での違和感を感じるかもしれない。

その他、多くのユーザに対しては違和感は少ないだろう。