xaml layout introduction for Qt programmer

I am used to Qt and its Qt Designer.

XAML with its layout controls 'grid' and 'StackPanel' are somehow similar, but I still miss or do not find some of the most common properties of designs in Qt. Since I am completely new to XAML I would like to know the answers or further available documentations.

For example I want to add 2 elements (lets say buttons) either horizontal or vertical with their default height and a minimum height and minimum width. If aligned horizontal they shall be pushed to the left side and the remaining side on the right should be free. That means that the size of the buttons does not increase if the windows size is increased. In Qt this is realized by a grid in combination with a spacer (see for example this tutorial for an example).

My first XAML is far away from what I expect. The definition of RowDefinition is copied from a tutorial. However I do not understand its meaning...

<Window x:Class="SpectrumViewer.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Spectrum Viewer" Height="350" Width="525">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="Auto" />      
    </Grid.RowDefinitions>
    <StackPanel Orientation="Horizontal" Margin="8" VerticalAlignment="Top">
      <Button MinWidth="75" MaxHeight="23" Margin="10" HorizontalAlignment="Left" Width="100" Name="buttonTest">test</Button>
      <TextBox MinWidth="75" MaxHeight="23" Margin="10" HorizontalAlignment="Left" Width="150" Name="textBoxValue"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal" Margin="8" >
      <Button MinWidth="75" MaxHeight="23" Margin="10" HorizontalAlignment="Left" Width="100" Name="button1">button 1</Button>
      <Button MinWidth="75" MaxHeight="23" Margin="10" HorizontalAlignment="Left" Width="100" Name="button2">button 2</Button>
    </StackPanel>
  </Grid>
</Window>

The next image shows that the elements are pushed to the left side, but the two stacked panels above each other are not pushed to the top. If I set them both with VerticalAlignment="Top" they overlap which is also wrong.

If I resize the window one can see that the elements are not resized and that the second StackPanel overlaps with the first:

Instead the elements should be resized to the minimum width and any further resizing of the windows should be prohibited.

---

The first problem of the two stack panels overlapping when you set both VerticalAlignment to Top is because since you haven't specified in which Grid.Row they should be, the default would be both in Grid.Row = 0 . Specify the row index and they won't overlap :

<StackPanel Grid.Row="0" Orientation="Horizontal" Margin="8" VerticalAlignment="Top">
  ....
</StackPanel>
<StackPanel Grid.Row="1" Orientation="Horizontal" Margin="8" VerticalAlignment="Top">
  ....
</StackPanel>

There is no way the window would stop resizing when the minimum size of the buttons is reached. You could set the MinWidth of the Grid and ask the window to stop right there :

<Window x:Class="SpectrumViewer.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Spectrum Viewer" Height="350" Width="525" 
MinWidth="{Binding RelativeSource={RelativeSource Self}, Path=Content.MinWidth}">
  <Grid MinWidth="350">
   .......
  </Grid>
</Window>

Or set the MinWidth of the Window itself :)

链接地址: http://www.djcxy.com/p/49964.html

上一篇: 如何实现一个显示/隐藏内容取决于其宽度的JPanel？

下一篇: Qt编程人员的xaml布局介绍