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

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

新規登録して質問してみよう
ただいま回答率
85.50%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

.NET Framework

.NET Framework は、Microsoft Windowsのオペレーティングシステムのために開発されたソフトウェア開発環境/実行環境です。多くのプログラミング言語をサポートしています。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

Q&A

解決済

2回答

4832閲覧

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

galmacher

総合スコア37

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

.NET Framework

.NET Framework は、Microsoft Windowsのオペレーティングシステムのために開発されたソフトウェア開発環境/実行環境です。多くのプログラミング言語をサポートしています。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

0グッド

0クリップ

投稿2018/10/31 04:13

編集2018/10/31 04:56

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

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

xaml

1<Window x:Class="GridTest.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6 xmlns:local="clr-namespace:GridTest" 7 mc:Ignorable="d" 8 Title="MainWindow" Height="450" Width="800"> 9 <Grid> 10 <Grid.ColumnDefinitions> 11 <ColumnDefinition Width="1*"/> 12 <ColumnDefinition Width="400"/> 13 <ColumnDefinition Width="1*"/> 14 </Grid.ColumnDefinitions> 15 <Button Grid.Column="0">左</Button> 16 <Canvas Name="canvas" Grid.Column="1" Width="400" Background="LightBlue"/> 17 <Button Grid.Column="2">右</Button> 18 </Grid> 19</Window>

C#

1using System.Windows; 2using System.Windows.Controls; 3using System.Windows.Data; 4using System.Windows.Documents; 5using System.Windows.Input; 6using System.Windows.Media; 7using System.Windows.Media.Imaging; 8using System.Windows.Navigation; 9using System.Windows.Shapes; 10 11namespace GridTest 12{ 13 /// <summary> 14 /// MainWindow.xaml の相互作用ロジック 15 /// </summary> 16 public partial class MainWindow : Window 17 { 18 public MainWindow() 19 { 20 InitializeComponent(); 21 // 幅が400pxの画像ファイル 22 BitmapImage source = new BitmapImage(new Uri(@"C:\hoge.jpg")); 23 Image forcanvas = new Image(); 24 forcanvas.Source = source; 25 canvas.Children.Add(forcanvas); 26 } 27 } 28}

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

イメージ説明
今後Windowsのサイズを変更するかもしれないので、
画像ファイルは拡大縮小することなくそのままのサイズ(幅400px)で表示して、
残った左右は1:1で分けたいのですがどうすればよいでしょうか。

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hihijiji

2018/10/31 04:39

400 → Autoにしてみましたか?
hihijiji

2018/10/31 05:13

試してみましたがこちらの環境では再現しません。 環境の問題かもしれませんね。 リモートデスクトップやディスプレイの設定で拡大縮小を使ってたりしませんか?
ebiryo

2018/10/31 05:18

「Canvas上の右側」ってどの部分を指してしますか?
galmacher

2018/10/31 05:24

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

2018/10/31 05:26

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

2018/10/31 06:46

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

回答2

0

ベストアンサー

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

投稿2018/10/31 05:59

Zuishin

総合スコア28656

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

galmacher

2018/10/31 07:43

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

0

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

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

投稿2018/10/31 05:36

編集2018/10/31 05:37
ebiryo

総合スコア797

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

galmacher

2018/10/31 07:41

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問