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

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

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

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

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

XAML

XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。

Q&A

解決済

1回答

846閲覧

Visual Studio WPFアプリ開発で実行時コントロールの大きさや位置がおかしくなってしまう

kenji.y

総合スコア1

C#

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

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

XAML

XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。

1グッド

0クリップ

投稿2023/03/10 09:28

編集2023/03/10 09:35

前提

Visual StudioでC# WPFアプリのコントロールについて。

発生している問題

コントロール(ボタンに限らず)の大きさや位置がUI開発画面と実行時の画面で変わってしまう。
以下、開発画面と実行画面の画像です。
開発画面の表示
実行時の表示

該当のXAML

xaml

1<Window x:Name="testwpf" x:Class="testwpf.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:testwpf" 7 mc:Ignorable="d" 8 Title="testwpf" Height="400" Width="300"> 9 <Button Height="40" Content="実行" Click="Button_Click" Margin="100,252,100,92" Width="100"/> 10</Window>

試したこと

自分でもかなり検索したりしてみたのですが、検索の仕方が悪いのか解決には至らず...
私の推測ではMarginのせいでこんなことになっているのかな?と思ったりしましたが、それをどうすればいいのかも分からずでした。
どうか、ご教授のほどよろしくお願い致します。

補足情報(FW/ツールのバージョンなど)

Visual Studio 2022

補足

この質問で投稿させていただいたコードは初期の状態で設定されているGridを削除していますが、これは削除しないほうが良いのでしょうか?
Gridありでも上記の画像よりはひどくないものの、やはりボタンの高さが変わってしまいます。

TN8001👍を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

私の推測ではMarginのせいでこんなことになっているのかな?と思ったりしましたが、それをどうすればいいのかも分からずでした。

はい。その通りです。ウィンドウを広げるとボタンが出てくると思います。

なんていえばいいんですかね?
例えばウィンドウの高さを変えるとウィンドウ下部に常に92pxの空白があるような状態になり、一定以上高さが小さくなるとボタンが隠れてしまいます。

要はデザイナでコントロールをドラッグして移動するような操作をすると、上下左右にマージンがついてしまいこのようなことになります。
わたしはこれをぐちゃぐちゃマージンと呼んでいますw(Margin="8,8,8,8"のような小さい数値は問題ありません)

ウィンドウのリサイズをさせる気がないのであれば、このような作り方でもおおむね問題はないです(Window.WidthWindow.Heightはタイトルバーや枠を含み、実際のユーザー設定を見ずに固定値っぽいので、Gridにサイズを入れたほうがよさそう)

xml

1<Window 2 x:Class="Qf2phpggrf7n3d8.MainWindow" 3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 5 ResizeMode="NoResize" 6 SizeToContent="WidthAndHeight"> 7 <Grid Width="300" Height="400"> 8 <Button 9 Width="100" 10 Height="40" 11 Margin="100,268,100,92" 12 Content="実行" /> 13 </Grid> 14</Window>

リサイズ対応にするには4辺のマージンをやめ、1辺(あるいは直行する2辺)だけになるようにします(HorizontalAlignmentVerticalAlignmentを適宜変更してください)

xml

1<Window 2 x:Class="Qf2phpggrf7n3d8.MainWindow" 3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 5 Width="300" 6 Height="400"> 7 <Grid> 8 <Button 9 Width="100" 10 Height="40" 11 Margin="0,0,0,92" 12 HorizontalAlignment="Center" 13 VerticalAlignment="Bottom" 14 Content="実行" /> 15 </Grid> 16</Window>

実際のところはGrid.RowDefinitionsとかを使って、ウィンドウサイズによってコントロールも位置やサイズが変わるように作成してください。
WPFにおけるGUI構築講座 -座標ベタ書きから脱却しよう- - Qiita

投稿2023/03/10 10:50

編集2023/03/12 22:52
TN8001

総合スコア9326

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

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

kenji.y

2023/03/10 11:00

なるほど、そうだったんですね! とても分かりやすい説明、参考になるサイトまでありがとうございました! ベストアンサーにさせていただきます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問