0

如何使我的中间列占据可用的全部宽度，同时为评论部分留出空间，以便所有这些评论框都很好地对齐到右侧：

在此处输入图像描述

    <DataTemplate x:Key="ActivityStreamItemTemplate">
        <StackPanel VerticalAlignment="Top" Margin="5,0,0,0">
            <Button Command="{Binding Path=DataContext.LoadSpacesCommand, ElementName=OrganisationList}" CommandParameter="{Binding}" Padding="-5,0,-5,-5" Margin="-7,-12,-7,-7" Height="auto" BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" UseLayoutRounding="True" FontSize="0.01">
                <Grid Height="auto">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="67" />
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="60" />
                    </Grid.ColumnDefinitions>
                    <StackPanel Height="auto" Grid.Column="0" Background="Transparent">
                        <Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
                            <Image Source="{Binding created_by.image.link}" Width="62" Height="62"></Image>
                        </Border>
                    </StackPanel>
                    <StackPanel Height="auto" Grid.Column="1">
                        <TextBlock Text="{Binding type}" HorizontalAlignment="Left" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
                        <TextBlock Text="{Binding ttitle}" HorizontalAlignment="Left" FontSize="15" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" TextWrapping="Wrap"/>
                        <TextBlock Text="{Binding created_by.name}" HorizontalAlignment="Left" FontSize="11" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
                    </StackPanel>
                    <StackPanel Height="60" Grid.Column="2" Margin="10,0,0,0">
                        <StackPanel.Background>
                            <ImageBrush Stretch="Fill" ImageSource="/Assets/Icons/CommentsIcon.png"/>
                        </StackPanel.Background>
                        <TextBlock Text="{Binding comments.Count}" HorizontalAlignment="Center" FontSize="20" Foreground="Black" TextAlignment="Center" Padding="0,8,0,0"/>
                    </StackPanel>
                </Grid>
            </Button>
        </StackPanel>
    </DataTemplate>

我尝试在第三个堆栈面板上放置水平对齐，但实际上没有用。

编辑：感谢您的尝试，但没有雪茄：

在此处输入图像描述

4

6 回答 6

2

您需要更改其ListBoxItem自身的样式以确保内容在可用宽度上拉伸。

定义这种风格：

<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>

然后“评论”图像的右对齐将起作用，并且中央文本框将拉伸以填充可用空间。

您可能会发现仅使用StackPanel水平方向的 a 比Grid用于项目模板的 a 效果更好，尤其是当第 0 列和第 2 列中的数据是恒定宽度时。

于 2013-10-21T08:19:53.497 回答
0

据我所知，在 StackPanel 内部，当它的方向是 LeftToRight 时，您不能向右执行 Horizo​​ntalAlignment。避免使用它。

于 2013-10-21T09:01:37.337 回答
0

您的问题是按钮，如果它不是强制性的，请尝试删除它并向 StackPanel 添加一个“Tap”事件，我已经尝试过了，它可以工作。

<DataTemplate x:Key="ActivityStreamItemTemplate">

    <StackPanel Tap="...">
        // no <Button> here
            <Grid>
                ---
            </Grid>
        // no </Button> here
    </StackPanel>

</DataTemplate>

更好的选择

<DataTemplate x:Key="ActivityStreamItemTemplate">

    <Grid Tap="...">
        ...
    </Grid>

</DataTemplate>
于 2013-10-24T09:53:13.747 回答
0

使用为列指定的空间，例如：

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="67" />
                    <ColumnDefinition Width="3*"/>
                    <ColumnDefinition Width="1*" />
                </Grid.ColumnDefinitions>

这使中心列的空间比右列多 3 倍

于 2013-10-19T16:36:06.933 回答
0

问题源于使用 StackPanel 作为最顶层的 UIElement。改用 Grid 并遵循此建议的其余部分： Right align content in ListBox

这也导致了这个答案： C# windows phone -Alignment in xaml ListBox.ItemTemplate

于 2013-10-21T15:54:24.587 回答
0

由于您如何模糊图像，因此很难准确说出您想要什么。但我觉得关键是要让网格的容器占据所有可用空间，HorizontalAlignment="Stretch".

<DataTemplate>
    <StackPanel HorizontalAlignment="Stretch">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="67" />
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="60" />
            </Grid.ColumnDefinitions>

            <!-- items here -->
        </Grid>
</StackPanel>

您设置的项目Grid.Column="0"宽度为 67dip，宽度为 60dip的项目，Grid.Column="2"宽度为 60dip 的项目Grid.Column="1"将填满剩余空间。

dip = 与设备无关的像素 - 所有 Windows Phone 应用都按照屏幕为 480x800 进行测量，然后以屏幕​​的实际分辨率进行渲染。

于 2013-10-20T21:10:50.140 回答