0

XAML を使用して GUI を作成/表示するアプリケーションを開発しています。現在、必要な要素のほとんどが GUI に表示されており、現在、さまざまな要素を特定の場所に配置するレイアウトに取り組んでいます。

ほとんどのコントロール/ボタンなどは左に配置され、左端をさらに左にドラッグしてウィンドウのサイズを変更しても、GUI の左側に「バインド」されたままになります (アイコンなどはウィンドウの端からの相対的な距離を保ちます)。

ただし、右に揃えたい要素が 1 つあるため、GUI の右側に「バインド」したままにします。ウィンドウの右側の端をさらに右にドラッグしてサイズを変更すると、ウィンドウの端からの相対的な距離を維持するために移動します...現時点では、その要素は、ウィンドウのサイズに関係なく、描画した位置（つまり、左から900ピクセル）に留まります-したがって、ウィンドウの幅を 900 ピクセル未満にサイズ変更すると、その要素は表示されません。

GUI の左側にバインドする要素に使用した XAML マークアップは、たとえば次のとおりです。

<Button Style="{DynamicResource NoChromeButton}" Click="backBtn_Click" Margin="0, 0, 0, 0" HorizontalAlignment="Left" >
    <Image Source="C:\...\abc.png" Height="30" Width="40" />
</Button>

GUI の右側にバインドする要素に使用しようとしている XAML マークアップは次のとおりです。

<Button Style="{DynamicResource NoChromeButton}" Click="referThis" Margin="0, 0, 0, 0" HorizontalAlignment="Right" >
    <TextBlock>Button XYZ</TextBlock>
</Button>

ただし、 を に設定しHorizontalAlignmentてもRight、実際にはテキスト ボタンは右に移動しません。まだディスプレイの左側にバインドされています。右に移動する唯一の方法は、大きく設定することです。その「x」位置の値、つまりMargin="900, 0, 0, 0"、しかし、その位置はウィンドウのサイズに関連していないため、右端を左にドラッグしすぎると、そのボタンはウィンドウの表示領域の外にあるので、見えない...

ボタンの位置が表示ウィンドウの右端を基準とするように、ボタンのプロパティを設定するにはどうすればよいですか?

編集

問題のすべての要素は、同じ<Grid>and<StackPanel>タグ内に表示されます。

<StackPanel>
    <Grid ...>
        <Button ... HorizontalAlignment="Left">
        </Button>
        ...
        <Button ... HorizontalAlignment="Right">
        </button>
        ...
    </Grid>
    ...
</StackPanel>
4

2 に答える 2

1

ボタンを含むコンテナを知っておくとよいでしょう (グリッド、パネル、その他?):

とにかく置くと：

<Button HorizontalAlignment="Right"

の

<StackPanel Orientation="Horizontal">

それはうまくいくはずです...スタイルによってもたらされる矛盾がないかどうかも確認してください...

于 2016-05-13T10:24:46.580 に答える
1

次のソリューションの基本的な考え方は、Grid.

ColumnDefinition左揃えにする各要素に対して固定幅の を作成し、右揃えにする各要素に対して固定幅の を作成しColumnDefinitionます。中央に を作成するColumnDefinitionためWidth="*"、WPF は最初に他の列のサイズを固定長に基づいて計算し、残りのスペースを中央の列で埋めます。各ボタンは、Grid.Column所属する列を宣言するためにプロパティを正しく設定する必要があることに注意してください。

のサイズを変更するWindowと、 はGridそのレイアウトと柔軟な子を更新します。この場合、柔軟な子は中央の列だけです。

簡単な実装を次に示します。

  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="auto"/>
      <ColumnDefinition Width="auto"/>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="auto"/>
      <ColumnDefinition Width="auto"/>
    </Grid.ColumnDefinitions>

    <Grid.Resources>
      <Style TargetType="{x:Type Button}">
        <Setter Property="Width" Value="100"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="Margin" Value="10"/>
      </Style>
    </Grid.Resources>

    <Button Grid.Column="0" Content="Button1Left"/>
    <Button Grid.Column="1" Content="Button2Left"/>
    <Button Grid.Column="3" Content="Button1Right"/>
    <Button Grid.Column="4" Content="Button2Right"/>

  </Grid>

コントロールに関するより完全なチュートリアルについては、 this、this、およびthisGridを確認してください。

結果を明確にするために、特定のサイズと余白を持つボタンに単純なスタイルを設定していることに注意してください。ただし、独自のスタイルを使用することもできます。

于 2016-05-13T16:34:58.987 に答える