wpf - 如何水平对齐按钮并使用 xaml windows phone 均匀分布

Question

我有一个包含 ViewModel 的 ObservableCollection，它又定义了我的按钮定义。

我已经做了几个小时了，一篇又一篇地阅读文章，但无济于事。我试过使用列表框，这是我最接近的。我的按钮是水平构建的，但假设我要显示 3 个按钮，我希望一个显示在左侧，一个显示在中间，一个显示在右侧。

<ListBox Grid.Row="2" ItemsSource="{Binding Links}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <StackPanel Background="Beige" Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Button Grid.Column="{Binding Column}" 
                    Grid.Row="0" 
                    Width="90" 
                    Height="90">
                <ContentControl>
                    <StackPanel Orientation="Vertical">
                        <Image Source="{Binding Image}" Width="36" Height="36"
                               Margin="5" Stretch="UniformToFill" 
                               HorizontalAlignment="Center"/>
                        <TextBlock Text="{Binding Description}" 
                                   Foreground="#0F558E" 
                                   FontSize="18" 
                                   HorizontalAlignment="Center"/>
                    </StackPanel>
                </ContentControl>
            </Button>
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

如您所见，我使用 ViewModel 中的属性动态设置列，但我不再有网格，因为我无法让它工作，但理想情况下我想使用网格，以便我可以指定在哪个列设置按钮。

当我使用 StackPanel 时，它可以工作，但按钮彼此相邻，而不是在整个屏幕宽度上均匀分割。

我使用 ItemsControl 完成了与上述类似的操作并使用网格，我可以看到每个按钮都被添加，但它们在第 0 行第 0 列中相互重叠。如果我将该行绑定(bind)到 Column 属性以进行测试，它会正确构建它，但我的按钮显示在不同的行上这不是我想要的。我希望每个按钮水平对齐。

我怎样才能做到这一点？我知道我可以硬编码 3 个按钮，只需更改它们的图标和文本，并通过将相关按钮作为绑定(bind)参数传递来处理相关代码，但理想情况下，我想在网格中动态构建按钮并使用列定位它们.

请注意，列数将是固定的，即 3，因为我永远不会超过这个。

谢谢。

Answer 1

but ideally I'd like to use a grid so that I can specify in which Column to set the button.

在任何 Xaml 变体中 ，为什么不直接使用 Grid ，如下图所示，其中Grid设置为消耗所有水平空间。
然后将网格的中心列设置为星形大小，并在按钮 1 和按钮 3 之后消耗剩余的空间，它们会自动调整大小为自己的空间:

<Grid>

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

   <Button Grid.Column="0"/>
   <Button Grid.Column="1" HorizontalAlignment="Center"/>
   <Button Grid.Column="2"/>

</Grid>

如果失败，请将按钮设置为 HorizontalAlignment成为 Left和按钮三为Right .

作为列表框的旁白，它可能不会拉伸(stretch)到屏幕的整个水平尺寸。查看我对 WP8 尺寸问题的回答:
ListBoxItem HorizontalContentAlignment .