【问题标题】:C# windows phone -Alignment in xaml ListBox.ItemTemplateC# windows phone -xaml ListBox.ItemTemplate 中的对齐
【发布时间】:2012-06-13 14:15:50
【问题描述】:

我想做一个简单的ListBox。每行应包含 2 个控件,一个向左对齐,另一个向右对齐,仅此而已:) 我尝试了多种方法,但没有任何效果。我的代码如下

<StackPanel Grid.Row="1" Margin="12,0,12,0" Grid.Column="0">
        <ListBox Name="ListBox" Margin="12,0,12,0" ItemsSource="Exercises" HorizontalContentAlignment="Stretch">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Width=">
                        <TextBlock Text="abc" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                        <TextBlock Text="def" HorizontalAlignment="Right" VerticalAlignment="Center"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </StackPanel>

(两个文本块仅用于演示,在实际应用中我想将一个文本块绑定到真实数据,而不是第二个使用不当的按钮。) 当编译错误时,两个文本块都向左对齐,在模拟器中,它看起来像是一个带有文本“abcdef”的文本块。 知道如何将一个文本块向右对齐,另一个向左对齐吗? 非常感谢:)

【问题讨论】:

  • 为了清楚起见,您希望控件左右对齐还是它们的内容左右对齐?
  • 我喜欢控件左右对齐:)

标签: windows-phone-7 xaml


【解决方案1】:

默认情况下,ListBoxItem 不会填充给定的空间。它将自身和内容向左对齐。为确保您的 ListBoxItem 的内容跨越整个宽度,您需要更改 ItemContainerStyle

<ListBox>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

现在内容将跨越可用宽度。如果您希望在示例中使用 StackPanel,请确保也将其设置为 Horizo​​ntalAlignment。 StackPanel 也没有填充给定的可用空间

<DataTemplate>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
        <TextBlock Text="abc" HorizontalAlignment="Left" VerticalAlignment="Center"/>
        <TextBlock Text="def" HorizontalAlignment="Right" VerticalAlignment="Center"/>
    </StackPanel>
</DataTemplate>

不过,我建议使用 Grid 并定义两列

<DataTemplate>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <TextBlock Text="abc" HorizontalAlignment="Left" VerticalAlignment="Center"/>
        <TextBlock Text="def" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center"/>
    </Grid>
</DataTemplate>

【讨论】:

  • 谢谢,“网格方法”有效 :) 你甚至不需要使用
  • 我正在使用 MaterialDesign 和 MahApps,当我更改 ItemContainerStyle 时,我失去了这些库提供的自定义样式,我认为它完全重置了 ListBox 样式,无论如何我可以在只更改的同时保留自定义样式那个属性?
  • 样式很可能有一个键,你可以用它来扩展样式
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2012-10-11
  • 1970-01-01
  • 1970-01-01
  • 2015-05-23
  • 2015-09-11
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多