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"/>
回答2件
あなたの回答
tips
プレビュー