0

Visual Studio 2010 で WPF レイアウトを作成するときは、コントロールをツールボックスから既定の要素 (通常はグリッド) にドラッグ アンド ドロップするだけです。これを行うと、Visual Studio に表示される間隔が実行時に表示されるものと一致しません。たとえば、以下はそれぞれ 2 つのレイアウトのビジュアル エディターと実行時の結果です。. .

編集者

ランタイム

. . . と 。. .

編集者

ランタイム

...間隔が変更されていることに注意してください。
2 つの例で生成された XAML を次に示します。. .

  <Button Content="ProjectPattern" Height="23" HorizontalAlignment="Left" Margin="12,296,0,0" Name="butProjPattern" VerticalAlignment="Top" Width="117" Click="butProjPattern_Click" />
    <TextBlock Height="22" HorizontalAlignment="Left" Margin="135,0,0,141" Name="ResultProjPattern" Text="(result)"       VerticalAlignment="Bottom" Width="41" />
    <TextBlock Height="23" HorizontalAlignment="Left" Margin="175,295,0,0" Name="TextBlockPattern" Text="     (pattern file)" Padding="4" VerticalAlignment="Top" Width="135" Background="#FFF1F3FF" /> 
    <Button Content="...browse" Height="23" HorizontalAlignment="Right" Margin="0,294,814,0" Name="buttonPatternBrowse" VerticalAlignment="Top" Width="54" Click="buttonPatternBrowse_Click" />

...と...

<Button Content="Display Cross" Height="24" HorizontalAlignment="Left" Margin="622,108,0,0" Name="buttonCross" VerticalAlignment="Top" Width="117" Click="buttonCross_Click" />
<TextBlock Height="24" HorizontalAlignment="Right" Margin="0,107,344,0" Name="ResultCross" Text="(result)" VerticalAlignment="Top" Width="100" />
<Button Content="Display Diamond" Height="23" HorizontalAlignment="Left" Margin="622,138,0,0" Name="butDiamond" VerticalAlignment="Top" Width="117" Click="butDiamond_Click" />
<TextBlock Height="23" HorizontalAlignment="Right" Margin="0,138,344,0" Name="ResultDiamond" Text="(result)" VerticalAlignment="Top" Width="100" />
<Button Content="DisplayFullField" Height="24" HorizontalAlignment="Left" Margin="622,165,0,0" Name="butFullField" VerticalAlignment="Top" Width="117" />
<TextBlock Height="24" HorizontalAlignment="Right" Margin="0,164,344,0" Name="ResultFullField" Text="(result)" VerticalAlignment="Top" Width="100" />

ボタン ハンドラー、テキスト コンテンツなどを追加しましたが、レイアウトは厳密には Visual Studio レイアウト エディターによって生成されたものです。私が気づいたことの 1 つは、ツールボックスからグリッドにドラッグ アンド ドロップしても、Visual Studio は、さまざまな要素の Horizo​​ntalAlignment に "Left" を選択するか "Right" を選択するかについて一貫性がないことです。

コンテナー要素は、既定の Window 内の既定の Grid にすぎません。最小化はできますが、サイズ変更はできません。. .

<Window x:Class="Caller1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="500" Width="1200" ResizeMode="CanMinimize">
    <Grid Height="460">

その結果、レイアウトを「微調整」するために、エディターとアプリの実行の間で多くの時間を無駄にする必要があります。"WYSIWYG" レイアウト エディタがランタイム レイアウトと一致しない理由と、それらを対応させるにはどうすればよいですか?

前もって感謝します。

4

2 に答える 2

4

私はあなたの画像を見ることができません (ばかげた仕事のファイアウォール) が、あなたがGrid間違って使用していることは XAML からわかります。Widthこれがエディターのせいである可能性があることは理解していますが、真剣に、すべての要素におよびHeightプロパティを設定するべきではありません。

Gridの子の固定サイズが必要な場合は、いくつかRowDefinitionの とColumnDefinitionを設定し、それらのサイズを設定します。これを行うと、レイアウトの操作がはるかに簡単になります (おそらくデザイナーでより正確になります)。したがって、最初Gridは次のようになります。

<Grid Margin="12,0,0,0">  
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="117" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="138" /> <!-- This is your desired width + horizontal margins -->
    <ColumnDefinition Width="Auto" />
  </Grid.ColumnDefinitions>
  <Button x:Name="butProjPattern" 
          Grid.Column="0" 
          Content="ProjectPattern" 
          VerticalAlignment="Center" 
          Click="butProjPattern_Click" />
  <TextBlock x:Name="ResultProjPattern" 
             Grid.Column="1" 
             Margin="6,0,0,0" 
             Text="(result)" 
             VerticalAlignment="Center" />
  <TextBlock x:Name="TextBlockPattern" 
             Grid.Column="2"
             Margin="3,0,0,0" 
             Padding="4"
             Text="     (pattern file)" 
             Background="#FFF1F3FF" /> 
  <Button x:Name="buttonPatternBrowse" 
          Grid.Column="3"
          Content="...browse" 
          Margin="22,0,0,0" 
          VerticalAlignment="Center" 
          Padding="2,1"
          Click="buttonPatternBrowse_Click"  />
</Grid>

もう 1 つ注意したいのは、これをKaxamlに配置した後、XAML レイアウトの迅速なプロトタイピングに最適であることに気付きましたStackPanel。最初のグリッドは、実際にはこれよりもはるかに単純な実装になる可能性があります (Widthレイアウトに一致するように、いくつかの項目に を設定する必要があります)。

<StackPanel Margin="12,0,0,0" Orientation="Horizontal">  
  <Button x:Name="butProjPattern" 
          Content="ProjectPattern" 
          Width="117"
          Click="butProjPattern_Click" />
  <TextBlock x:Name="ResultProjPattern" 
             Margin="6,0,0,0" 
             Text="(result)" 
             VerticalAlignment="Center" />
  <TextBlock x:Name="TextBlockPattern" 
             Margin="3,0,0,0" 
             Padding="4"
             Width="135"
             Text="     (pattern file)" 
             Background="#FFF1F3FF" /> 
  <Button x:Name="buttonPatternBrowse" 
          Content="...browse" 
          Margin="22,0,0,0" 
          VerticalAlignment="Center" 
          Padding="2,1"
          Click="buttonPatternBrowse_Click"  />
</StackPanel>
于 2013-08-28T14:52:47.107 に答える
1

この回答は、実際の質問に対する直接の回答ではなく、問題を回避するための提案です。

プロパティで正確なコントロールの配置を使用すると、UI コントロールの配置の問題が発生することがよくありMarginます。Alignment利用可能なさまざまなオプションを使用して、コントロールを配置および/または配置できるようにすることは、(特に WPF では) 適切な手順です。この方法を使用して、常に目的のレイアウトを取得できました。

たとえば、GridまたはStackPanelを使用してコントロールを配置していれば、この問題は発生しませんでした。私が知っている多くの WPF 開発者は、あなたが言及した問題のために、Visual Studio でデザイナーを使用することさえ気にしません... コントロールをドラッグ アンド ドロップし、XAML に移動して不要な値を削除した後、多くの場合、より迅速に機能します。 XAML を自分で入力するだけです。

なぜ Visual Studio デザイナーが正しく動作しないのかを本当に知りたい場合は、Microsoft 開発者フォーラムで質問すると、実際に Microsoft の従業員に見られる可能性があります。

于 2013-08-28T14:47:09.857 に答える