在 StackPanels 中重现 CSS 属性：Space Between

Question

无论窗口大小如何，XAML 中是否可以自动分隔 StackPanel 中的元素？

在带有属性的 CSS 中：你可以将元素之间的空间发送到父元素的两侧。这就是我想要重现的。有可能吗？

Answer 1

StackPanel 不能以这种方式工作，请参阅documentation。它没有可用空间或剩余空间来划分的概念，它只是在一个方向上堆叠元素。

将子元素排列成可以水平或垂直定向的单行。

您可以改为使用DockPanel。它允许将控件堆叠到面板的任一侧，默认情况下，添加到面板的最后一个元素会填充剩余空间。 Border 这里用作一个虚拟元素来占用剩余空间。通常，您会在那里放置一个实际使用的控件。请注意，此示例仅复制您明确要求的内容，面板允许更复杂的布局。请参阅文档中的remarks。

<DockPanel>
   <Rectangle DockPanel.Dock="Left" Fill="Black" Width="100" Height="100"/>
   <Rectangle DockPanel.Dock="Right" Fill="Black" Width="100" Height="100"/>
   <Border/>
</DockPanel>

另一种方法是使用具有三列的Grid，其中左列和右列使用Auto 和Width，因此包含的控件只占用所需的空间，而中间列有它的Width 设置为 *，这将使其适合剩余空间。

<Grid>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition/>
      <ColumnDefinition Width="Auto"/>
   </Grid.ColumnDefinitions>
   <Rectangle Grid.Column="0" Fill="Black" Width="100" Height="100"/>
   <Rectangle Grid.Column="2" Fill="Black" Width="100" Height="100"/>
</Grid>

size attributes for Grid上的相关部分：

Grid 中定义的列和行可以利用星型大小按比例分配剩余空间。当星号被选为行或列的高度或宽度时，该列或行将获得剩余可用空间的加权比例。这与 Auto 形成鲜明对比，后者根据内容的大小在列或行内平均分配空间。

---

更新您的列表示例。您可以为项目定义数据模板。

<ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal" Margin="25,60,25,25" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemTemplate>
      <DataTemplate>
         <Border Padding="0,25" BorderThickness="0 0 0 1" BorderBrush="#3D3C44">
            <Grid Width="378" Background="black">
               <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition/>
                  <ColumnDefinition Width="Auto"/>
               </Grid.ColumnDefinitions>
               <Label Grid.Column="0" Content="hello" Foreground="white"/>
               <Border Grid.Column="1" x:Name="PlaceholderForYourContentAndBindings" Background="Red"/>
              <theme:OnOff Grid.Column="2" Height="21" Width="38" HorizontalAlignment="Right" Grid.Column="1" Toggle="{Binding status , Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" MouseLeftButtonDown="OnOff_MouseLeftButtonDown" />
            </Grid>
         </Border>
      </DataTemplate>
   </ListView.ItemTemplate>   
</ListView>

如果您希望 ListView 中有两个固定列，请使用 UniformGrid 而不是 WrapPanel 并删除固定大小。使用ItemContainerStyle，项目将随窗口缩放。

<ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" ItemsSource="{Binding StringItems}">
   <ListView.ItemsPanel>
      <ItemsPanelTemplate>
         <UniformGrid Columns="2" Margin="25,60,25,25" />
      </ItemsPanelTemplate>
   </ListView.ItemsPanel>
   <ListView.ItemContainerStyle>
      <Style TargetType="{x:Type ListViewItem}">
         <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
      </Style>
   </ListView.ItemContainerStyle>
   <ListView.ItemTemplate>
      <DataTemplate>
         <Border Padding="0,25" BorderThickness="0 0 0 1" BorderBrush="#3D3C44">
            <Grid  Background="black">
               <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition/>
                  <ColumnDefinition Width="Auto"/>
               </Grid.ColumnDefinitions>
               <Label Grid.Column="0" Content="hello" Foreground="white"/>
               <Border Grid.Column="1" x:Name="PlaceholderForYourContentAndBindings" Background="Red"/>
               <theme:OnOff Grid.Column="2" Height="21" Width="38" HorizontalAlignment="Right" Grid.Column="1" Toggle="{Binding status , Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" MouseLeftButtonDown="OnOff_MouseLeftButtonDown" />
            </Grid>
         </Border>
      </DataTemplate>
   </ListView.ItemTemplate>
</ListView>