Question

如何让我的中间列占用可用的全宽，同时为评论部分留出空间，以便所有这些注释框都很好地与右边对齐：

enter image description here

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

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

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

enter image description here

Answer 1

您需要更改ListBoxItem本身的样式，以确保内容在可用宽度上展开。

定义此样式：

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

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

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

Answer 2

使用为列提供的空间，例如：

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

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

Answer 3

由于你的图像模糊，很难确切地说出你想要的东西。但我认为关键是要让网格容器占用所有可用空间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，Grid.Column="2"的宽度为60dip，而Grid.Column="1"的项目将填充其余空间。

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

Answer 4

在StackPanel内部，就我所知，你的方向是LeftToRight，你不能向右对齐HorizontalAlignment。避免使用它。

Answer 5

问题源于使用StackPanel作为最顶层的UIElement。请改用网格，并遵循以下建议： Right align content in ListBox

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

Answer 6

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

<DataTemplate x:Key="ActivityStreamItemTemplate">

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

</DataTemplate>

更好的选择

<DataTemplate x:Key="ActivityStreamItemTemplate">

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

</DataTemplate>

Xaml，中间列没有占据全宽

6 个答案: