C# windows phone -xaml ListBox.ItemTemplate 中的对齐 [英] C# windows phone -Alignment in xaml ListBox.ItemTemplate

问题描述

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

i Would like to make simple ListBox. Each line should contain 2 controls, one aligned to the left the other to the right, thats all :) I tried multiple approaches but nothing worked. My code is following

<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"的文本块.知道如何将一个文本块向右对齐而另一个文本块向左对齐吗?非常感谢:)

(Two textblocks are just for demonstration, in real application i'd like to bind one text block to real data, instead of second ill use button.) When ill compile this, both textblock are aligned to the left, in emulator, it seems like one textblock with text "abcdef". Any idea how to align one text block to the right and the other one to the left? many thanks :)

推荐答案

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

By default the ListBoxItem does not fill the space it is given. It aligns itself and the content to the left. To ensure that the content of your ListBoxItem spans the entire width, you need to change the ItemContainerStyle

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

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

Now the content will span the available width. If you wish to use a StackPanel as in your example, make sure to set it's HorizontalAlignment also. The StackPanel also does not fill in the available space given

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

但是，我建议使用网格并定义两列

However, I would recommend using a Grid and defining two columns

<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>

这篇关于C# windows phone -xaml ListBox.ItemTemplate 中的对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！