質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.35%

【WPF】Gridで縦に1:X:1で3分割する方法がわかりません

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 874

galmacher

score 31

WPFで画面をGridで横幅を3分割しようとしています。
Windowの横幅が800、真ん中を400px、残りの左右を1:1の比率で分割したいです。
(この場合200px、200pxとなるはず。)

そして以下の用のコントロールを配置するために、下記コードを書きました。
左:ボタン
中:Canvas(横幅が400pxのhoge.jpgを表示する)
右:ボタン

<Window x:Class="GridTest.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:GridTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="400"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <Button Grid.Column="0">左</Button>
        <Canvas Name="canvas" Grid.Column="1" Width="400" Background="LightBlue"/>
        <Button Grid.Column="2">右</Button>
    </Grid>
</Window>
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace GridTest
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            // 幅が400pxの画像ファイル
            BitmapImage source = new BitmapImage(new Uri(@"C:\hoge.jpg"));
            Image forcanvas = new Image();
            forcanvas.Source = source;
            canvas.Children.Add(forcanvas);
        }
    }
}

xaml上はきれいに分割されているように見えるのですが、
ビルドしていざ動かしてみるとサイズ比率がおかしくなっており、
Canvas上の右側に余白が出来てしまいます。

イメージ説明
今後Windowsのサイズを変更するかもしれないので、
画像ファイルは拡大縮小することなくそのままのサイズ(幅400px)で表示して、

残った左右は1:1で分けたいのですがどうすればよいでしょうか。

追記:
以下のように変更しても結果は同じでした。
<ColumnDefinition Width="400"/>
→<ColumnDefinition Width="Auto"/>

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • galmacher

    2018/10/31 14:24

    hihijijiさん リモートデスクトップは使っておらず、ディスプレイも特に設定をしておりません。環境なのでしょうか…。

    キャンセル

  • galmacher

    2018/10/31 14:26

    ebiryoさん Canvasは水色で、画像ファイル(hoge.jpg)は背景が真っ白で「あ」と記載されているものです。「Canvas上の右側に余白」は白い部分の右側にある水色の部分です。

    キャンセル

  • takabosoft

    2018/10/31 15:46

    実際に実行した画面をキャプチャしてもらって、ペイントソフトなどでドット数を測ってみてはいかがでしょう。ウィンドウ幅、画像幅、水色エリアの幅、左・右の幅は何ピクセルになっていますか?

    キャンセル

回答 2

checkベストアンサー

+1

WPF のピクセルは DIP(デバイス非依存ピクセル)と言って、普通に言われるピクセルとは違います。
DPI and Device-Independent Pixels
画像の 400 ピクセルはドット数でしょうから、そこで不整合が起こっています。
リンク先の下の方に DIP と物理ピクセルをコンバートする方法が書いてありますのでやってみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/31 16:43

    ご回答ありがとうございました。
    恥ずかしながらピクセルの考えが違うことを知りませんでした。
    やりたかったことは、真ん中のCanvasに画像ファイルを表示、余った左右の余白に均等にボタンを配置、ということなので、
    画像ファイルから取得したWidthをCanvasのWidthに設定し、実現できました。

    キャンセル

+1

Canvasに配置された要素を左右均等に、という意味ですか?
それでしたらGridの分割は関係ないと思います。

Canvasの要素ではなく直接Imageを配置してはいかがでしょうか?

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/31 16:41

    ご回答ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る