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

linjiqin 阅读:274 2024-05-22 17:00:29 评论:0

我有一个包含 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,因为我永远不会超过这个。

谢谢。

请您参考如下方法:

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 .


标签:程序员
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号