如何水平对齐按钮并与xaml windows phone平分传播

Question

我有一个ObservableCollection,它包含ViewModel,它反过来定义我的按钮定义.

我已经看了好几个小时,在文章之后阅读文章但无济于事.我尝试过使用Listbox,这是我最接近的.我的按钮正在水平构建,但假设我显示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行中相互重叠.如果我将行绑定到Column属性以进行测试,则构建它它正确但我的按钮显示在不同的行上,这不是我想要的.我希望每个按钮水平对齐.

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

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

谢谢.

Answer 1

但理想情况下我想使用网格,以便我可以指定在哪个列中设置按钮.

令人困惑的是为什么你不能只使用那个网格,比如下面的半伪代码,网格消耗所有的水平空间.然后将网格的中心列设置为星号,并在按钮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>

如果失败,将按钮1的水平对齐设置为Left,将按钮3设置为"right".

作为旁边的列表框,它可能不会拉伸到屏幕的整个水平尺寸.看看我对WP8大小调整问题的回答: ListBoxItem Horizo​​ntalContentAlignment.